vue基础五：钩子函数(beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroye)
vm的生命周期函数1. 生命周期的定义2.钩子函数：beforeCreate、 created3.beforeMount、mounted4.beforeUpdate、updated5.beforeDestroy、destroyed1. 生命周期的定义<!--生命周期:1.又名:生命周期回调函数、生命周期函数、生命周期钩子2.是什么:Vue在关键时刻帮我们调用的一些特殊名称的函数3.生命周期函
·
vm的生命周期函数
1. 生命周期的定义
<!--
生命周期:
1.又名:生命周期回调函数、生命周期函数、生命周期钩子
2.是什么:Vue在关键时刻帮我们调用的一些特殊名称的函数
3.生命周期函数的名字不可更改，但函数的具体内容是程序员根据需求编写的
4.生命周期函数中的this指向是vm 或 组件实例对象
-->
<!--
常用的生命周期钩子：
1.mounted:发送ajax请求，启动定时器、绑定自定义事件、订阅消息等【初始化操作】
2.beforeDestory：清除定时器、解绑自定义事件、取消订阅消息等【收尾工作】
关于销毁Vue的实例：
1.销毁后借助Vue开发者看不到任何信息
2.销毁后自定义事件会失效，但原生DOM事件依然有效
3.一般不会再beforeDestory操作数据，因为即便操作数据，也不会再触发更新流程了。
-->
实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>引出生命周期</title>
<script src="../status/js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<!--
生命周期:
1.又名:生命周期回调函数、生命周期函数、生命周期钩子
2.是什么:Vue在关键时刻帮我们调用的一些特殊名称的函数
3.生命周期函数的名字不可更改，但函数的具体内容是程序员根据需求编写的
4.生命周期函数中的this指向是vm 或 组件实例对象
-->
<body>
<div id="app">
<h3 :style="{opacity:opacity}">欢迎学习Vue</h3>
<button type="button" @click="stop">关闭变化</button>
<button type="button" @click="start">开始变化</button>
</div>
<script type="text/javascript">
const vm =new Vue({
data:function(){
return{
opacity:1
}
},
methods:{
stop:function(){
clearInterval(this.timer)
this.timer = null
},
start:function(){
if(this.timer) {
return
}
this.timer = setInterval(()=>{
this.opacity -=0.05
console.log(this.opacity)
if(this.opacity<=0){
this.opacity = 1
}
},100)
}
},
//Vue完成模板的解析并把真实的DOM元素放入页面后（挂载完毕）调用mounted
mounted:function(){
//循环执行（setInterval） 区别：定时执行 （setTimeout）
// 用法是setInterval（“方法名或方法”，“延时”）， 第一个参数为方法名或者方法，注意为方法名的时候不要加括号,第二个参数为时间间隔
this.timer = setInterval(()=>{
this.opacity -=0.05
console.log(this.opacity)
if(this.opacity<=0){
this.opacity = 1
}
},100)
}
})
vm.$mount("#app")
</script>
</body>
</html>
2.钩子函数：beforeCreate、 created
<script type="text/javascript">
const vm =new Vue({
data:function(){
return{
n:1
}
},
beforeCreate:function(){
console.log('该函数：尚未进行数据监测、数据代理')
},
created:function(){
console.log('该函数：可以访问到data、methods等')
}
})
vm.$mount("#app")
</script>
3.beforeMount、mounted
<script type="text/javascript">
const vm =new Vue({
data:function(){
return{
n:1
}
},
beforeMount:function(){
console.log('该函数：页面呈现的是未经Vue编译的DOM结构，所有对DOM的操作，最终不奏效')
},
//Vue完成模板的解析并把真实的DOM元素放入页面后（挂载完毕）
mounted:function(){
console.log('该函数：页面中呈现的是经过Vue编译的DOM，对DOM的操作均有效，一般在此进行：开启定时器、发送网络请求、订阅消息、绑定自定义事件、等初始化操作')
}
})
vm.$mount("#app")
</script>
4.beforeUpdate、updated
<script type="text/javascript">
const vm =new Vue({
data:function(){
return{
n:1
}
},
//data变化-流程
beforeUpdate:function(){
console.log('data变化就调用，数据是新的，但页面是旧的，即：页面尚未和数据保持同步')
},
updated:function(){
console.log('data变化就调用，数据是新的，页面是新的，即：页面和数据保持同步')
}
})
vm.$mount("#app")
</script>
5.beforeDestroy、destroyed
<script type="text/javascript">
const vm =new Vue({
data:function(){
return{
n:1
}
},
//销毁流程：只要调用 vm.$destroy(),下面的两个钩子函数-都会被调用；完全销毁一个实例，清理它与其它实例的连接，解绑它的全部指令与事件监听器
//；
//vm中所有的：data、methods、指令等，都处于可用状态，马上要执行销毁过程，一般在此阶段：关闭定时器、取消订阅消息、解绑自定义事件等收尾操作
beforeDestroy:function(){
console.log('')
},
destroyed:function(){
console.log('')
}
})
vm.$mount("#app")
</script>
前往低代码交流专区
更多推荐
1
0- 0
已为社区贡献1条内容
所有评论(0)