探究Vue2.0生命周期

- 日理万妓 2022-05-29 12:09 181阅读 0赞

#### Vue生命周期 ####

--------------------

下面是Vue官方的一张关于Vue生命周期的图例，并增添了一些标注  
![@Vue生命周期|center|800\*1850][Vue_center_800_1850]

#### 关于钩子函数 ####

--------------------

>   每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做**生命周期钩子**的函数，这给了用户在不同阶段添加自己的代码的机会。

Vue2.0的生命周期钩子一共有10个，同样结合官方文档作出了下表

<table> 
 <thead> 
  <tr> 
   <th align="left">生命钩子函数</th> 
   <th align="left">详细</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">beforeCreate</td> 
   <td align="left">在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。</td> 
  </tr> 
  <tr> 
   <td align="left">created</td> 
   <td align="left">在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，<code>$el</code> 属性目前不可见。</td> 
  </tr> 
  <tr> 
   <td align="left">beforeMount</td> 
   <td align="left">在挂载开始之前被调用：相关的 <code>render</code> 函数首次被调用。<strong>该钩子在服务器端渲染期间不被调用。</strong></td> 
  </tr> 
  <tr> 
   <td align="left">mounted</td> 
   <td align="left"><code>el</code> 被新创建的 <code>vm.$el</code> 替换，并挂载到实例上去之后调用该钩子。如果 root 实例挂载了一个文档内元素，当 <code>mounted</code> 被调用时 <code>vm.$el</code> 也在文档内。<strong>该钩子在服务器端渲染期间不被调用。</strong></td> 
  </tr> 
  <tr> 
   <td align="left">beforeUpdate</td> 
   <td align="left">数据更新时调用，发生在虚拟 DOM 打补丁之前。这里适合在更新之前访问现有的 DOM，比如手动移除已添加的事件监听器。<strong>该钩子在服务器端渲染期间不被调用，因为只有初次渲染会在服务端进行。</strong></td> 
  </tr> 
  <tr> 
   <td align="left">updated</td> 
   <td align="left">由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。</td> 
  </tr> 
  <tr> 
   <td align="left">activated</td> 
   <td align="left">keep-alive 组件激活时调用。<strong>该钩子在服务器端渲染期间不被调用。</strong></td> 
  </tr> 
  <tr> 
   <td align="left">deactivated</td> 
   <td align="left">keep-alive 组件停用时调用。<strong>该钩子在服务器端渲染期间不被调用。</strong></td> 
  </tr> 
  <tr> 
   <td align="left">beforeDestroy</td> 
   <td align="left">实例销毁之前调用。在这一步，实例仍然完全可用。<strong>该钩子在服务器端渲染期间不被调用。</strong></td> 
  </tr> 
  <tr> 
   <td align="left">destroyed</td> 
   <td align="left">Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。<strong>该钩子在服务器端渲染期间不被调用。</strong></td> 
  </tr> 
 </tbody> 
</table>

这里我们可以将上面官方文档的那张图进行一次简化，得到下面的图：  
  
![Alt text|center][Alt text_center]

#### 探究生命钩子函数 ####

--------------------

