Vue的生命周期

1.1、实例生命周期

每个 Vue 实例在被创建之前都要经过一系列的初始化过程。例如需要设置数据监听、编译模板、挂载实例到 DOM、在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，给予用户机会在一些特定的场景下添加他们自己的代码。
比如 created 钩子可以用来在一个实例被创建之后执行代码：

 new Vue({

 data: {

 a: 1

 },

 created: function () {

 // `this` 指向 vm 实例

 console.log('a is: ' + this.a)

 }

 })

 // => "a is: 1"

也有一些其它的钩子，在实例生命周期的不同场景下调用，如 mounted、updated、destroyed。钩子的 this 指向调用它的 Vue 实例。
不要在选项属性或回调上使用箭头函数，比如 created: () => console.log(this.a) 或 vm.＄watch('a', newValue => this.myMethod())。因为箭头函数是和父级上下文绑定在一起的，this 不会是如你所预期的 Vue 实例，经常导致 Uncaught TypeError: Cannot read property of undefined 或 Uncaught TypeError: this.myMethod is not a function 之类的错误。

1.2、生命周期图示

下图说明了实例的生命周期。你不需要立马弄明白所有的东西，不过随着你的不断学习和使用，它的参考价值会越来越高。

1. beforeCreate

在实例初始化之后，数据观测(data observer) 和 event/watcher 事件配置之前被调用。

2. created

实例已经创建完成之后被调用。在这一步，实例已完成以下的配置：数据观测(data observer)，属性和方法的运算， watch/event 事件回调。然而，挂载阶段还没开始，＄el 属性目前不可见。可以在组件的这个期间请求数据，如果是keep-alive组件会被缓存起来，生命周期不会再次触发，如果需要更新数据可以watch当前router变化，如果router是当前组件所在的router则请求数据。

 methods : {

 getData : function(id){

 ...

 this.content = 'test';

 }

 },

 created : function(){

 this.getData(this.id);

 }

 ...

 watch : {

 ＄route : function(){

 if(this.＄route.name == 'xxx'){

 this.getData(this.id);

 }

 }

 }

3. beforeMount

在挂载开始之前被调用：相关的 render 函数首次被调用。

4. mounted

vm.＄el已挂载在文档内，对已有dom节点的操作可以在这期间进行。

5. beforeUpdate

数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。

可以在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程。

6.updated

由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。

当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下，你应该避免在此期间更改状态，因为这可能会导致更新无限循环。

7.activated

keep-alive 组件激活时调用。

8.deactivated

keep-alive 组件停用时调用。

9.beforeDestroy

实例销毁之前调用。在这一步，实例仍然完全可用。

10.destroyed

Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。

2.生命周期示例一

示例1：

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title>Vue2的生命周期</title>

         <style type="text/css">

             // <div> 不会显示，直到编译结束。

                 [v-cloak] {

                   display: none;

                 }

         </style>

     </head>

     <body>

         <div id="app1">

             <input v-model="msg" v-cloak/>

             {{msg}}

         </div>

         <button onclick="destroy()">销毁</button>

         <script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js"></script>

         <script type="text/javascript">

              //格式化输出

             console.log("示例：%c%s","background:red;color:#fff","vue2生命周期","开始了");

             console.log("你哈：%c%s,%c%s","color:green;","我是绿色","background:#ddd","我是灰色")

             var app1 = new Vue({

                 el:"#app1",

                 data:{

                     msg:'vue'

                 },

                 beforeCreate:function(){

                     console.log("创建前："+this.msg);

                 },

                 created:function(){

                     console.log("创建后："+this.msg+"."+this.$el);

                 },

                 beforeMount:function(){

                     console.log("挂载前：");

                     console.log(this.$el);

                 },

                 mounted:function(){

                     console.log("挂载后：");

                     console.log(this.$el);

                 },

                 beforeUpdate:function(){

                     console.log("实例更新前："+this.$el.innerHTML);

                     console.log(this.msg);

                     console.log(this.$el);

                 },

                 updated:function(){

                     console.log("实例更新后："+this.$el.innerHTML);

                     console.log(this.msg);

                     console.log(this.$el);

                 },

                 beforeDestroy:function(){

                     console.log("销毁前");

                     console.log(this.msg);

                 },

                 destroyed:function(){

                     console.log("销毁后");

                     console.log(this.msg);

                 }

             })

             function destroy(){

                 app1.$destroy();

             }

         </script>

     </body>

 </html>

初始化结果1：

修改msg的值为vue2后的结果：

执行销毁：

2.1生命周期示例二

