Vue.js2.0生命周期的研究与理解

小灰灰 2022-05-30 06:58 106阅读 0赞

### 总体感知 ###

首先贴一张Vue文档给出的生命周期图示，并添加了一些注释;

流程:   **创建实例 = > 监控数据 => 初始化内部事件 => 导入模板 => 渲染模板 => mounted = > 实例销毁 **

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

<table style="border-spacing:0px;background-color:rgb(255,255,255);margin:1.5em 0px;width:825px;color:rgb(51,51,51);font-family:'-apple-system', 'Helvetica Neue', Helvetica, Arial, 'PingFang SC', 'Hiragino Sans GB', 'WenQuanYi Micro Hei', 'Microsoft Yahei', sans-serif;font-size:14px;"> 
 <thead> 
  <tr> 
   <th style="padding-top:5px;padding-bottom:5px;border-color:rgb(230,230,230);background:rgb(243,243,243);">生命周期钩子</th> 
   <th style="padding-top:5px;padding-bottom:5px;border-color:rgb(230,230,230);background:rgb(243,243,243);">详细</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td style="padding-top:5px;padding-bottom:5px;border-color:rgb(230,230,230);">beforeCreate</td> 
   <td style="padding-top:5px;padding-bottom:5px;border-color:rgb(230,230,230);">在实例初始化之后，数据观测(data observer) 和 event/watcher 事件配置之前被调用。</td> 
  </tr> 
  <tr> 
   <td style="padding-top:5px;padding-bottom:5px;border-color:rgb(230,230,230);">created</td> 
   <td style="padding-top:5px;padding-bottom:5px;border-color:rgb(230,230,230);">实例已经创建完成之后被调用。在这一步，实例已完成以下的配置：数据观测(data observer)，属性和方法的运算， watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。</td> 
  </tr> 
  <tr> 
   <td style="padding-top:5px;padding-bottom:5px;border-color:rgb(230,230,230);">beforeMount</td> 
   <td style="padding-top:5px;padding-bottom:5px;border-color:rgb(230,230,230);">在挂载开始之前被调用：相关的 render 函数首次被调用。</td> 
  </tr> 
  <tr> 
   <td style="padding-top:5px;padding-bottom:5px;border-color:rgb(230,230,230);">mounted</td> 
   <td style="padding-top:5px;padding-bottom:5px;border-color:rgb(230,230,230);">el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$el 也在文档内。</td> 
  </tr> 
  <tr> 
   <td style="padding-top:5px;padding-bottom:5px;border-color:rgb(230,230,230);">beforeUpdate</td> 
   <td style="padding-top:5px;padding-bottom:5px;border-color:rgb(230,230,230);">数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。你可以在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程。</td> 
  </tr> 
  <tr> 
   <td style="padding-top:5px;padding-bottom:5px;border-color:rgb(230,230,230);">updated</td> 
   <td style="padding-top:5px;padding-bottom:5px;border-color:rgb(230,230,230);">由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。</td> 
  </tr> 
  <tr> 
   <td style="padding-top:5px;padding-bottom:5px;border-color:rgb(230,230,230);">activated</td> 
   <td style="padding-top:5px;padding-bottom:5px;border-color:rgb(230,230,230);">keep-alive 组件激活时调用。</td> 
  </tr> 
  <tr> 
   <td style="padding-top:5px;padding-bottom:5px;border-color:rgb(230,230,230);">deactivated</td> 
   <td style="padding-top:5px;padding-bottom:5px;border-color:rgb(230,230,230);">keep-alive 组件停用时调用。</td> 
  </tr> 
  <tr> 
   <td style="padding-top:5px;padding-bottom:5px;border-color:rgb(230,230,230);">beforeDestroy</td> 
   <td style="padding-top:5px;padding-bottom:5px;border-color:rgb(230,230,230);">实例销毁之前调用。在这一步，实例仍然完全可用。</td> 
  </tr> 
  <tr> 
   <td style="padding-top:5px;padding-bottom:5px;border-color:rgb(230,230,230);">destroyed</td> 
   <td style="padding-top:5px;padding-bottom:5px;border-color:rgb(230,230,230);">Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。</td> 
  </tr> 
 </tbody> 
</table>

（除了beforeCreate和created钩子之外，其他钩子均在服务器端渲染期间不被调用。）

### 实际操作 ###

我们来可视化的观察一下生命周期钩子函数执行时状态变化的情况

