不许你不懂vue生命周期

不许你不懂vue生命周期,第1张

文章目录 vue生命周期1.引入生命周期1.1vue实例外面编写函数1.2配置methods1.3引入生命周期 2.生命周期2.1创建时期2.2生成虚拟DOM2.3挂载2.4更新2.5销毁 3总结

☀️作者简介:大家好我是言不及行yyds
🐋个人主页:言不及行yyds的CSDN博客
🎁系列专栏:【vue】

vue生命周期 1.引入生命周期

在这,我们提出一个需求,在vue项目中书写一段文字,编写逻辑

让文字显示一出来就逐渐变成透明(改变透明度),给出想法

1.1vue实例外面编写函数
<script type="text/javascript" src="../js/vue.js"></script>
<div id="root">
	<h2 :style="{opacity}">欢迎学习Vue</h2>
</div>
<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
		 const vm=new Vue({
			el:'#root',
			data:{
				opacity:1
			},
		//通过外部的定时器实现(不推荐)
       setInterval(() => {
			vm.opacity -= 0.01
			if(vm.opacity <= 0) vm.opacity = 1
		},16) 
</script>
1.2配置methods
const vm=new Vue({
		data:{
		opacity:1 },
		methods: {
	  		change(){	
	  		setInterval(() => {
				vm.opacity -= 0.01
				if(vm.opacity <= 0) vm.opacity = 1
			},16)
			}
		},
	}
window.onload=()=>{
    vm.change()
}

上面的两个方法都一定程度上 *** 作了DOM,不是说不能 *** 作DOM

而是非必要不 *** 作DOM。会使性能降低

1.3引入生命周期

如果我们把假设vue是我们的兄弟,让他在找到模板,解析模板,

放入页面的某个过程在他完成后能通知我一下,我在这个阶段书写

我的逻辑


//Vue完成模板的解析并把初始的真实DOM元素放入页面后(挂载完毕)调用mounted
data:{
    
}
mounted(){
     console.log('mounted',*this*)
    setInterval(() => {
*this*.opacity -= 0.01
     if(*this*.opacity <= 0) *this*.opacity = 1
   },16)
  },
 与data平级

​ 这把所有的逻辑函数都写在vue实例中,一定程度上提高了性能

2.生命周期

我们可以分成五部分理解

2.1创建时期

beforeCreate

在这之前会初始化:生命周期,事件,但是数据代理还没有开始

所以在调用beforeCreate时无法通过vm访问到data中的数据以及

methods中的方法。

关于数据代理就是

create

在这之前会初始化数据检测,以及数据代理

​ 所以此时调用Create时可以通过vm访问到data中的数据以及

​ methods中的方法

2.2生成虚拟DOM

首先会检查vue实例中是否含有el这个配置项

(用于知道知道将解析好的结果呈现到那个容器)

检查在vue实例中是否有template配置项

在这里的template配置项可不是在html中的template标签(效果呈现,节点消失

 data: {
   opacity: 1,
    },
 template: `
	
       你好啊
	   欢迎学习Vue
	`,

采用ES6的``方法用于结构可换行

注意:template配置项中必须要有一个根标签

这个阶段vue开始解析模板,然后生成虚拟DOM(内存中),但是这时页面还只是呈现

未解析的内容

2.3挂载

beforeMount

在这个阶段页面也还只是呈现未进行vue解析的内容,在

这个时候所有对DOM的 *** 作都是无效的(页面不呈现效果)

在beforeMount和mounted中间内存中的虚拟DOM会转化为真实DOM插入页面

mounted

页面呈现vue解析的内容,对DOM的 *** 作都是有效的

但是还是要避免

在调用这个函数时一般发送ajax请求、启动定时器、绑定自定义事件、订阅消息等【初始化 *** 作】

2.4更新

beforeUpdate

这时数据还是新的,但是由于页面尚未与数据保持同步所以

页面还只是旧数据

在二者之间会进行虚拟DOM算法(diff)对新旧数据进行对比实现数据更新

updated

页面尚未与数据保持同步,页面是新数据

2.5销毁

beforeDestory

这个时候vue实例中,data,methods,指令等还处于可用状态

在这个时候就可以书写需要关闭的东西

比如:定时器,订阅消息,自定义事件

destoryed

销毁vue实例后

1.借助Vue开发者工具看不到任何信息。

2.销毁后自定义事件会失效,但原生DOM事件依然有效。

3.一般不会在beforeDestroy *** 作数据,因为即便 *** 作数据,

​ 也不会再触发更新流程了。

3总结

常用的生命周期钩子:

1.mounted: 发送ajax请求、启动定时器、绑定自定义事件、订阅消息等【初始化 *** 作】

2.beforeDestroy: 清除定时器、解绑自定义事件、取消订阅消息等【收尾工作】

3.一般不会在beforeDestroy *** 作数据,因为即便 *** 作数据,也不会再触发更新流程了。

好了这次的文章就到这了
如果觉得还不错的话,帮忙点个关注
欢迎大家积极探讨

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/945124.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-05-18
下一篇 2022-05-18

发表评论

登录后才能评论

评论列表(0条)

保存