vue 生命周期图文结合

最新推荐文章于 2024-05-01 06:44:57 发布

monikaH

最新推荐文章于 2024-05-01 06:44:57 发布

阅读量266

点赞数

分类专栏： vue 生命周期文章标签： vue 生命周期

本文链接：https://blog.csdn.net/qq_40072782/article/details/82592548

版权

vue 同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

生命周期

1 篇文章 0 订阅

订阅专栏

Vue的生命周期的过程描述

先看一眼图
在这里插入图片描述
图源于网络http://doc.liangxinghua.com/vue-family/1.3.html

文字描述：

我们首先需要创建一个实例，也就是在 new Vue ( ) 的对象过程当中，首先执行了init（init是vue组件里面默认去执行的），在init的过程当中首先调用了beforeCreate，然后在injections（注射）和reactivity（反应性）的时候，它会再去调用created。

所以在init的时候，事件已经调用了，我们在beforeCreate的时候千万不要去修改data里面赋值的数据，最早也要放在created里面去做（添加一些行为）

当created完成之后，它会去判断instance（实例）里面是否含有“el”option（选项），如果没有的话，它会调用vm.$mount(el)这个方法，然后执行下一步；如果有的话，直接执行下一步。紧接着会判断是否含有“template”这个选项，如果有的话，它会把template解析成一个render function 。

使用render函数的结果和我们之前使用template解析出来的结果是一样的。render函数是发生在beforeMount和mounted之间的，这也从侧面说明了，在beforeMount的时候，$el还只是我们在HTML里面写的节点，然后到mounted的时候，它就把渲染出来的内容挂载到了DOM节点上。这中间的过程其实是执行了render function的内容。

beforeMount在有了render function的时候才会执行，当执行完render function之后，就会调用mounted这个钩子，在mounted挂载完毕之后，这个实例就算是走完流程了。

**后续的钩子函数执行的过程都是需要外部的触发才会执行。**比如说有数据的变化，会调用beforeUpdate，然后经过Virtual DOM，最后updated更新完毕。当组件被销毁的时候，它会调用beforeDestory，以及destoryed。

这就是vue实例从新建到销毁的一个完整流程。

`这里需要区别的重要内容`

这里写图片描述
`
举个栗子，结合着好理解

<!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 : "我就看看有没有输出我这句话：哈哈哈" 
      },
       beforeCreate: function () {
            console.group('beforeCreate 创建前');
            console.log( "el     : " + this.$el); //undefined
            console.log("data   : " + this.$data); //undefined 
            console.log("message: " + this.message)  
        },
        created: function () {
            console.group('created 创建完毕');
            console.log("el     : " + this.$el); //undefined
            console.log("data   : " + this.$data); //已被初始化 
            console.log("message: " + this.message); //已被初始化
        },
        beforeMount: function () {
            console.group('beforeMount 挂载前');
            console.log("el     : " + (this.$el)); //已被初始化
            console.log("data   : " + this.$data); //已被初始化  
            console.log("message: " + this.message); //已被初始化  
        },
        mounted: function () {
            console.group('mounted 挂载结束状态');
            console.log("el     : " + this.$el); //已被初始化 
            console.log("data   : " + this.$data); //已被初始化
            console.log("message: " + this.message); //已被初始化 
        },
        beforeUpdate: function () {
            console.group('beforeUpdate 更新前状态===============》');
            console.log("el     : " + this.$el);  
            console.log("data   : " + this.$data); 
            console.log("message: " + this.message); 
        },
        updated: function () {
            console.group('updated 更新完成状态===============》');
            console.log("el     : " + this.$el); 
            console.log("data   : " + this.$data); 
            console.log("message: " + this.message); 
        },
        beforeDestroy: function () {
            console.group('beforeDestroy 销毁前状态===============》');
            console.log("el     : " + this.$el);
            console.log("data   : " + this.$data); 
            console.log("message: " + this.message); 
        },
        destroyed: function () {
            console.group('destroyed 销毁完成状态===============》');
            console.log("el     : " + this.$el); 
            console.log("data   : " + this.$data); 
            console.log("message: " + this.message)
        }
    })
</script>
</body>
</html>

在控制台输出结果：（注：画红圈的地方是相对于上一状态改变的）
这里写图片描述

monikaH

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue 生命周期图文结合

Vue的生命周期的过程描述先看一眼图文字描述：我们首先需要创建一个实例，也就是在 new Vue ( ) 的对象过程当中，首先执行了init（init是vue组件里面默认去执行的），在init的过程当中首先调用了beforeCreate，然后在injections（注射）和reactivity（反应性）的时候，它会再去调用created。所以在init的时候，事件已经调用了...
复制链接

扫一扫