我对Vue的生命周期的理解

我对Vue的生命周期的理解

1、new Vue() 实例Vue对象。

2、在实例对象之后，还没创建对象之前，拥有beforeCreate(）工作函数。
这里可做对象动画，比如页面的“loading……”

3、created()之后，实例对象创建好，属性成功绑定，但是DOM还未生成。
这是页面还未显示出来。可获取对应的数据，请求网络接口，数据可以赋给属性。接下来可展示给DOM。这里可以写结束上方所说的“loading……”,准备渲染当前的DOM。

4、接下来检查是否有el，有的话再检查是否有template标签，如果没有则检查是否有.$mount(’#div1’),如果没有的话，该生命周期结束。
检查template之后，如果有则执行template内的内容，如果没有则执行html里的内容。

<div id="div1">	   
  {{gareen.name}}
 </div>
//准备数据
var gareen = {"name":"盖伦","hp":616};
 
//通过vue.js 把数据和对应的视图关联起来
new Vue({
      el: '#div1',
	  template:'<p>{{gareen.name}}</p>'，//此处有，所以执行这里面的
      data: {
        message: gareen
      }
    })

//若没有el，则
new Vue({
	  template:'<p>{{gareen.name}}</p>'，//此处有，所以执行这里面的
      data: {
        message: gareen
      }
    }).$mount('#div1')

5、之后会进入beforeMount()工作函数，开始编译模块了，是在虚拟DOM中执行的。此时将element中的元素往template中放。

6、mounted()是编译完，开始挂载，可做结束页面显示，之后DOM生成。

7、beforeUpdate()更新之前，页面未更新，但虚拟DOM已经配置。

8、updated()更新之后，页面显示

之后进入生命周期尾部。

9、beforeDestroy() 摧毁之前。

10、destroyed() 摧毁之后。

下边是vue的生命周期图

学习视频：https://www.bilibili.com/video/BV1y741137Xr

第一次在博客上写学习笔记，有啥不对的，麻烦留言提醒我哦，谢谢大家