示例2：

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title>Vue2生命周期</title>

     </head>

     <body>

         <div id="app">{{ message }}</div>

         <script type="text/javascript" src="https://cdn.jsdelivr.net/vue/2.1.3/vue.js"></script>

         <script type="text/javascript">

             var app = new Vue({

                 el: '#app',

                 data: {

                     message: "Study Vue生命周期！"

                 },

                 beforeCreate: function() {

                     console.group('beforeCreate 创建前状态===============》');

                     console.log("%c%s", "color:red", "el     : " + this.$el); //undefined

                     console.log("%c%s", "color:red", "data   : " + this.$data); //undefined

                     console.log("%c%s", "color:red", "message: " + this.message)

                 },

                 created: function() {

                     console.group('created 创建完毕状态===============》');

                     console.log("%c%s", "color:red", "el     : " + this.$el); //undefined

                     console.log("%c%s", "color:red", "data   : " + this.$data); //已被初始化

                     console.log("%c%s", "color:red", "message: " + this.message); //已被初始化

                 },

                 beforeMount: function() {

                     console.group('beforeMount 挂载前状态===============》');

                     console.log("%c%s", "color:red", "el     : " + (this.$el)); //已被初始化

                     console.log(this.$el);

                     console.log("%c%s", "color:red", "data   : " + this.$data); //已被初始化

                     console.log("%c%s", "color:red", "message: " + this.message); //已被初始化

                 },

                 mounted: function() {

                     console.group('mounted 挂载结束状态===============》');

                     console.log("%c%s", "color:red", "el     : " + this.$el); //已被初始化

                     console.log(this.$el);

                     console.log("%c%s", "color:red", "data   : " + this.$data); //已被初始化

                     console.log("%c%s", "color:red", "message: " + this.message); //已被初始化

                 },

                 beforeUpdate: function() {

                     console.group('beforeUpdate 更新前状态===============》');

                     console.log("%c%s", "color:red", "el     : " + this.$el);

                     console.log(this.$el);

                     console.log("%c%s", "color:red", "data   : " + this.$data);

                     console.log("%c%s", "color:red", "message: " + this.message);

                 },

                 updated: function() {

                     console.group('updated 更新完成状态===============》');

                     console.log("%c%s", "color:red", "el     : " + this.$el);

                     console.log(this.$el);

                     console.log("%c%s", "color:red", "data   : " + this.$data);

                     console.log("%c%s", "color:red", "message: " + this.message);

                 },

                 beforeDestroy: function() {

                     console.group('beforeDestroy 销毁前状态===============》');

                     console.log("%c%s", "color:red", "el     : " + this.$el);

                     console.log(this.$el);

                     console.log("%c%s", "color:red", "data   : " + this.$data);

                     console.log("%c%s", "color:red", "message: " + this.message);

                 },

                 destroyed: function() {

                     console.group('destroyed 销毁完成状态===============》');

                     console.log("%c%s", "color:red", "el     : " + this.$el);

                     console.log(this.$el);

                     console.log("%c%s", "color:red", "data   : " + this.$data);

                     console.log("%c%s", "color:red", "message: " + this.message)

                 }

             })

         </script>

     </body>

 </html>

初始化结果

更新message的值：

手动销毁实例：

2.2、手动挂载与调用事件

2.2.1、手动挂载

vm.＄mount( [elementOrSelector] ) 如果 Vue 实例在实例化时没有收到 el 选项，则它处于“未挂载”状态，没有关联的 DOM 元素。可以使用 vm.＄mount() 手动地挂载一个未挂载的实例。

如果没有提供 elementOrSelector 参数，模板将被渲染为文档之外的的元素，并且你必须使用原生 DOM API 把它插入文档中。
这个方法返回实例自身，因而可以链式调用其它实例方法。

 var MyComponent = Vue.extend({

 template: '<div>Hello!</div>'

 })

 // 创建并挂载到 #app (会替换 #app)

 new MyComponent().＄mount('#app')

 // 同上

 new MyComponent({ el: '#app' })

 // 或者，在文档之外渲染并且随后挂载

 var component = new MyComponent().＄mount()

 document.getElementById('app').appendChild(component.＄el)

示例：

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title>Vue2手动挂载</title>

         <style type="text/css">

             #app1{

                 color: red;

             }

             #app2{

                 color: blue;

             }

         </style>

     </head>

     <body>

         <div id="app1">

             <!--<input v-model="msg" />{{msg}}-->

         </div>

         <div id="app2">

             <!--<input v-model="msg" />{{msg}}-->

         </div>

         <button onclick="loaddata1()">手动挂载1</button>

         <button onclick="loaddata2()">手动挂载2</button>

         <script type="text/javascript" src="https://cdn.jsdelivr.net/vue/2.1.3/vue.js"></script>

         <script type="text/javascript">

             var app1 = new Vue({

                 template:"<h2>{{msg}}</h2>",

                 data:{

                     msg:"Hello Vue2"

                 }

             });

             function loaddata1(){

                 app1.$mount();

                 document.getElementById("app1").appendChild(app1.$el);

             }

             function loaddata2(){

                 app1.$mount();

                 document.getElementById("app2").appendChild(app1.$el);

             }

         </script>

     </body>

 </html>

结果：

2.2.2、销毁实例

vm.＄destroy() 完全销毁一个实例。清理它与其它实例的连接，解绑它的全部指令及事件监听器。

2.2.3、强制更新

vm.＄forceUpdate() 迫使 Vue 实例重新渲染。注意它仅仅影响实例本身和插入插槽内容的子组件，而不是所有子组件。