Vue生命周期详解

👏每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。

以上是vue官网给出的生命周期过程图

1.创建阶段：

• 1.new Vue(); 新建vue实例
• 2.读取配置项，加载生命周期方法
• 3.调用beforeCreate();
• 4.设置data，methods，computed，components，watch。。。。
• 5.调用created()

2.挂载阶段：

• 6.判断是否有template配置项
  有：传入render函数，编译template
  没有：把el对应的outerHTML当成template传入render函数编译
• 7.调用beforeMount()
• 8.使用编译后结果替换el的作用的dom
• 9.调用mounted()

3.更新阶段：

• 只有数据变化，并且dom使用了该数据，dom才会更新，此时才执行更新的生命周期方法：
  更新前和更新后不是数据更新的状态，而是dom更新前和dom更新后
• 10.当数据发生变化
• 11.调用beforeUpdate()
• 12.重新渲染dom
• 13.调用updated()

4.销毁阶段：

• 14.执行vm.$destroy()销毁实例
• 15.调用beforeDestroy()
• 16.实例移出methods,data,…
• 17.调用destroy()

补充：

el、template、render区别
首先看看这个
html代码：

<div class="vapp-1">{{ info }}</div>
<div class="vapp-2">{{ info }}</div>
<div class="vapp-3">{{ info }}</div>

js代码

new Vue({
  el: '.vapp-1',
  data: {
    info: '这是通过el属性获取挂载元素的outerHTML方式渲染。'
  },
  template: '<div>这是template属性模板渲染。</div>',
  render: function(h){
    return h('div', {}, '这是render属性方式渲染。')
  }
})

new Vue({
  el: '.vapp-2',
  data: {
    info: '这是通过el属性获取挂载元素的outerHTML方式渲染。'
  },
  template: '<div>这是template属性模板渲染。</div>'
})

new Vue({
  el: '.vapp-3',
  data: {
    info: '这是通过el属性获取挂载元素的outerHTML方式渲染。'
  }
})

最后编译为：

这是render属性方式渲染。
这是template属性模板渲染。
这是通过el属性获取挂载元素的outerHTML方式渲染。

由上可知优先级 el<template<render

你也许可以只有el，那么就会用el的outerHTML编译与渲染
或者 有el和template两者，就会用template里的内容替换el的outHTML

或者 有el、template、render三者，就会使用render函数的内容，因为它的优先级高。
render函数就是让你发挥 JavaScript 最大的编程能力。