vue学习笔记（3）--vue的生命周期篇

最新推荐文章于 2024-01-10 19:58:44 发布

JJ_huahua

最新推荐文章于 2024-01-10 19:58:44 发布

阅读量205

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/JJ_huahua/article/details/104018394

版权

vue 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

vue的生命周期篇

生命周期图解
流程解释
生命周期表格解释
代码详解

生命周期图解

生命周期图官方地址
实际如下：（图片来源于vue官网）
vue生命周期图

上图就完全能解释整个vue的生命周期是怎样的一个过程

流程解释

1.实例化vue对象(new Vue()的过程)
2.初始化事件和生命周期 （执行init Event&Lifecycle）
3.beforeCreate() 在组件实例刚被创建还没实例化之前，执行一些初始化操作，比如加载动画等
4. 初始化注入和校验(init injections&reactivity )
5.created() 此时实例已经创建完成，属性也已经绑定了，但是这个时候dom还没有生成，
 	$el属性还不存在，页面没有展示，此处可以执行一些操作，比如结束加载动画 发起异步请求
6.这个时候判断是否有el属性，如果有就继续编译 如果没有就停止编译 生命周期到此就结束了 
 	直到在该vue实例上调用vm.$mount(el) 这样可以唤醒继续执行编译过程   如果注释掉 el:'#app' 这句话 
 	那么vue的生命周期就到created就停止了
7.如果有el属性或者通过vm.$mount(el)唤醒 继续执行之后。再判断是否有template 
 	如果有就将其编译成render()函数，并执行render()函数去渲染组件的内容。 
 	如果没有就将外部的HTML作为模板编译 ， template中的模板优先级要高于外部HTML的优先级
8.beforeMount() 完成虚拟dom配置，这个时候模板已经被编译，把data里面的数据和模板已经生成html，
	但是这个时候还没有将html挂载都页面上
9.给vue实例对象添加$el成员（也就是创建vm.$el ），并且替换挂载的"el"对应的dom
10.mounted() 用上面已经编译好的html内容替换el属性指向的dom对象，这个方法结束之后dom结构正式完成
页面显示出来，可以发起网络请求。至此 初始化的生命周期暂时告一段落 挂载完毕
11 如果vue发现data里面的数据发生改变，会触发对应组件的重新渲染。首先执行beforeUpdate 
	（组件发生改变之前执行这个方法，这个时候页面还不会展示修改的内容，但是虚拟dom已经配置修改）
12.重新渲染虚拟dom，并通过diff算法比对节点差异 更新DOM（Virtual DOM re-render and patch）
13.updated() 组件更新之后执行这个方法，这个方法执行之后修改的页面展示出来，也就是view重新渲染，数据已经更新
14.当调用vm.$destory()  会先执行beforeDestroy()  这个在组件销毁之前调用，这个时候实例还是可用的
15.真正执行destory逻辑销毁vue实例，Teardown watcher,child components and event listeners   
	拆卸观察者，子组件，和事件监听者。
16.destoryed()  在vue实例销毁之后调用，调用之后 实例所指向的所有东西都会解绑，
	所有的事件监听也会被移除，所有的子组件也会被销毁  实例不可用

生命周期表格解释

周期	说明
beforeCreate	在实例初始化之后，数据观测和事件配置之前调用
created	在实例创建完成之后调用，此时已经完成数据观测，属性和方法的运算，初始化事件，$el属性还未见
beforeMount	在挂在之前被调用，相关的render函数首次被调用，只在虚拟dom生成html，还未挂在到页面上
mounted	在el被创建的vm.$el替换并挂载到实例上去之后调用，这个时候的实例已经完成以下的配置：用上面编译好的html内容替换el属性指向的dom对象，完成模板中的html渲染到页面上，这个过程中可进行ajax交互
beforeUpdate	在数据更新之前调用，发生在虚拟dom重新渲染和打补丁之前，可以在这个函数里面进一步修改数据，不会触发重复的渲染过程
updated	在数据更改之后调用，此时重新渲染和打补丁已经执行完了，调用时组件dom已经更新了，此时可以执行依赖于dom的操作。但是大多数情况下应该避免在此时修改数据状态，避免陷入更新的无限循环
beforeDestory	在实例销毁之前调用，此时的实例还是可用的状态
destoryed	在实例被销毁之后调用此时的实例已不可用，调用之后所有的事件监听会被移除，子组件会被销毁

