Vue生命周期

1、什么是vue生命周期？

答： Vue 实例从创建到销毁的过程，就是生命周期。也就是从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程，我们称这是 Vue 的生命周期。

2、vue生命周期的作用是什么？

答：它的生命周期中有多个事件钩子，让我们在控制整个Vue实例的过程时更容易形成好的逻辑。

3、vue生命周期总共有几个阶段？

答：它可以总共分为8个阶段：创建前/后, 载入前/后,更新前/后,销毁前/销毁后

4、第一次页面加载会触发哪几个钩子？

答：第一次页面加载时会触发 beforeCreate, created, beforeMount, mounted 这几个钩子

 var vm = new Vue({
     
      el: '#app',
      data: {
        name: 'vue-life',
        students: ['a','b','c']
      },
// vue实例被创建之前，此时实例的el和data都无法访问
      beforeCreate() {
        console.log('---beforeCreated---')
        console.log(this.$el)  //undefined
        console.log(this.name) //undefined
        //this.name = 'valley'
      },

// vue实例被创建之后，但此时$el尚未被挂载，因此$el无法获取，
但是可以访问data里面的数据了
      created() {
        console.log('---created---')
        console.log(this.$el)  // undefined
        console.log(this.name) //vue-life
        this.students[2] = 'cc'

        //console.log(document.querySelectorAll('#app li')[2].innerText)

        this.$nextTick(()=>{
          console.log('hello')
          document.querySelectorAll('#app li')[2].innerText = 'hello'
          console.log(this.name)
       }) 
      },
//此时已经找到$el=>#app，但是尚未渲染,没有被数据填充，$el.innerHTML为原始值
      beforeMount() {
        console.log('---beforeMount---')
        console.log(this.$el.innerHTML)
        console.log(this.name)
      },


      mounted() {
        console.log('---mounted---')
        console.log(this.$el.innerHTML)
        console.log(this.name)
        console.log('test....')
        console.log(document.querySelectorAll('#app li')[2].innerText)
      },
      beforeUpdate(a, b) {
        console.log('---beforeUpdated---')
        console.log(this.$el.innerHTML)//未更新之前的值
        console.log(this.name)
        console.log(a, b)
      },
      updated() {
        console.log('---updated---')
        console.log(this.$el.innerHTML) //更新之后的值
        console.log(this.name)
      },
      beforeDestroy() {
        console.log('---beforeDestory---')
        console.log(this.$el.innerHTML)
        console.log(this.name)
      },               
      destroyed() {
        console.log('---destoryed---')
        console.log(this.$el.innerHTML)
        console.log(this.name)
      }
    })

5、DOM 渲染在 哪个周期中就已经完成？

答：DOM 渲染在 mounted 中就已经完成了。

6、简单描述每个周期具体适合哪些场景？

答：生命周期钩子的一些使用方法： beforecreate : 可以在这加个loading事件，在加载实例时触发 created : 初始化完成时的事件写在这里，如在这结束loading事件，异步请求也适宜在这里调用 mounted : 挂载元素，获取到DOM节点 updated : 如果对数据统一处理，在这里写上相应函数 beforeDestroy : 可以做一个确认停止事件的确认框 nextTick : 更新数据后立即操作dom

微信公众号.png