>下面的代码可以直接复制出去执行
    <!DOCTYPE html>
    <head>
        <title>Vue生命周期测试</title>
        <script src="https://cdn.jsdelivr.net/vue/2.1.3/vue.js"></script>
    </head>
    <body>
    <div id="app">
        <p>{
       {message}}</p>
        <keep-alive>
            <my-components msg="hello" v-if="show"></my-components>
        </keep-alive>
    </div>
    </body>
    <script> var child = { template: '<div>from child: { {msg}}</div>', props: ['msg'], data: function () { return { childMsg: 'child' }; }, deactivated: function () { console.log('component deactivated!'); }, activated: function () { console.log('component activated'); } }; var app = new Vue({ el: '#app', data: function () { return { message: 'father', show: true }; }, beforeCreate: function () { console.group('beforeCreate 创建前状态===============》'); console.log("%c%s", "color: red", "el :" + this.$el) console.log("%c%s", "color: red", "data :" + this.$data) console.log("%c%s", "color: red", "message :" + this.message) }, created: function () { console.group('created 创建完毕状态===============》'); console.log("%c%s", "color: red", "el :" + this.$el) 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 :") 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 :") 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 :") console.log(this.$el) console.log("%c%s", "color: red", "data :" + this.$data) console.log("%c%s", "color: red", "message :" + this.message) console.log('beforeUpdate == ' + document.getElementsByTagName('p')[0].innerHTML); }, updated: function () { console.group('updated 更新完成状态===============》'); console.log("%c%s", "color: red", "el :") console.log(this.$el) console.log("%c%s", "color: red", "data :" + this.$data) console.log("%c%s", "color: red", "message :" + this.message) console.log('beforeUpdate == ' + document.getElementsByTagName('p')[0].innerHTML); }, beforeDestroy: function () { console.group('beforeDestroy 销毁前状态===============》'); console.log("%c%s", "color: red", "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 :") console.log(this.$el) console.log("%c%s", "color: red", "data :" + this.$data) console.log("%c%s", "color: red", "message :" + this.message) }, components: { 'my-components': child } }); </script>
    </html>

#### 测试效果 ####

--------------------

测试效果图如下：  
![@测试效果图][70]

> `beforeCreate`：el 和 data 并未初始化  
> `created`:完成了 data 数据的初始化，el没有  
> `beforeMount`：完成了 el 和 data 初始化  
> `mounted` ：完成挂载

这里需要注意beforeMounted执行时：data 和 el 均已经初始化，但是在标红处，我们发现 el 中还是 \{ \{message\}\} ，这里应用的是`Virtual DOM`（虚拟DOM）技术，先把坑占住了。到后面 `mounted` 挂载的时候再把值渲染进去。

#### beforeUpdate 和 updated ####

--------------------

为了能看出测试的具体效果，我们在`beforeUpdate` 和 `updated`两队钩子函数中加入两行其他钩子函数没有的代码：

console.log('beforeUpdate == ' + document.getElementsByTagName('p')[0].innerHTML);

![这里写图片描述][70 1]

我们发现 `beforeUpdate` 和 `updated` 出发时，el中的数据都已经发生了改变，但根据 `beforeUpdate == father` 和 `beforeUpdate == hello world!`可知，只有updated钩子函数被调用时，组件dom才会更新。  
  换句话说可能会更容易明白，在 `beforeUpdate` 的时候数据发生改变并没有应用到 dom 上，所以在获取 innerHTML 的时候无法得到最新的值。只有 `updated` 调用后才保证了此时真实 dom 节点应用了最新数据。

#### activated 和 deactivated ####

--------------------

在前面的测试图中，我们发现了`activated`周期钩子已经被触发，这是因为子组件 my-components 被`<keep-alive>` 包裹，随 el 的挂载触发。  
  现在我们将此组件停用进行测试：由于子组件设置了v-if=”show”，因此我们可以通过执行 `app.show = false` 将其销毁。  
测试结果如下：  
![这里写图片描述][70 2]

因为我们修改了 data 的值，所以会触发上面讲到过的 `beforeUpdate` 和 `updated` 函数,在 `updated`函数之后，我们看到 `deactivated`钩子已经触发，`<keep-alive>`已经停用，符合预期结果。

#### destroyed 和 beforeDestroy ####

--------------------

现在我们调用 `app.$destroy()` 将Vue实例进行销毁。测试效果如下:  
![这里写图片描述][70 3]

我们发现实例依然存在，但是此时变化已经发生在了其他地方。

> 根据官方文档描述：在 `beforeDestroy` 这一步，实例仍然完全可用。  
> 再调用 `destroyed` 时，**Vue实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。**

接下来我们继续修改message的值，看看会发生什么效果。  
![这里写图片描述][70 4]  
  这里我们将 app.message 改成了 ‘change something~~~’ ，发现dom并没有进行相应的响应，这证实了之前的说法。  
  同样，如果你在子组件也加入destroyed钩子，发现该钩子也会被触发，这也证明了子实例也会被一起销毁。**这里的销毁并不指代’抹去’，而是表示’解绑’**。

#### 生命周期钩子函数的简单应用 ####

--------------------

> `beforeCreate` : 打个比方，这里可以加个loading事件  
> `created` ：在这结束loading，还可以对data数据进行操作，这个时候可以进行ajax请求将返回的数据赋给data  
> `mounted` ： 在这发起后端请求，拿回数据，对挂载的dom进行操作  
> `beforeDestroy`： 你确认删除XX吗？  
> `destroyed` ：当前组件已被删除，清空相关内容

#### 参考文章 ####

--------------------

[Vue2.0 探索之路——生命周期和钩子函数的一些理解][Vue2.0]  
[关于Vue.js2.0生命周期的研究与理解][Vue.js2.0]

[Vue_center_800_1850]: /images/20220529/ed506aa314e14bea9891cea831db18f9.png
[Alt text_center]: /images/20220529/9fcc2f6743bb4f4981c69a4152ba32bb.png
[70]: /images/20220529/dc2682dd724a4ecd9c8084691821ba42.png
[70 1]: /images/20220529/8a0f3c2a71364b9bbf2c63a66fc2739e.png
[70 2]: /images/20220529/f1a5920584714e41bb6d96633349f354.png
[70 3]: /images/20220529/d551d99d1f6b4fe5b640328c4c5b4425.png
[70 4]: /images/20220529/e3b248ab20bb4d0594f6e98b1bfe8ca7.png
[Vue2.0]: https://segmentfault.com/a/1190000008010666
[Vue.js2.0]: https://segmentfault.com/a/1190000010336178