vue生命周期 1.引入生命周期☀️作者简介:大家好我是言不及行yyds
🐋个人主页:言不及行yyds的CSDN博客
🎁系列专栏:【vue】
1.1vue实例外面编写函数在这,我们提出一个需求,在vue项目中书写一段文字,编写逻辑
让文字显示一出来就逐渐变成透明(改变透明度),给出想法
<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()
}
1.3引入生命周期上面的两个方法都一定程度上 *** 作了DOM,不是说不能 *** 作DOM
而是非必要不 *** 作DOM。会使性能降低。
如果我们把假设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
3总结销毁vue实例后
1.借助Vue开发者工具看不到任何信息。
2.销毁后自定义事件会失效,但原生DOM事件依然有效。
3.一般不会在beforeDestroy *** 作数据,因为即便 *** 作数据,
也不会再触发更新流程了。
常用的生命周期钩子:
1.mounted: 发送ajax请求、启动定时器、绑定自定义事件、订阅消息等【初始化 *** 作】
2.beforeDestroy: 清除定时器、解绑自定义事件、取消订阅消息等【收尾工作】
3.一般不会在beforeDestroy *** 作数据,因为即便 *** 作数据,也不会再触发更新流程了。
好了这次的文章就到这了
如果觉得还不错的话,帮忙点个关注吧
欢迎大家积极探讨
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)