Vue.js 官方文档摘记：Vue 实例

Vue 实例

构造器

var vm=new Vue({
//选项
});

可以扩展

vue

构造器，从而用预订义选项创建可复用的组件构造器。

var MyComponent=Vue.extend({
//扩展选项
});
//可以将上面理解为为Vue创建了一个名为 MyComponent 的子类
var myComponent=new MyComponent();

尽管可以命令式地创建扩展实例，不过在多数情况下建议将组件构造器注册为一个自定义元素，然后声明式地在用在模板中。

属性和方法

每个Vue实例都会代理其

data

对象里所有的属性。

var data={a:1};
var vm=new Vue({
data:data
});
//上面等同于
var vm2=new Vue({
data:{a:1}
});
//同时第一种方式时，可以理解为将data的引用传入Vue中，所以data的任何变化
//都会影响Vue中的值，如下面的情况：
vm.a===data.a // ->true
vm.a=2;       // ->data.a=2
data.a=3;     // ->vm.a=3

上面采用

vm.a

直接调用

vm

中的

data

中的

a

元素，但是如何调用

data

呢？

var outside_data={a:1};
var vm=new Vue({
el:"#example1",
data:outside_data
});
//如果要调用vm下的data，就要使用下面的形式
vm.$data===data;
//这里顺道再一提el这个选择属性
vm.$el=document.getElementById('example1');

实例生命周期

有一些像是面向对象编程中的构造函数、析构函数一样的，在对象被创建、释放时执行的函数：

created

mounted

uodated

destroyed

如下面这个例子：

var vm=new Vue({
data:{a:1},
//在这个对象创建好之后执行，并且在其中可以使用this表示新建好的这个实例
created:function(){console.log('Vue实例创建完成，且a的值为'+this.a)}
});

生命周期

这里把官网的图扣过来了:



这里用我那渣渣级的英语能力翻译一下：

new Vue()

执行

beforeCreate

函数

观察

data

属性

注册事件

create

函数执行

有没有设置

el

属性，如果有的话，查看有没有设置

template

属性，如果没有的话，则在外部使用

vm.$mount(el)

被调用后执行

template

属性的检测

接着上面，如果有设置

template

属性，则将模板编译进页面，如果没有设置的话，则将

el

的输出作为模板？？？

执行

beforeMount

函数

创建

vm.$el

来取代原始的

el:""

的配置

执行

mounted

函数

检测该

vm

对象是否有发生改变

当

data

进行

update

后，执行

beforeUpdate

函数，之后进行更新

之后执行

uodated

函数

如果上面不是更新，而是释放该

vm

实例，如执行

vm.$destroy

，则

beforeDestroy

函数会被执行，释放

vm

实例后，会同时释放该实例下的相关资源