【Vue】生命周期

最新推荐文章于 2023-06-20 09:21:56 发布

Chx.zhang

最新推荐文章于 2023-06-20 09:21:56 发布

阅读量358

点赞数 1

分类专栏： VUE

本文链接：https://blog.csdn.net/qq_38987146/article/details/113187335

版权

VUE 专栏收录该内容

12 篇文章 5 订阅

订阅专栏

文章目录

标注图：
VUE生命周期
说明：

使用的HTML源码见底部
生命周期图示见官方文档
在segmentfault，有大神根据源码解释生命周期，有兴趣可以学习《生命周期详解》

1. `beforeCreate → created`

在这个生命周期之间，进行初始化事件，进行数据的观测，可以看到在created的时候数据已经和data属性进行绑定（放在data中的属性当值发生改变的同时，视图也会改变）。
注意看下：此时还是没有el选项.

2. `created → beforeMount`

2.1 判断`el`选项

判断实例是否有el选项：

若有el选项，则继续向下编译；
若无el选项，则停止编译，也就意味着停止了生命周期。仅当该实例调用vm.$mount(el)后，生命周期继续。

注释掉代码中: el: '#app',然后运行可以看到运行到created停止：

此时，在vue实例后，手动调用el = '#app';vm.$mount(el);，才继续向下执行
在这里插入图片描述

2.2 判断`template`

template参数选项的有无对生命周期的影响。
（1）如果vue实例对象中有template参数选项，则将该template模板compile编译成render函数。
（2）如果没有template选项，则将outerHTML作为模板编译。template优先级要高于outerHTML。
修改代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>VUE生命周期</title>
    <script src="https://cdn.bootcss.com/vue/2.5.2/vue.js"></script>
</head>
<body>
    <div id="app">
        <h3>{{message + '-> 实例无template，则编译outerHTML为template再进行render'}}</h3>
    </div>
</body>
<script>
    new Vue({
      el: '#app',
      template: "<h3>{{message +'-> 实例包含template，则编译template进行render'}}</h3>", 
      data: {
        message: 'Vue的生命周期'
      }
    })
</script>
</html>

执行后的结果可以看到在页面中显示的是：
在这里插入图片描述
那么将vue对象中template的选项注释掉后打印如下信息：

【注意】

el判断要发生在判断template前面，是因为Vue实例需要el入口去查找实例内部是否有template，并以此为准，来决定compile实例本身template或outerHTML，编译成render函数。
若实例中有render函数，无论是否有template，优先渲染render函数（createElement作为参数，然后做渲染操作），即：render > template > outerHTML。而且可以直接嵌入JSX。

<body>
    <div id="app">
        <h3>{{message + '-> 实例无template，则编译outerHTML为template再进行render'}}</h3>
    </div>
</body>
<script>
  new Vue({
    el: '#app',
    template: "<h3>{{message +'-> 实例包含template，则编译template进行render'}}</h3>", //在vue配置项中修改的
    render: function (createElement) {
      return createElement('h1', 'this is Render-createElement')
    },
    data: {
      message: 'Vue的生命周期'
    }
  })
</script>

页面渲染：
在这里插入图片描述

3. `beforeMount` → `mounted`

创建vm.$el，此处$el为虚拟DOM，未真实替换DOM，beforeMount钩子函数内{{message}}是message；替换发生在mount过程，在mounted后才真实替换DOM，此时{{message}}是Vue的生命周期，并且页面正常显示。
在这里插入图片描述

4. `beforeUpdate → updated`

VUE的灵魂是数据驱动，当data中的数据发生改变时，会触发对应组件的重新渲染更新View，先后调用beforeUpdate和updated钩子函数。修改钩子函数打印项：：

beforeUpdate: function () {
  console.group('beforeUpdate 更新前状态===============》');
  console.log("%c%s", "color:red","el     : " + this.$el);
  console.log(this.$el);   
  console.log(this.$el.innerHTML)
  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(this.$el.innerHTML)
  console.log("%c%s", "color:red","data   : " + this.$data); 
  console.log("%c%s", "color:red","message: " + this.message); 
},

使用vm.message = '触发组件更新'触发data改变：
在这里插入图片描述
也就是说：beforeUpdate，可以监听到data的变化但是view层没有被重新渲染，view层的数据没有变化；到updated的时候，view层才被重新渲染。

5. `beforeDestroy → destroyed`

beforeDestroy钩子函数在实例销毁之前调用，顾名思义，此时实例未被destroy仍完全可用。beforeDestroy → destroyed期间清除watcher、子组件事件监听等。
destroyed钩子函数在Vue 实例destroy后调用。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>VUE生命周期</title>
    <script src="https://cdn.bootcss.com/vue/2.5.2/vue.js"></script>
</head>
<body>
  <div id="app">
    <h1>{{message}}</h1>
  </div>
</body>
<script>
  var vm = new Vue({
    el: '#app',
    data: {
      message: 'Vue的生命周期'
    },
    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     : " + (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>
</html>