Vue学习—生命周期

1. 每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。
   
2. 注意生命周期钩子的 this 上下文指向调用它的 Vue 实例。不能使用箭头函数来定义一个生命周期方法 (例如 created: () => this.fetchTodos())，因为箭头函数是和父级上下文绑定在一起的，this 不会是如你所预期的 Vue 实例，经常导致Uncaught TypeError:Cannot read property of undefined 或 Uncaught TypeError: this.myMethod is not a function 之类的错误。
   
3. 10个生命周期钩子如下：(1) beforeCreate：在实例初始化之后，数据观测和event/watcher时间配置之前被调用。
   (2) created：实例已经创建完成之后被调用。在这一步，实例已经完成以下的配置：数据观测，属性和方法的运算，watch/event事件回调。然而，挂载阶段还没开始，$el属性目前不可见。
   (3) beforeMount：在挂载开始之前被调用：相关的render函数首次被调用。该钩子在服务器端渲染期间不被调用。
   (4) mounted：el被新创建的vm.$el替换，并挂在到实例上去之后调用该钩子函数。该钩子在服务端渲染期间不被调用。如果root实例挂载了一个文档内元素，当mounted被调用时vm.$el也在文档内。
   注意 mounted 不会承诺所有的子组件也都一起被挂载。如果你希望等到整个视图都渲染完毕，可以用 vm.$nextTick 替换掉 mounted：
       mounted: function () {
          this.$nextTick(function () {
          // Code that will run only after the
          // entire view has been rendered
          })
      }
   (5) beforeUpdate：数据更新时调用，发生在虚拟 DOM 打补丁之前。这里适合在更新之前访问现有的 DOM，比如手动移除已添加的事件监听器。
   该钩子在服务器端渲染期间不被调用，因为只有初次渲染会在服务端进行。
   (6) updated：由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。
   当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下，你应该避免在此期间更改状态。如果要相应状态改变，通常最好使用计算属性或 watcher 取而代之。
   注意 updated 不会承诺所有的子组件也都一起被重绘。如果你希望等到整个视图都重绘完毕，可以用 vm.$nextTick 替换掉 updated：
      updated: function () {
          this.$nextTick(function () {
           // Code that will run only after the
           // entire view has been re-rendered
          })
     }
   (7) activated：keep-alive 组件激活时调用。该钩子在服务器端渲染期间不被调用。
   (8) deactivated：keep-alive 组件停用时调用。该钩子在服务器端渲染期间不被调用。
   (9) beforeDestroy：实例销毁之前调用。在这一步，实例仍然完全可用。该钩子在服务器端渲染期间不被调用。
   (10) destroyed：Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。
   < body>

   < h1>构造器生命周期</ h1>

   < hr>

   < div id= "app">

   < p>{{message}}</ p>

   < p>

   < button @ click= "add">+</ button>

   </ p>

   </ div>

   < script>

   var app = new Vue({

   el: "#app",

   data: {

   message: 1

   },

   methods: {

   add: function () {

   this.message ++;

   }

   },

   beforeCreate: function () {

   console. log( "1--beforeCreate 初始化之后");

   },

   created: function () {

   console. log( "2--created 创建完成");

   },

   beforeMount: function () {

   console. log( "3--beforeMount 挂载之前");

   },

   mounted: function () {

   console. log( "4--mounted 被创建");

   },

   beforeUpdate: function () {

   console. log( "5--beforeUpdate 数据更新前");

   },

   updated: function () {

   console. log( "6--updated 数据更新后");

   },

   activated: function () {

   console. log( "7--activated");

   },

   deactivated: function () {

   console. log( "8--deactivated");

   },

   beforeDestroy: function () {

   console. log( "9--beforeDestroy 被销毁之前");

   },

   destroyed: function () {

   console. log( "10--destroyed 被销毁之后");

   }

   });

   </ script>

   </ body>