Vue实例

最新推荐文章于 2021-07-31 20:08:19 发布

翻译最新推荐文章于 2021-07-31 20:08:19 发布 · 444 阅读

文章标签：

#vue

vue 专栏收录该内容

2 篇文章

订阅专栏

创建Vue实例

每个Vue应用程序都首先使用以下函数创建一个新的Vue实例Vue：

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

尽管与MVVM模式没有严格关联，但Vue的设计部分受其启发。作为惯例，我们经常使用变量vm（ViewModel的缩写）来引用我们的Vue实例。

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

Vue应用程序由一个用于创建的根Vue实例组成new Vue，可选地组织成嵌套的可重用组件树。例如，todo应用程序的组件树可能如下所示：

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
})

// 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参考以获取实例属性和方法的完整列表。

实例生命周期钩子(hook)

观看Vue学校的免费课程
每个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())。由于箭头函数没有a this，因此this将被视为任何其他变量，并通过父作用域通过词法查找直到找到，通常会导致错误，例如Uncaught TypeError: Cannot read property of undefined或Uncaught TypeError: this.myMethod is not a function。