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')
}
}

执行顺序:
这里写图片描述

猜你喜欢

转载自blog.csdn.net/hani_wen/article/details/80802214