vue生命周期图解

vue生命周期共有8个函数

var app = new Vue({
      el: '#app',
      data: {
        message: 'hello',
        value: '123',
        list: [] //[1,2,3,4]
      },
      // template: `
      //     <div id="app" class="two">
      //       <h1>{{message}}</h1>
      //     </div>
      // `,
      computed: {

      },
      watch: {
        message(){
          this.$nextTick(()=>{
            console.log('nextTick......');
          });
        }
      },
      methods: {
        testAction(){
      
        },
        modifyAction(){
        
        },
        modifyValueAction(){
        
        }
      },
      beforeCreate(){
      
      },
      created(){
      
      },
      beforeMount(){
      
      },
      mounted(){
        // 这个方法之后，可以操作dom
        // 但是不要使用document
        // 使用$refs
      },
      beforeUpdate(){
      
      },
      updated(){
      
      },
      beforeDestroy(){
      
      },
      destroyed(){
      
      }
    });

• 创建和挂载阶段

  1. new Vue（）；
  2. 加载生命周期函数
  3. 调用beforeCreate（），这个阶段无法使用数据，方法，dom操作。
  4. 读取vue示例的配置项。加载数据方法，监听…
  5. 调用created（）；
  6. 判断是否有el配置项 ， 如果没有，则等待$mount()执行获得el；
  7. 判断是否有template配置项，没有则使用el.outerHTML当成template；
  8. 调用render函数 ， 渲染dom。
  9. 调用brforeMount（）。
  10. 使用渲染好的template替换el。
  11. 调用mounted（） ， 此时vue示例可以开始使用了。

• 更新阶段

  1. 当数据已经发生变化，数据监听回调被调起。
  2. 如果dom使用了该属性，调用beforeUpdate（）。
  3. 重新渲染dom。
  4. 调用updated（）。
  5. 调用$nextTick() , 监听具体有什么原因导致dom更新的。

• 销毁阶段

  1. 当实例调用$destroy() .
  2. beforeDestroy（） 移除监听 ，移除外部对实力内部的引用。
  3. vue实例内部产生的引用和监听也会移除。（vue内部自动完成）。
  4. 调用destroy（）