生命周期vue

let vm = new Vue({

      el: "#app",

      // 1)初始化methods中的方法和初始化生命周期的钩子函数

      beforeCreate() {

        // 不能获取data中的数据    

        console.log("beforeCreate.....");

      },

      // 2）注入一些数据，初始化响应式系统，响应式系统是发生创建组件实例阶段

      created() {

        console.log("created.....");

        // 1）发ajax请求  2）获取路由参数...  

      },

      // 找模板  先看有没有el选项，如果有，再看有没有template选项，如果有，template就是模板，如果没有，el的Outhtml就是模块。会把模板变成render函数，内部会调用render函数，生成虚拟DOM。虚拟DOM转化成真实DOM，进行挂载。

      beforeMount() {

一般不用

        console.log("beforeMount.....");

      },

      // 1）发ajax请求  2）开定时器  3）DOM操作  4）建立ws连接   5）实例化echarts实例  ....

      mounted() {

        console.log("mounted.....");

      },

      // 数据变化，一定会触发beforeUpdate

      // 监听器：数据变化，也可以监听到

      // 监听器能实例的逻辑，按理说在beforeUpdate和updated也可以实现，只不过代码逻辑就复杂

      // 在React中，是没有监听器的，在React中监听器就是靠ComponentUpdated

      beforeUpdate() {

        console.log("beforeUpdate.....");

      },

      // 要生成新的虚拟DOM，新的虚拟DOM和老的虚拟DOM就会进行DIFF算法对比差异

      // 通过patch，会找到两个虚拟DOM树的最小差异，找到后，进行异步更新  

      // nextTick有什么用？....

      // 当v-for时，为什么要加key？ 有了唯一的key，就可以尽快的找到的新旧虚拟DOM树的差异，快速更新DOM。

      updated() {

        // 基本上不用，假如没有监听器，数据变化我们要做一些事件，只能像React一样，逻辑只能写在Updated中

        // 在updated中不能更新数据了，会导致死循环

        console.log("updated.....");

      },

      // 什么操作会导致组件销毁？

      // 1）手动调用  $destory()

      // 2）路由切换

      //    keep-alive 动态组件  ....

      beforeDestroy() {

        // 清空定时器   解除事件绑定   清缓存...

        console.log("beforeDestroy.....");

      },

      // 移除当前组件的watcher  

      // 移除所有的子组件

      // 移除所有监听器

      // 数据变了，响应式系统就失效了，DOM就无法更新了。

      destroyed() {

        console.log("destroyed.....");

      },

    });

  </script>