Vue 的生命周期总结

Vue生命周期包含四个阶段

 1、创建阶段(create)

 在这个阶段会创建data对象,为每个变量自动添加访问器属性,引入并打散methods。

2、挂载阶段阶段(mount)

 扫描真实的DOM树,生成虚拟DOM树,并首次更新页面元素内容。

3、更新阶段(update)

 这个阶段只有在更新data中的数据并影响到页面显示时,才触发。通过访问器属性修改属性值,触发通知函数,扫描虚拟DOM树,只更新受影响的元素。

4、销毁阶段(destroy)

在主动调用vm.$destroy() 函数后触发。 但是只是解除了new  Vue()对象与界面之间的数据联系,但new Vue()对象依然保留在内存中,且单击页面元素依然会修改new Vue()中的数据。

使用vm.$mount("#app") 还能将旧的new Vue()对象与页面重新建立联系,重新将数据更新到页面上。

生命周期钩子函数

    在每个阶段前后都提供了一对回调函数,允许我们在特定的时机执行我们自定义的操作。当生命周期发展到某个阶段时,vue会自动调用对应的回调函数执行。

beforeCreate(){..}   

没有data对象、访问器属性以及虚拟DOM树

created (){...}

有data对象、访问器属性、无虚拟DOM树

beforeMount() {...}

有data对象、访问器属性以及虚拟DOM树,但暂时未将data中数据加载到页面上显示。

mounted(){....}

有data对象、访问器属性以及虚拟DOM树,同时data中数据加载到页面上显示。

beforeUpdate(){}

updated(){}

beforeDestroy(){}

destroyed(){}

$nextTick()

专门在Vue所有声明周期执行完之后才触发的一个回调函数,只要希望写在任何位置的自定义DOM操作都不会被Vue覆盖,就可以用$nextTick()

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值