概述

Vue 构造函数

Vue 的构造函数是 Vue.js 的核心。它允许你创建 Vue 实例。创建一个 Vue 实例非常简单:

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

当你初始化一个 Vue 实例时,你需要传递一个选项对象。这个对象可以包括目标 DOM 元素,初始 data 对象,mixin 方法,生命周期钩子函数等内容。完整的选项列表详见 组件选项

每个 Vue 实例本质上就是一个 ViewModel (因此在本文档中你会看到好多变量名叫 vm)。每个实例都有一个对应的 DOM 节点 vm.$el,它大致相当于 MVVM 中的 V。每个实例也有一个 JavaScript 数据对象 vm.$data,相对应的就是 MVVM 中的 M。改变 M 会触发 V 的更新。对于双向绑定,用户在 V 当中触发的事件会导致 M 的状态变化。Vue 实例上暴露的全部属性详见 实例属性

每个 Vue 实例也有不少 实例方法,包括数据监视,事件通讯和 DOM 操作等等。

Vue 构造函数本身也暴露了 全局 API,这些 API 可以让你扩展 Vue 的子类,配置全局选项,注册全局组件、指令、过滤器这些自定义资源等等。

实例初始化

如果你在实例化中提供了 el 选项,Vue 实例将会立即进入编译阶段。否则,编译工作直到其 vm.$mount() 被调用时才会开始。在编译阶段,Vue 会递归遍历模板中的 DOM 节点并收集其中的指令,将其数据和这些指令所对应的 DOM 节点 “链接” 起来。一旦链接完毕,这些 DOM 节点就算是被 Vue 实例正式接管了。一个 DOM 节点只能被一个 Vue 实例管理,并且不能被多次编译。

数据代理

每一个 Vue 实例都会对其 $data 对象上的所有属性进行代理。假如你的数据对象上有个属性叫 msg,你可以通过 vm.$data.msg 来访问这个属性,也可以通过 vm.msg 来访问它。看起来有点神奇,但这完全是可选的,你可以选择只使用 vm.$data.msg 这种方式来访问。但是,不论你的偏好如何,都需要注意 vmvm.$data 之间的区别,因为前者是一个 Vue 实例,和纯粹的数据对象还是有区别的。

还有一点值得注意的是数据对象 (data objects) 并不一定只能被一个 Vue 实例观察。我们完全可以让多个 vm 实例可以观察同一个数据对象。当多个组件需要共享一些全局状态的时候,这个特性就非常有用。