何为生命周期
每个Vue实例在被创建时总要经过一系列的初始化过程:创建实例、装载模板、渲染模板等等。Vue为生命周期中的每个状态都设置了钩子函数(监听函数)。每当Vue实例处于不同的生命周期时,对应的函数就会被触发调用。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script src="../node_modules/vue/dist/vue.js"></script>
<div id="app">
<span id="num">{{num}}</span>
<button @click="num++">赞!!!</button>
<h2>{{name}},有{{num}} 个人点赞</h2>
</div>
<script>
var vue = new Vue({
el: "#app",
data: {
name: "张三",
num: 100
},
methods: {
show() {
return this.name;
},
add() {
this.num++
}
},
beforeCreate() {
console.log("=============beforeCreate========");
console.log("数据模型未加载:" + this.name,this.num);
console.log("方法未加载: "+ this.show());
console.log("html模板未加载:" + document.getElementById("num"));
},
created() {
console.log("=============beforeCreate========");
console.log("数据模型已加载:" + this.name,this.num);
console.log("方法已加载: "+ this.show());
console.log("html模板已加载:" + document.getElementById("num"));
console.log("html模板未渲染:" + document.getElementById("num").innerText);
},
beforeMount() {
console.log("=============beforeMount========");
console.log("html模板未渲染:" + document.getElementById("num").innerText);
},
mounted() {
console.log("=============mounted========");
console.log("html模板已渲染:" + document.getElementById("num").innerText);
},
beforeUpdate() {
console.log("=============beforeUpdate========");
console.log("数据模型已更新:" + this.num);
console.log("html模板未更新:" + document.getElementById("num").innerText)
},
updated() {
console.log("===updated===")
console.log("数据模型已更新:" + this.num)
console.log("html模板已更新" + document.getElementById("num").innerText)
},
})
</script>
</body>
</html>