Close
升级到 Vue 3 | Vue 2 EOL

指南

Vue 实例

创建 Vue 实例

每个 Vue 应用程序都从使用 Vue 函数创建一个新的 **Vue 实例** 开始

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

虽然与 MVVM 模式 没有严格的关联，但 Vue 的设计部分受到了它的启发。按照惯例，我们通常使用变量 vm（ViewModel 的缩写）来指代我们的 Vue 实例。

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

一个 Vue 应用程序由使用 new Vue 创建的 **根 Vue 实例** 组成，可以选择组织成一个嵌套的可重用组件树。例如，一个待办事项应用程序的组件树可能看起来像这样

Root Instance
└─ TodoList
   ├─ TodoItem
   │  ├─ TodoButtonDelete
   │  └─ TodoButtonEdit
   └─ TodoListFooter
      ├─ TodosButtonClear
      └─ 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
})

// Getting the property on the instance
// returns the one from the original data
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
}

唯一例外是使用 Object.freeze()，它阻止现有属性被更改，这也意味着响应式系统无法跟踪更改。

var obj = {
  foo: 'bar'
}

Object.freeze(obj)

new Vue({
  el: '#app',
  data: obj
})
<div id="app">
  <p>{{ foo }}</p>
  <!-- this will no longer update `foo`! -->
  <button v-on:click="foo = 'baz'">Change it</button>
</div>

除了数据属性之外，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 School 上观看免费课程

每个 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"

还有一些其他钩子将在实例生命周期的不同阶段被调用，例如 mounted、updated 和 destroyed。所有生命周期钩子都使用其 this 上下文调用，该上下文指向调用它的 Vue 实例。

不要在选项属性或回调上使用 箭头函数，例如 created: () => console.log(this.a) 或 vm.$watch('a', newValue => this.myMethod())。由于箭头函数没有 this，this 将被视为任何其他变量，并通过父作用域进行词法查找，直到找到，这通常会导致错误，例如 Uncaught TypeError: Cannot read property of undefined 或 Uncaught TypeError: this.myMethod is not a function。

生命周期图

以下是实例生命周期的图表。您现在不需要完全理解所有内容，但随着您学习和构建更多内容，它将是一个有用的参考。

The Vue Instance Lifecycle

← 简介 模板语法 →
发现错误或想为文档做出贡献？ 在 GitHub 上编辑！ 部署在 Netlify 上。