Vue生命周期钩子初探
看到vue生命周期钩子图，于是验证一些想法。
Vue生命周期官方图
疑惑
可以看到，mounted上的说明文字似乎说的是：vue是在mounted前一步，将html构建完毕，生成节点对象，并替换掉所绑定的元素。
如果这样，是不是就意味着这样的全局声明var el = document.getElementById("xx"); 在vue完成更新 html 之后，已经不是当前页面中的html节点对象，假如再使用el进行操作，得到的将不是期望的结果，需要重新获取它的值：el = document.getElementById("xx");?
测试
于是，我进行了如下的测试。
代码1
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Made with Thimble</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app-life">
{{ xx }}
</div>
<script>
var div = document.getElementById("app-life");
var app = new Vue({
el:"#app-life",
data: {
xx:"oo"
},
beforeCreate:function(){
console.log("beforeCreate>> "+ div.textContent);
},
created: function () {
console.log("created>> "+ div.textContent);
},
beforeMount:function(){
console.log("beforeMount>> "+ div.textContent);
},
mounted:function(){
console.log("mounted>> "+ div.textContent);
},
beforeUpdate:function(){
console.log("beforeUpdate>> "+ div.textContent);
},
updated:function(){
console.log("updated>> "+ div.textContent);
},
beforeDestory:function(){
console.log("beforeDestory>> "+ div.textContent);
},
destoryed:function(){
console.log("destoryed>> "+ div.textContent);
}
});
</script>
</body>
</html>
打印结果
beforeCreate>>
{{ xx }}
created>>
{{ xx }}
beforeMount>>
{{ xx }}
mounted>>
{{ xx }}
果然，html元素被替换掉了。控制台输入：
app.xx = "mama" 更新一下html内容，打印：
beforeUpdate>>
{{ xx }}
updated>>
{{ xx }}
果然，div 对象压根无法感知到变化。
代码2
再次测试一下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Made with Thimble</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app-life">
{{ xx }}
</div>
<script>
var app = new Vue({
el:"#app-life",
data: {
xx:"oo"
},
beforeCreate:function(){
var div = document.getElementById("app-life");
console.log("beforeCreate>> "+ div.textContent);
},
created: function () {
var div = document.getElementById("app-life");
console.log("created>> "+ div.textContent);
},
beforeMount:function(){
var div = document.getElementById("app-life");
console.log("beforeMount>> "+ div.textContent);
},
mounted:function(){
var div = document.getElementById("app-life");
console.log("mounted>> "+ div.textContent);
},
beforeUpdate:function(){
var div = document.getElementById("app-life");
console.log("beforeUpdate>> "+ div.textContent);
},
updated:function(){
var div = document.getElementById("app-life");
console.log("updated>> "+ div.textContent);
},
beforeDestory:function(){
var div = document.getElementById("app-life");
console.log("beforeDestory>> "+ div.textContent);
},
destoryed:function(){var div = document.getElementById("app-life");
console.log("destoryed>> "+ div.textContent);
}
});
</script>
</body>
</html>
打印结果
果然是大大不同的，果然是mounted之后马上改变了：
beforeCreate>>
{{ xx }}
created>>
{{ xx }}
beforeMount>>
{{ xx }}
mounted>>
oo
app.xx = “mama”
beforeUpdate>>
oo
updated>>
mama
“mama”
结语
果然，用了框架之类的东西，无论是document对象还是其他对象的操作都要慎重一些，避免对象被悄悄替换而自己不知道，导致程序错误。