Vue_实例、Vue实例的生命周期钩子

一.Vue实例：

var vm= new Vue({});

如何看生成的Vue实例呢？
在控制台直接输：vm 敲回车。就会显示出vm的实例对象
vm.$data 敲回车 ，就可以看到实例中data中的信息。
vm.$el 敲回车 就可以将实例负责接管的DOM元素输出来
vm.$destroy 敲回车 Vue实例就会被销毁，怎么看Vue实例被销毁了呢？给Vue实例的数据修改，例如：vm.$data.message = "byebye" 然后页面上不会有同步响应，因为Vue实例已经被销毁了，但是销毁之前绑定的属性和方法不会被销毁。
以vm.$为首的就是Vue实例的属性和方法

二.Vue实例的生命周期钩子
     在Vue官网我们可以看到Vue实例的生命周期图示，通过它可以很快学会Vue实例的生命周期函数

生命周期函数就是Vue实例在某个时间点会执行的函数
这些生命周期函数，并没有定义在methods中，而是直接定义在Vue实例中，值的注意。

常用的8个生命周期钩子：

① beforeCreate：在Vue实例创建之前执行的函数

② created：在Vue实例创建之后执行的函数

③ beforeMount： 在Vue实例创建之后，数据未渲染负责接管DOM之前执行的函数

④mounted ：Vue实例将数据渲染到接管DOM元素之后执行的函数

⑤ beforeDestory：Vue实例在为销毁之前执行的函数

⑥ destroyed：Vue实例在执行vm.destroyed()命令之后，销毁之后执行的函数

⑦ beforeUpdata: 在Vue实例数据更新之前执行的函数

⑧ updated:在Vue实例数据更新之后执行的函数。

还有三个不常见的函数：activated、deactivated、errorCaptured
eg:

export default {
beforeCreate:function(){
console.log('beforeCreated')
},
created:function(){
console.log('created')
},
beforeMount:function(){
console.log('beforeMount')
},
mounted:function(){
console.log('mounted')
},
beforeUpdata:function(){
console.log('beforeUpdata')
},
updated:function(){
console.log('updated')
},
beforeDestroy:function(){
console.log('beforeDestroy')
},
destroyed:function(){
console.log('destroyed')
}
}

执行顺序: