2019-06-07Vue实例的生命周期
2019-06-08 本文已影响0人
啊_6424
什么是生命周期？
从vue实例创建，运行，到销毁期间，总是伴随着各种各样的事件，这些事件，统称为生命周期。
生命周期钩子:就是生命周期事件的别名而已。
主要的生命周期分类：
- 1.创建其间的生命周期函数：
- beforeCreate()：实例刚在内存中被创建出来，还没有初始好data和methods属性
- created()：实例已经在内存中创建好，data和methods已经创建好，但没有开始编译模板
- beforeMount()：此时已经完成了模板的编译，但还没有挂载到页面中，
- mount()：已经将编译好的模板挂载到了页面指定的容器中显示。
- 2.运行期间的生命周期函数：
- beforeUpdate()：状态更新之前执行此函数，data里的值是最新的，但是页面上的数据还是旧的。此时还没有开始重新渲染DOM节点。
- updated()：实例更新完毕后调用此函数，data中的值和页面上的值都已经完成了更新
- 3.销毁期间的生命周期函数：
- beforeDestroy()：实例销毁之前调用，在此之前，实例都还是可用的
- 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>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">
</head>
<body>
<div id="app">
<input type="button" value="改变msg" @click="msg = 'No'">
<p id="p">{{ msg }}</p>
</div>
</body>
</html>
<script>
new Vue({
el: "#app",
data:{
msg:"123"
},
methods:{
show(){
console.log("执行了show方法");
}
},
beforeCreate() {
//在这里面，data 和 methods 中的数据都还没有被初始化
// console.log(this.msg);//undefined
// this.show();//报错不是一个function
},
created() {
//能正常运行
//如果需要操作data里的数据或者是调用methhods里的方法，最早只能在这里面
console.log(this.msg);
this.show();
},
beforeMount(){
console.log(document.getElementById("p").innerText);//{{ msg }}
},
mounted() {
//是实例创建期间的最后一个函数，当执行完它后，就表示实例已经被完全创建好了，此时如果没有其他操作的话，实例就在内存中一动不动
console.log(document.getElementById("p").innerText);//123
},
//运行中的两个事件
beforeUpdate() {
//页面没有被更新，但data里的数据改变了
console.log("页面元素中的数据", document.getElementById("p").innerText);//页面元素中的数据 123
console.log("data里的数据",this.msg);//data里的数据 No
},
updated(){
console.log("页面元素中的数据", document.getElementById("p").innerText);//页面元素中的数据 No
console.log("data里的数据",this.msg);//data里的数据 No
}
});
</script>
creatd()，mounted()
