文章目录
一. Vue实例
Vue框架的使用都是从创建Vue实例对象开始的。一个页面可以看作是由各个组件构成的，每个组件都会对应一个Vue实例。Vue实例也可看做是一个局部的MVVM模式，也是由视图（V），模型（M），视图模型（VM）三部分组成。以最常见的Vue实例结构为例：
1.1 实例的创建以及el属性
我们说Vue其实就是一个构造函数（直接输出Vue结果如下图）：
类似于构造函数声明实例对象一样，Vue的实例创建也借用new关键字：
new Vue({
// 属性
})
或者我们也可以用一个变量来承接。官方文档里常用vm，vm为ViewModel的缩写，也从侧面印证了一个Vue实例对象在该组件中扮演的是视图模型（VM）的角色。当然这个变量名无所谓，哈哈。
let vm = new Vue({
// 属性
})
每个Vue实例被创建出来后都首先要明确它要用到哪个HTML模板上，即完成局部MVVM模式的视图绑定。具体用到的属性值是 —— el，它可以接受一个CSS选择器作为参数（ID，类名最为常见）。
<div id="app"></div>
let vm = new Vue({
el:"#app"
})
1.2 data和methods属性
我们通常把该组件的属性（property）和方法（method）定义在对应的Vue实例对象中，即data和methods属性。
我们可以为data声明中的属性设初值，或者让data指向一个全局对象：
let vm = new Vue({
el:"#app",
data:{
name:"zevin"
}
})
var obj = {
name:"zevin"
}
let vm = new Vue({
el:"#app",
data:obj
})
methods中定义着各种事件方法，可以很方便的通过v-on指令绑定到模板内的目标节点上。比如我们为模板添加一个点击（click）事件showTip：
(具体的事件绑定后续接着说，这里就先看个热闹)
<div id="app" v-on:click="showTip">{
{
msg}}</div>
let vm = new Vue({
el:"#app",
data:{
msg:"zevin"
},
methods:{
showTip:function(){
alert(this.msg)
}
}
})
具体效果看下图，弹出了一个包含当前msg变量值的模态框：
二. 生命周期
2.1 八大阶段
类似于人的一生，每个 Vue 实例也会有自己的生命周期，从被创建到销毁具体分为以下八大阶段：
① beforeCreate（只执行一次）
初始化之前，还不可以使用实例对象中的属性和方法。
② created（只执行一次）
初始化完成，实例创建完毕，可以使用实例对象中的属性和方法。
③ beforeMount（只执行一次）
挂载前，判断当前的实例应用于哪个模板，此时的数据还没有被绑定该模板上。
④ mounted（只执行一次）
挂载完成，即数据绑已定到模板中。
⑤ beforeUpdate（可执行多次）
虚拟DOM更新前，与下一个阶段updated为一组，每次视图更新都会调用。
⑥ updated（可执行多次）
虚拟DOM更新后。
⑦ beforeDestroy（只执行一次）
销毁前，这个时候还是可以使用实例
⑧ Destroy（只执行一次）
销毁后，实例不可用。
2.2 生命周期钩子函数
每个阶段都有自己的独特的地方，用户在不同阶段也可以选择添加生命周期钩子函数完成某些需求。 现在我们来通过设置每个周期的钩子函数检验各个阶段的执行情况：
<div id="app"></div>
let vm = new Vue({
el:'#app',
beforeCreate(){
console.log('beforeCreate')
},
created(){
console.log('created')
},
beforeMount(){
console.log('beforeMount')
},
mounted(){
console.log('mounted')
},
beforeUpdate(){
console.log('beforeUpdate')
},
updated(){
console.log('updated')
}
})
执行结果如下：
可以看到只输出了前四个阶段，这是因为在整个页面的生命周期中他们只会执行一次。beforeUpdate和updated没有打印只是我们还没有更新视图，那么我们现在来修改一下代码：
<div id="app">
{
{
msg}}
<input type="text" v-model='msg'>
</div>
let vm = new Vue({
el:'#app',
data:{
msg:''
},
beforeCreate(){
console.log('beforeCreate')
},
created(){
console.log('created')
},
beforeMount(){
console.log('beforeMount')
},
mounted(){
console.log('mounted')
},
beforeUpdate(){
console.log('beforeUpdate')
},
updated(){
console.log('updated')
}
})
我们在视图中添加了一个输入框，来改变视图，下图中很明显，在我们每次改变视图的时候都打印了一遍beforeUpdate和updated。
2.3 拓展：箭头函数的误区
我们在使用Vue框架编写代码时要把ES6箭头函数（Arrow Function）应用到正确的位置。因为箭头函数中this的特殊性（没有 this，this 会作为变量一直向上级词法作用域查找，直至找到为止），运用不当经常会导致代码运行异常甚至报错。比如以下两个场景：
-
设置实例内某个选项property（与el，data等同级）等于一个匿名函数：
就像这里的生命周期钩子函数，千万不要写成created: () => console.log("created")的形式，否则会报Uncaught TypeError: Cannot read property of undefined的错误。 -
在实例外调用Vue原型实例方法，比如Vue.prototype.$watch()添加监听：
<div id="app">
{
{
msg}}
<input type="text" v-model='msg'>
</div>
let vm = new Vue({
el:"#app",
data:{
msg:""
}
})
vm.$watch('msg',(newValue, oldValue)=>{
console.log(this.msg);
})
可以看到我们改变msg的值，页面中渲染的是正确的，而监听这里却输出的是undefined，就是由于我们采用了箭头函数的写法。此时箭头函数内的this指向了全局，并没有指向当前Vue实例对象vm。
改成普通匿名函数的形式就正常了，这里就不演示了。或者把监听移到实例对象内，两种写法就都不会出错。(this指向当前Vue实例对象vm就不会报错)
let vm = new Vue({
el:"#app",
data:{
msg:""
},
watch:{
msg:(newValue, oldValue)=>{
console.log(newValue, oldValue);
}
}
})
2.4 官网图示
官网文档中还有一个长图来详细介绍Vue实例的生命周期，这里大家看看就好…
