Vue实例的生命周期钩子
2020-12-15 本文已影响0人
普通的一个程序员
每个Vue实例创建时，都要经过一系列的初始化过程，设置监听、编译模板、挂载到dom冰在数据变化是更新dom等。在这个过程中，会运行一些叫做 钩子 的函数，这给了用户在不同阶段添加自己代码的可能。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Demo1</title>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<!-- 获取变量的值 -->
{{value}}
</div>
<script type="text/javascript">
var data = {value: 1123};
var app = new Vue({
el: "#app", // 元素的id
data: data,
beforeCreate: function() {
console.log("beforeCrate")
},
created: function() {
console.log("created")
},
beforeMount: function() {
console.log("beforeMount")
},
mounted: function() {
console.log("mounted")
console.debug(arguments)
},
beforeUpdate: function() {
console.log("beforeUpdate")
},
updated: function() {
console.log("updated")
},
beforeDestroy: function() {
console.log("beforeDestroy")
},destroyed: function() {
console.log("destroyed")
}
})
data.value="3333" //生效
app.$watch('value', function(newVal, oldVal){
console.log( newVal + ',' + oldVal)
})
data.value = 1231231 // 生效
</script>
</body>
</html>
包含create、 mounted、updated和destroyed, 生命周期钩子里的this指向调用它的Vue实例
不可以在选线property或回调上使用 箭头 函数，比如：
create: () => console.log(this.a) 或者
app.$watch('a', newVal => this.myMethod())
因为箭头函数并没有this，this会作为变量一直向上级词法作用域查找，直至找到为止，经常导致 Uncaught TypeError: cannot read property of undefiend 或
uncaught TypeError: this.myMethod is not a function之类的错误
image.png
