Vue实例的生命周期
什么是生命周期:
从Vue实例创建、运行、到销毁期间,总是伴随着各种各样的时间,这些事件,都统一称为生命周期!
生命周期钩子:
就是生命周期时间的别名而已;生命周期钩子=生命周期函数=生命周期函数
主要的生命周期函数分类:
- 创建期间的生命周期函数:
1、beforeCreate:实例已经在内存中被创建出来,此时,还没有初始化好data和methods属性
2、created:实例已经在内存中创建好了,此时的data和methods已经创建好了,只是还没有开始编译模板
3、beforeMount:此时已经完成了模板编译,但是还没挂载到页面中
4、mounted:此时,已经将编译好的模板挂载到了页面指定的容器中显示
- 运行期间的生命周期函数:
1、beforeUpdate:状态更新之前执行此函数,此时data中的状态值是最新的,但是界面上显示的,数据还是旧的,因为此时还没有开始渲染DOM节点
2、updated:实例更新之后调用此函数,此时的data中的状态值和界面上显示的数据,都已经完成了更新,界面已经被重新渲染好了
- 销毁期间的生命周期函数:
1、beforeDestroy:实例销毁之前调用,在这一步,实例仍然完全可用
2、destroyed:Vue实例销毁后调用。调用后Vue实例指示的所有东西都会解除绑定,所有的事件监听器都会被移除,所有的子实例也会被销毁
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>vue生命周期</title>
<style>
</style>
</head>
<body>
<div id="app">
<input type="button" value="修改message" @click="message='ok'"></input>
<h3 id="h3">{{message}}</h3>
</div>
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
// 创建vue实例
var app = new Vue({
el: "#app",
data: {
message: "今天也要加油哦"
},
methods: {
show() {
console.log("执行了show方法")
}
},
beforeCreate() { //遇到的第一个生命周期函数,表示实例完全被创建出来之前,会执行它
// console.log(this.message)
// this.show()
// 注意:在 beforeCreate生命周期函数执行的时候,data和methods中的数据都还没有被初始化
},
created() { //这是遇到的第二个生命周期函数
// console.log(this.message)
// this.show()
// 在created中,data和methods都可以初始化好了
// 如果要调用methods中的方法或者操作data中的数据,最早只能在created中操作
},
beforeMount() { // 这个是遇到的第三个生命周期函数,表示模板已经在内存中编译完成,但是模板未渲染到页面当中
// console.log(document.getElementById('h3').innerText)
// 在beforeMount执行的时候,页面中的元素,还没有被真正的替换过来,只是之前写的一些模板字符串
},
mounted() { // 这个是遇到的第四个生命周期函数,表示内存中的模板已经真实的挂载到了页面当中,用户已经可以看到渲染好的页面了
// console.log(document.getElementById('h3').innerText)
// 注意:mounted是实例创建期间的最后一个生命周期函数,当执行完mounted就表示,实例已经被完全创建好了,此时如果没有其他实例的话,这个实例就静静的躺在内存中一动不动
},
// 以下就是运行中的两个事件
beforeUpdate() { // 这时候表示界面还没有被更新,但是数据已经被更新了
// console.log('界面上的元素内容:' + document.getElementById('h3').innerText)
// console.log('data中的message是:' + this.message)
// 得出结论:当执行beforeUptade的时候,页面中的显示数据还是旧的,此时data数据是最新的,页面尚未和最新的数据保持一致
},
updated() {
// console.log('界面上的元素内容:' + document.getElementById('h3').innerText)
// console.log('data中的message是:' + this.message)
// updated事件执行的时候,页面和data数据已经保持同步了,都是最新的
}
});
</script>
</body>
</html>