vue生命周期流程图_vue 分支流程图-CSDN博客

1.vue实例初始阶段

new Vue( )：启动Vue执行环境，创建环境中Vue实例
init event & kifecycle ：初始化vue的事件环境
init injections & reactivity：初始化vue实例的基本功能 1.参数写入–数据（data），方法（methods），计算属性（computed）…2.生成响应功能（数据劫持）

vue对应的div容器代码如下：

<div id="app">
    <p>{{ msg }}</p>
    <input type="text" v-model="msg">
</div>

钩子函数 beforeCreate( ) 和 created( ) 测试代码如下：

var vm = new Vue({
    el:"#app",
        data:{
            msg:"测试",
        },
        methods:{},
        computed:{},
        beforeCreate:function(){
            console.group("beforeCreate==>");
            console.log("this:",this); // 存在实例
            console.log("$options:",this.$options); // 存在配置项
            console.log("$el",this.$el); // 没有完成容器构建，所以 $el 为 undefined
            console.log("$data:",this.$data); // 只完成了vue的环境，但没有完成数据装载，所以为 undefined
            console.log("$data.msg:",this.msg);// 只完成了vue的环境，但没有完成数据装载，所以为 undefined
            console.groupEnd();
        },
        created() {
            console.group("created==>");
            console.log("this:",this);// 存在实例
            console.log("$options:",this.$options);// 存在配置项
            console.log("$el",this.$el);// 没有完成容器构建，所以 $el 为 undefined
            // 在完成数据装载时，执行$options.data 方法 （mergedInstanceDataFn())
            // 主要用于完成数据对象的合并 和 数据劫持的执行，最终返回一个具有劫持的 数据对象
            // 提供vue实例的 $data
            console.log("$data:",this.$data); // 已经完成了vue的基本功能定义，所以已存在数据仓库
            console.log("$data.msg:",this.msg);// 已经完成了vue的基本功能定义，所以已存在变量
            console.groupEnd();
        },
})

页面测试结果如下：

2.容器初始化阶段

创建当前vue实例对应的页面容器
Has “el” option：如果Vue实例中没有el属性，流程进入no分支，通过vm.$mount()方法挂载实例
Has “template” option：确定是否自定义页面的模板结构
Compile el’s outerHTML astemplate：template属性不存在时，以定义vue时指定的el指向对应html结构作为模板编译
Compile template into render function：template属性存在时，以定义的template的html结构作为模板编译
Create …with it：虚拟DOM已构建完成，完成实例和虚拟DOM的关联，然后将关联的容器替换到页面的el位置
编译模板(complie)，生成虚拟DOM
虚拟DOM的优点：1.减少内存使用量，2.加快页面中DOM的渲染
diff为虚拟DOM渲染算法，通过比较修改前后的js对象变化，准确定位需要重新创建的DOM
将虚拟DOM提供给render函数创建内存DOM等待调用（此时只是创建完成，并未加载到页面）
钩子函数beforeMount( ) 和 mount( ) 测试代码如下：

beforeMount() {
   console.group("beforeMount==>");
   console.log("this:",this);// 存在实例
   console.log("$options:",this.$options);// 存在配置项
   console.log("$el",this.$el);// 实例中存在了 $el 属性值，仅表示页面中的占位dom元素
   console.log("$data:",this.$data); // 已经完成了vue的基本功能定义，所以已存在数据仓库
   console.log("$data.msg:",this.msg);// 已经完成了vue的基本功能定义，所以已存在变量
   console.groupEnd();
},
// 完成vue项目中初始化数据和功能的定义
mounted() {
   console.group("mounted==>");
   console.log("this:",this);// 存在实例
   console.log("$options:",this.$options);// 存在配置项
   console.log("$el",this.$el);// 实例中存在的 $el 属性值，表示当前实例的容器
   console.log("$data:",this.$data); // 已经完成了vue的基本功能定义，所以已存在数据仓库
   console.log("$data.msg:",this.msg);// 已经完成了vue的基本功能定义，所以已存在变量
   console.groupEnd();
},

页面测试结果如下：

3.用户操作阶段

这个阶段可以无限循环，流程为顺时针执行
when data changes：等待用户对数据的操作
Virtual DOM re-render and patch：将虚拟DOM重新渲染并在页面完成替换
钩子函数beforeUpdate() 和 updated( ) 测试代码如下：

beforeUpdate() {
  console.log("beforeUpdate：",this.msg);
},
updated() {
  console.log("updated",this.msg)
},

页面测试结果如下：

可使用vm.$nextTick( )方法，将执行函数体延迟到页面DOM更新完成后执行

4.vue的销毁阶段

when vm.$destroy( ) is called: 手动销毁结束程序运行
Teardownwatchers…：关闭数据的监视和劫持操作，关闭事件监听操作

（这是我干了三年前端后重新在网络上寻找的文章，对我来说十分有用，让我有了重新理解。如有不理解请去看原作，后面把原作的链接放上以示感谢。）
————————————————
版权声明：本文为CSDN博主「我要o泡我要o泡」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_45398848/article/details/100998008