下面从代码方面体现下具体的过程

代码详解

//html部分
<div id="app">
	<span>{{pageMsg}}</span>
	<button @click="changeMsg()">改变初始值</button>
	<button @click="destoryMsg()">销毁实例</button>
</div>

//js部分
var app = new Vue({
	el:"#app",
	data:{
		pageMsg:"初始显示信息",
		count:1
	},
	methods:{
		changeMsg(){
			this.count++;
			this.pageMsg = "改变之后的值"+this.count;
		},
		destoryMsg(){
			this.$destroy();
		}
	},
	beforeCreate: function () {
        console.log('beforeCreate 创建前状态===============》');
        console.log("el:"+this.$el); //undefined
        console.log("data:"+this.$data); //undefined 
        console.log("pageMsg:"+this.pageMsg);
    },
    created: function () {
        console.log('created 创建完毕状态===============》');
        console.log("el:"+this.$el); //undefined
        console.log("data:"+this.$data); //已被初始化 
        console.log("pageMsg:"+this.pageMsg); //已被初始化
    },
    beforeMount: function () {
        console.log('beforeMount 挂载前状态===============》');
        console.log(("el:"+this.$el)); //已被初始化
        console.log("data:"+this.$data); //已被初始化  
        console.log("pageMsg:"+this.pageMsg); //已被初始化 
    },
    mounted: function () {
        console.log('mounted 挂载结束状态===============》');
        console.log("el:"+this.$el); //已被初始化
        console.log("data:"+this.$data); //已被初始化
        console.log("pageMsg:"+this.pageMsg); //已被初始化 
    },
    beforeUpdate: function () {
        console.log('beforeUpdate 更新前状态===============》');
        console.log("el:"+this.$el);
        console.log("data:"+this.$data); 
        console.log("pageMsg:"+this.pageMsg);
    },
    updated: function () {
        console.log('updated 更新完成状态===============》');
        console.log("el:"+this.$el); 
        console.log("data:"+this.$data); 
        console.log("pageMsg:"+this.pageMsg); 
    },
    beforeDestroy: function () {
        console.log('beforeDestroy 销毁前状态===============》');
        console.log("el:"+this.$el);     
        console.log("data:"+this.$data); 
        console.log("pageMsg:"+this.pageMsg); 
    },
    destroyed: function () {
        console.log('destroyed 销毁完成状态===============》');
        console.log("el:"+this.$el);  
        console.log("data:"+this.$data); 
        console.log("pageMsg:"+this.pageMsg)
    }
})

结果解析如下
在浏览器打开运行，查看console控制台，会有如下的打印

beforeCreate 创建前状态===============》
el:undefined
data:undefined
pageMsg:undefined
created 创建完毕状态===============》
el:undefined
data:[object Object]
pageMsg:初始显示的文字信息
beforeMount 挂载前状态===============》
el:undefined
data:[object Object]
pageMsg:初始显示的文字信息
mounted 挂载结束状态===============》
el:[object HTMLDivElement]
data:[object Object]
pageMsg:初始显示的文字信息

然后点击第一个按钮改变msg的值，又会有如下的打印

beforeUpdate 更新前状态===============》
el:[object HTMLDivElement]
data:[object Object]
pageMsg:改变之后的值2
updated 更新完成状态===============》
el:[object HTMLDivElement]
data:[object Object]
pageMsg:改变之后的值2

最后点击第二个按钮去销毁实例会有如下打印

beforeDestroy 销毁前状态===============》
el:[object HTMLDivElement]
data:[object Object]
pageMsg:改变之后的值2
destroyed 销毁完成状态===============》
el:[object HTMLDivElement]
data:[object Object]
pageMsg:改变之后的值2

销毁之后再去操作第一个按钮去改变msg的值是不会生效的，也不会有任何新的打印
是因为销毁之后实例上绑定的所有事件监听都被移除了，所有的子组件也都不存在了
但是已经存在的页面dom还是在的页面的dom不能通过销毁实例而达到删除的效果可以用v-if或者v-show来控制dom的显示与否不要轻易手动调用destory去销毁实例

以上流程已经能比较清晰的看到整个周期的执行过程了
参考的网上的大牛的写法，然后按照自己的思路从头整了一遍
如遇侵权请联系删除