文章目录
一、引出生命周期
生命周期:
- 又名:生命周期回调函数、生命周期函数、生命周期钩子。
- 是什么:Vue在关键时刻帮我们调用的一些特殊名称的函数。
- 生命周期函数的名字不可更改,但函数的具体内容是程序员根据需求编写的。
- 生命周期函数中的this指向是vm或组件实例对象。
二、生命周期
案例:
2.1挂载流程
2.1.1 beforeCreate
2.1.2 created
2.1.3 beforeMount
第一条路线:
第二条路线:
2.1.4 mounted
2.2更新流程
2.2.1 beforeUpdate
2.2.2 updated
2.3销毁流程
2.3.1 beforeDestroy和destroyed
以上代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
<h1>现在n的值为:{{n}}</h1>
<button @click="add">点一下n+1</button>
<button @click="bye">点我销毁vm</button>
</div>
</body>
<script type="text/javascript">
const vm = new Vue({
el: '#root',
// template:`<div>
// <h1>现在n的值为:{{n}}</h1>
// <button @click="add">点一下n+1</button>
// </div>`,
data: {
n: 1
},
methods: {
add() {
console.log('add');
this.n++;
},
bye() {
console.log('bye');
this.$destroy();
}
},
watch: {
n() {
console.log('n改变了');
}
},
beforeCreate() {
console.log('beforeCreate');
},
created() {
console.log('created');
},
beforeMount() {
console.log('beforeMount');
},
mounted() {
console.log('mounted');
},
beforeUpdate() {
console.log('beforeUpdate');
},
updated() {
console.log('updated');
//console.log("此时n的值为:"+this.n);
//debugger;
},
beforeDestroy() {
console.log('beforeDestroy,获取n值'+this.n);
this.add();
},
destroyed() {
console.log('destroyed');
},
})
</script>
</html>
2.3.2 渐变案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
<h1 :style="{opacity}">渐变效果</h1>
<button @click="stop">点我停止变换</button>
</div>
</body>
<script type="text/javascript">
const vm = new Vue({
el: '#root',
data: {
opacity: 1
},
methods: {
stop(){
this.$destroy();
}
},
mounted() {
console.log('mounted');
this.timer = setInterval(()=>{
this.opacity -=0.01;
if(this.opacity <= 0) this.opacity = 1;
},16)
},
beforeDestroy() {
console.log('beforeDestroy');
clearInterval(this.timer);
}
})
</script>
</html>
总结
常用的生命周期钩子:
- mounted:发送ajax请求、启动定时器、绑定自定义事件、订阅消息等【初始化操作】。
- beforeDestroy:清楚定时器、解绑自定义事件、取消订阅消息等【收尾工作】。
关于销毁Vue实例:
- 销毁后借助Vue开发者工具看不到任何信息。
- 销毁后自定义事件会失效,但原生DOM事件依然有效。
- 一般不会在beforeDestroy操作数据,因为即使操作数据,也不会再出发更新流程了。