非常教程

Vue 2参考手册

指南 | Guide

3. The Vue Instance(Vue实例)

创建一个Vue实例

每个Vue应用程序都通过使用以下函数创建一个新的Vue实例开始Vue

var vm = new Vue({
  // options
})

虽然与MVVM模式没有严格关联,但Vue的设计部分受到了它的启发。作为惯例,我们经常使用变量vm(简称ViewModel)来引用我们的Vue实例。

当你创建一个Vue实例时,你传入一个选项对象。本指南的大部分内容描述了如何使用这些选项来创建所需的行为。作为参考,您还可以浏览API参考中的完整选项列表。

一个Vue应用程序由一个创建的根Vue实例组成new Vue,可选地组织成一个嵌套的可重用组件树。例如,待办事项应用程序的组件树可能如下所示:

Root Instance
|- TodoList
   |- TodoItem
      |- DeleteTodoButton
      |- EditTodoButton
   |- TodoListFooter
      |- ClearTodosButton
      |- TodoListStatistics

我们稍后会详细讨论组件系统。现在,只要知道所有Vue组件都是Vue实例,并且接受相同的选项对象(除了一些根特定的选项)。

数据和方法

当创建一个Vue实例时,它将在其data对象中找到的所有属性添加到Vue的反应性系统中。当这些属性的值改变时,视图将“反应”更新以匹配新值。

// Our data object
var data = { a: 1 }

// The object is added to a Vue instance
var vm = new Vue({
  data: data
})

// These reference the same object!
vm.a === data.a // => true

// Setting the property on the instance
// also affects the original data
vm.a = 2
data.a // => 2

// ... and vice-versa
data.a = 3
vm.a // => 3

当这个数据改变时,视图将会重新渲染。应该注意的是,如果在创建实例时存在属性,data它们只是被动的。这意味着如果你添加一个新的属性,如:

vm.b = 'hi'

然后更改为b不会触发任何视图更新。如果您知道以后需要一个属性,但它开始是空的或不存在的,则需要设置一些初始值。例如:

data: {
  newTodoText: '',
  visitCount: 0,
  hideCompletedTodos: false,
  todos: [],
  error: null
}

除了数据属性之外,Vue实例还公开了许多有用的实例属性和方法。这些前缀$用于区分它们与用户定义的属性。例如:

var data = { a: 1 }
var vm = new Vue({
  el: '#example',
  data: data
})

vm.$data === data // => true
vm.$el === document.getElementById('example') // => true

// $watch is an instance method
vm.$watch('a', function (newValue, oldValue) {
  // This callback will be called when `vm.a` changes
})

将来,您可以查阅API参考以获取实例属性和方法的完整列表。

实例生命周期钩

每个Vue实例在创建时都会经历一系列初始化步骤 - 例如,它需要设置数据观察,编译模板,将实例安装到DOM以及在数据更改时更新DOM。一路上,它还运行称为生命周期钩的函数,使用户有机会在特定阶段添加自己的代码。

例如,created可以使用挂钩在创建实例后运行代码:

new Vue({
  data: {
    a: 1
  },
  created: function () {
    // `this` points to the vm instance
    console.log('a is: ' + this.a)
  }
})
// => "a is: 1"

也有其他挂钩,这将在实例的生命周期的不同阶段被调用,如mountedupdateddestroyed。所有的生命周期钩子都会调用它们的this上下文,指向调用它的Vue实例。

不要在选项属性或回调中使用箭头函数,例如created: () => console.log(this.a)vm.$watch('a', newValue => this.myMethod())。由于箭头函数绑定到父上下文,this因此不会像您期望的那样是Vue实例,通常会导致诸如Uncaught TypeError: Cannot read property of undefined或之类的错误Uncaught TypeError: this.myMethod is not a function

生命周期图

以下是实例生命周期的图表。你不需要完全理解现在正在进行的一切,但是当你学习和建立更多时,这将是一个有用的参考。

3. The Vue Instance(Vue实例)

Vue 2

Vue.js 是一个构建数据驱动的 web 界面的渐进式框架。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

主页 https://vuejs.org/
源码 https://github.com/vuejs/vue
版本 2
发布版本 2.5.2

Vue 2目录