> 测试过程基于以下代码执行，引入vue.js后可直接执行

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="./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 创建前状态===============》'); var state = { 'el': this.$el, 'data': this.$data, 'message': this.message } console.log(state); }, created: function () { console.group('created 创建完毕状态===============》'); var state = { 'el': this.$el, 'data': this.$data, 'message': this.message } console.log(state); }, beforeMount: function () { console.group('beforeMount 挂载前状态===============》'); var state = { 'el': this.$el, 'data': this.$data, 'message': this.message } console.log(this.$el); console.log(state); }, mounted: function () { console.group('mounted 挂载结束状态===============》'); var state = { 'el': this.$el, 'data': this.$data, 'message': this.message } console.log(this.$el); console.log(state); // this.message = 'change'; }, beforeUpdate: function () { console.group('beforeUpdate 更新前状态===============》'); var state = { 'el': this.$el, 'data': this.$data, 'message': this.message } console.log(this.$el); console.log(state); // this.message = 'change2'; }, updated: function () { console.group('updated 更新完成状态===============》'); var state = { 'el': this.$el, 'data': this.$data, 'message': this.message } console.log(this.$el); console.log(state); }, beforeDestroy: function () { console.group('beforeDestroy 销毁前状态===============》'); var state = { 'el': this.$el, 'data': this.$data, 'message': this.message } console.log(this.$el); console.log(state); }, destroyed: function () { console.group('destroyed 销毁完成状态===============》'); var state = { 'el': this.$el, 'data': this.$data, 'message': this.message } console.log(this.$el); console.log(state); }, components: { 'my-components': child } }); </script>
    </html>

首先来梳理一下结构：  
1.我们创建了一个Vue根实例命名为app，将其挂载到页面id为app的dom元素上。  
2.局部注册的一个组件child并在根实例中将其注册使其可以在根实例的作用域中使用。  
3.将子组件用<keep-alive> 包裹，为接下来的测试作准备。  
在谷歌浏览器打开开发者工具，开始测试！

#### create 和 mounted 相关 ####

测试效果图如下：  
![2018030714071625][]  
根据测试结果，可以看出

> 1.beforeCreate执行时：data和el均未初始化，值为undefined

2.created执行时：Vue 实例观察的数据对象data已经配置好，已经可以得到app.message的值，但Vue 实例使用的根 DOM 元素el还未初始化  
3.beforeMount执行时：data和el均已经初始化，但从\{ \{message\}\}等现象可以看出此时el并没有渲染进数据，el的值为“虚拟”的元素节点  
4.mounted执行时：此时el已经渲染完成并挂载到实例上

#### activated 和 destroyed相关 ####

在前面的测试图中，我们发现了activated周期钩子已经被触发，这是因为子组件my-components被<keep-alive> 包裹，随el的挂载触发。  
  现在我们将此组件停用进行测试：由于子组件具有一个v-if指令v-if="show"，因此我们可以通过将show的值置为false将其销毁。  
  控制台输入 app.show = false;测试结果如下：  
![20180307140740101][]

> 由于在这里我们修改了data的值，所以会触发beforeUpdate和updated钩子，这里先不讨论这一组钩子，我们看到deactivated钩子已经触发，表示<keep-alive>已经停用，符合预期结果。

现在我们对Vue实例进行销毁，调用app.$destroy()方法即可将其销毁，控制台测试如下：  
![20180307140801405][]

> 我们发现实例依然存在，但是此时变化已经发生在了其他地方，根据官方文档描述：Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。

继续测试，现在修改 data中的数据查看结果，如下：  
![20180307140820358][]

> 这里我们将data中的message属性改成了'world'，发现dom并没有进行相应的响应，这证实了之前的说法。同样，如果你在子组件也加入destroyed钩子，发现该钩子也会被触发，这也证明了子实例也会被一起销毁。这里的销毁并不指代'抹去'，而是表示'解绑'。

#### updated相关 ####

beforeUpdate和updated是最后一对周期钩子了。  
为了能看出测试的具体效果，我们需要在原来的代码上添加两行代码：

> 在c钩子和updated钩子中分别加上

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

控制台输入app.message = 'abc';效果如下：  
![20180307140841598][]

> 我们发现beforeUpdate和updated触发时，el中的数据都已经渲染完成，但根据beforeUpdate == father而updated == abc可知，只有updated钩子被调用时候，组件dom才被更新。

[20180307140622784]: /images/20220530/e29b31f404d44ea99ce8c94582081e6a.png
[2018030714071625]: /images/20220530/46e3791011324f7b86c1faf34bc50953.png
[20180307140740101]: /images/20220530/afd068cb83274bb785ce21c8ae7c5915.png
[20180307140801405]: /images/20220530/81f4f84a3b8342d6b5e2a04e55d6892f.png
[20180307140820358]: /images/20220530/b6de309d649e4dd4aa6cf406aca8e255.png
[20180307140841598]: /images/20220530/ad983d9a4aad46119f28aeb77d4c1c81.png