vue学习---vue实例

in Vue教程 with 0 comments, 3474 views

回顾

有了前面"起步"的介绍,从本篇开始,我们会逐一开始学习vue的各个部分。前面说到vue的组件系统构成了整个vue应用体系的基石,那么vue实例就是构成这一块块基石的基本单元。

构造器


每个vue应用的起步都会通过vue构造函数创建一个vue的根实例,就像这样:

var vm = new Vue({
  // options vue实例初始化的各种设置项
})

虽然vue和MVVM模式没有严格相关,但vue的设计理念无疑是很受其启发的。也正因此,我们常常使用变量vm(视图模型的缩写)来表示vue的实例。

在你实例化vue时,需要传入一个选项对象,它可以包含数据,模板,挂载元素(用于挂载vue实例的dom元素),方法,生命周期勾子等配置选项。至于完整的配置选项请参考vue官网.

我们还可以命令式地创建一个vue扩展实例,通常情况下会包含很多预置的选项,不过在多数情况下建议将组件构造器注册为一个自定义元素,然后方便的模板中引用。我们会在后面的组件系统中详细说明,现在只需要知道所有的vue组件本质都是一个被扩展后的vue实例或者说是vm(视图模型)。

属性和方法


每个vue实例都会代理它的data对象的所有属性。通俗的说就是可以通过vue实例直接访问data下的各个属性。就像下面代码所示的一样:

var data = { a: 1 }
var vm = new Vue({
  data: data
})

vm.a === data.a // -> true

// setting the property also affects original data
vm.a = 2
data.a // -> 2

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

并且这些属性在前面就已经提到过,是响应式的(不过如果是在vue实例创建之后新增的属性,这个新增属性的变化并不会触发视图的更新)。我们会在后面的深入响应式原理中讨论。

注意:不要在vue实例的某个属性或者回调中使用箭头函数(es6中的新特性),比如 vm.$watch('a', newVal => this.myMethod())。因为箭头函数会绑定函数的执行环境到父级,这样会造成我们访问this.myMethod时提示未定义些函数,显然这不是我们想要的结果。

实例生命周期


Vue实例在创建时会经历一系列初始化步骤--例如,它需要建立数据观察、编译模板、挂载实例到DOM元素、以及数据绑定等操作。在这期间也会触发一些生命周期的勾子,比如mounted , updated, 还有 destroyed等。所有这些勾子的this都指向调用它的Vue实例,也因此在勾子中可以很方便的获取vm对象上的方法和改变各个属性,方便我们通过这些不同阶段的勾子分割我们的代码逻辑。也许你会问Vue.js是否有“控制器”的概念(-.-表示并无此疑惑),答案是,没有!

var vm = new Vue({
  data: {
    a: 1
  },
  created: function () {
    // `this` 指向 vm 实例
    console.log('a is: ' + this.a)
  }
})
// -> "a is: 1"

生命周期图示


最后通过一张官方图来说明Vue实例的生命周期。你现在不需要完全理解,不过它能让你有个清晰的概念,有助于你在以后使用过程中更好的理解。

Tips:Vue2.0引入了虚拟Dom,你可以看到很多勾子函数已经发生了变化,移除的改名的新增的,看官可自己查阅(^-^)。

生命周期图示

Responses ${replyToWho} / Cancel Reply