Vue2的生命周期

1.有哪些生命周期

八个常用生命周期和3个常见其他周期如下:

• beforeCreate
• created
• beforeMount
• mounted
• beforeUpdate
• updated
• beforeDestory
• destoryed
• activated
  keep-alive缓存的组件激活时候
• deactivated
  keep-alive缓存的组件停用时候
• errorCaptured
  捕获实例错误的(做稳定性收集的时候会用到这个)。

2.生命周期的过程

先看一下官网生命周期的图，如下:

下面是上图的整个流程:

• 首先初始化vue实例(new Vue())
• 初始化生命周期和事件(这个阶段会制定生命周期的规则和事件的规则)
• beforeCreate
• 处理响应式+做数据代理
• created
• 判断有没有el属性，如果没有,就等待$mount(el)方法调用后进行下面的编译；如有el属性就直接进行下一步编译
• 接着看有没有template配置选项，如果有就直接将它作为模板转为render函数直接执行(得到虚拟dom)；如果没有，就去到html中找到el元素上的外部html作为模板，然后转为render函数直接执行(得到虚拟dom)。
  注意:在vue对象中还有一个render函数，它是以createElement作为参数，然后做渲染操作，而且我们可以直接嵌入JSX。

      template: "<h1>{{message +'这是在template中的'}}</h1>",
      render: function(createElement) {
             return createElement('h1', 'this is createElement')
       }//render优先级比template更高
  

• beforeMount（此时虚拟dom已经生成,但没有生成真实dom）
• 将内存中的虚拟dom转为真实的dom挂载到页面
• mounted
• beforeUpdate
  数据是新的，页面是旧的(页面和数据没有保持同步)
• 根据新数据生成新的虚拟dom,随后将旧的虚拟dom进行比较，最后完成页面更新
• updated
  数据是新的,页面也是新的
• beforeDestory
  这个阶段data、methods都处于可用阶段，这是组件销毁前的一个阶段。在这个阶段一般用于关闭定时器、取消订阅消息(如通知)、解绑自定义事件等收尾工作
• destoryed
  销毁组件

下面举个例子:

<div id="root">
    <span>{{name}}</span>
    <button @click="updateName()">点击改变name</button>
</div>
<script type="text/javascript">
    const vm = new Vue({
        el: '#root',
        data: {
            name: "张三"
        },
        beforeCreate() {
            //此时数据代理还未开始
            console.log(this._data);//undefined
            console.log(this.name);//undefined
        },
        created() {
            console.log(this._data);//能拿到
            console.log(this.name);//"张三"
        },
        beforeMount() {
            console.log(this.$el)//此时打印出来的是没有经过模板解析的el
        },
        mounted() {
            console.log(this.$el)//此时打印出来的是经过模板解析的el
        },
        beforeUpdate() {
            console.log("beforeUpdate")
            //此时数据与页面未同步
        },
        updated() {
            console.log("updated")
            //此时数据与页面已经同步
        },
        methods: {
            updateName() {
                this.name = "李四"
            },
        }
    })
</script>

3.created->beforeMount过程中，render、template、和outhtml优先级？

render > template > outhtml

4.父子组件嵌套下各生命周期的执行顺序？

• 挂载阶段
  父beforeCreate -> 父created -> 父beforeMount -> 子beforeCreate -> 子created -> 子beforeMount -> 子mounted -> 父mounted
• 更新阶段
  父beforeUpdate -> 子beforeUpdate -> 子update -> 父update
• 销毁阶段
  父beforeDestory -> 子beforeDestory -> 子destoryed -> 父destoryed

总结:

• 挂载时，子组件是在父组件beforeMount后开始挂载,并且子组件先mounted，父组件随后
• 更新时，子组件是在父组件beforeUpdate后开始更新,子组件先于父组件更新
• 销毁时，子组件是在父组件beforeDestroy后开始销毁，并且是子组件先销毁，父组件随后。

5.vue的生命周期中，如果发一个异步请求需要放在哪个钩子中

可以在钩子函数created,beforeMount,mounted中进行，因为在这三个钩子函数中，data已经创建，可以将服务端返回的数据赋值给data，但是推荐在created钩子函数中调用异步请求，因为在created钩子函数中调用异步请求有以下优点：

• 能更快获取到服务端数据，减少页面 loading时间；
• 放在 created 中有助于一致性，因为SSR不支持 beforeMount、mounted 钩子函数(这是因为这两个钩子函数可能涉及到DOM的操作，而服务器端渲染环境中并没有真实的DOM存在，因此无法执行与DOM相关的操作）。

ps:还有一个关键点是放在mounted中可能会出现闪屏现象。因为dom元素可能依赖于后端返回的数据,又进行了一次更新。所以如果请求的数据对dom有影响，就放在created；没有影响可以放在mounted。