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
对象还是其他对象的操作都要慎重一些,避免对象被悄悄替换
而自己不知道,导致程序错误。