春风得意马蹄疾
一日看尽长安花

Vue实例的生命周期

Vue实例在创建时有一系列的初始化步骤,例如建立数据观察,编译模板,创建数据绑定等。在此过程中,我们可以通过一些定义好的生命周期钩子函数来运行业务逻辑。本文将详细介绍Vue实例的生命周期

图示

下图是Vue实例生命周期的图示

解释

接下来,根据提供的生命周期钩子函数,对Vue实例各个阶段的情况进行详细说明

  1. new Vue()
  2. 加载生命周期函数
  3. 调用【beforeCreate】 这个钩子函数,一般开发不会实现。因为这个函数不能操作Vue实例对象,或者操作dom
  4. 加载配置项,进行数据侦听
  5. 调用【created】这个钩子函数,此时已完成数据观测、事件方法,可以操作属性,但尚未开始dom编译,不能操作dom
  6. 判断是否有el配置项,有执行下一步,没有就等待$mount(el)调用,才会执行下一步,否则就不执行了
  7. 判断是否有template,有就直接编译template,没有就去除el的outerHTML当作template进行编译
  8. 调用【beforeMount】
  9. 使用编译好的template替换el的outerHTML
  10. 调用【mounted】此时编译已经结束,所有指令已生效,数据变化已能触发DOM更新,但不保证$el已插入文档(操作dom,不使用document,使用ref操作)
  11. 当数据发生变化后,dom用了这个数据那么执行【beforeUpdate】,beforeUpdate指的是dom的更新前
  12. 数据发生变化重新渲染dom后,执行【updated】
  13. 如果调用$destroy()
  14. 执行【beforeDestroy】,需要在这个钩子函数中,检查整个实例是否有对外部的引用,会形成闭包,导致之后可以有内存泄露的隐患,所以需要在这个该函数中移除引用
  15. 执行【destroyed]

简单实例

下面写一个简单的实例来更清楚地了解Vue实例内部的运行机制

<div id="example">{{message}}</div>
<script>
var vm = new Vue({
  el: '#example',
  data:{
    message:'match'
  },
  beforeCreate(){
    console.log('beforeCreate');
  },
  created(){
    console.log('created');
  },
  beforeMount(){
    console.log('beforeMount');
  },
  mounted(){
    console.log('mounted');
  },
  beforeUpdate(){
    console.log('beforeUpdate');
  },
  updated(){
    console.log('updated');
    //组件更新后调用$destroyed函数,进行销毁
    this.$destroy();    
  },
  beforeDestroy(){
    console.log('beforeDestroy');
  },
  destroyed(){
    console.log('destroyed');
  },
})
</script>
Like
Like Love Haha Wow Sad Angry
赞(1) 打赏
未经允许不得转载:栗子纪blog » Vue实例的生命周期
分享到: 更多 (0)
0 0 vote
Article Rating
Subscribe
提醒
guest
0 评论
Inline Feedbacks
View all comments

创作不易,打赏一下作者买瓶洗发露

支付宝扫一扫打赏

微信扫一扫打赏

0
Would love your thoughts, please comment.x
()
x