Vue 2.0 浅谈--生命周期和钩子函数

cvhb6863 3年前
   <h2>前言</h2>    <pre>  <code class="language-javascript">用Vue也有一段时间了,发现生命周期是很重要的一部分,稍微懂得了一些东西,特地来分享一下.</code></pre>    <h2>生命周期和钩子函数-介绍</h2>    <p>啥也不说先上图</p>    <p>图-1为 Vue 1.0 生命周期图,图-2为 Vue 2.0 生命周期图,图-3为Vue 1.0 和 Vue 2.0 钩子函数比较</p>    <p>重点看 Vue 2.0</p>    <p><img src="https://simg.open-open.com/show/14708119166a1b5a018b56f7ff13a357.png"></p>    <p><img src="https://simg.open-open.com/show/c690c78b2d70eb617b97a0424dfddda8.png"></p>    <p><img src="https://simg.open-open.com/show/8d826e1921b19a9328ae8529883624fd.png"></p>    <h2>生命周期和钩子函数-具体</h2>    <p>上代码</p>    <p>自己粘走执行</p>    <pre>  <code class="language-javascript"><!DOCTYPE html>  <html>  <head>      <title></title>      <script type="text/javascript" src="https://cdn.jsdelivr.net/vue/2.1.3/vue.js"></script>  </head>  <body>    <div id="app">       <p>{{ message }}</p>  </div>    <script type="text/javascript">          var app = new Vue({        el: '#app',        data: {            message : "xuxiao is boy"         },         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></code></pre>    <p>打开F12可以查看生命周期各个时期的钩子函数的状态,如下图</p>    <p><img src="https://simg.open-open.com/show/55382149148c09388653494071be6d3a.png"></p>    <p>由上图知:</p>    <p>1.beforeCrete: 此时,$el和data都为undefined,没有初始化</p>    <p>2.created: 创建后data初始化了,而$el没有</p>    <p>3.brforeMount: 挂在之前,$el和data都初始化了</p>    <p>4.mounted: Vue实例挂载完成了</p>    <p>注意: beforeMount红色矩形框里是{{message}},mounted的红矩形框里是xuxiao is boy,说明挂载前$el的值为'虚拟'的元素节点,挂载后'虚拟'的Dom节点被真实的Dom节点替换</p>    <h2>数据更新(update)</h2>    <p>在控制台里输入app.message = '数据更新'后</p>    <p>如下图</p>    <p><img src="https://simg.open-open.com/show/51b44321b31d35b1302803980e27fa96.png"></p>    <p>由此可见,当data数据变化时只会触发update</p>    <h2>Vue实例解耦(destroy)</h2>    <p>在控制台里输入app.$destroy();</p>    <p>如下图</p>    <p><img src="https://simg.open-open.com/show/05ff3300bedd517adff04850b638a428.png"></p>    <p>由图知:</p>    <p>执行完destroy操作后,data里的数据没有变化,但是Dom结构还存在,也就是Vue实例不再受控制了,完成了解耦</p>    <h2>生命周期和钩子函数-总结</h2>    <p>如下图</p>    <p>这是把官方 Vue 2.0 生命周期的图例简化后的</p>    <p><img src="https://simg.open-open.com/show/b91b53de6efa3c0bc6d9297dc7f66bb3.png"></p>    <h3>生命周期钩子函数使用</h3>    <p>beforecreate : 举个栗子:可以在这加个loading事件</p>    <p>created :在这结束loading,还做一些初始化,实现函数自执行</p>    <p>mounted : 在这发起后端请求,拿回数据,配合路由钩子做一些事情</p>    <p>beforeDestory: 你确认删除XX吗? destoryed :当前组件已被删除,清空相关内容</p>    <p> </p>    <p>来自:https://segmentfault.com/a/1190000009677699</p>    <p> </p>