Vue生命周期函数调用的时间
2019-04-08 本文已影响0人
李华炎
vue的生命周期函数有11个，常用的8个生命周期函数必须要掌握
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>生命周期函数</title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="app"></div>
<script>
var vm = new Vue({
el: '#app',
data: {text: "Hello World!"},
template: "<div>{{text}}</div>", // template必须要有一个根元素
beforeCreate: function () {
console.log("beforeCreate","初始化vue实例前的一些准备");
},
created: function() {
console.log(this);
console.log(this.$el);
console.log("created","初始化vue实例已经完成，但还没有拿到根元素");
},
beforeMount: function(){
// 已经拿到根元素，但是还没有和vue实例的数据结合
console.log(this.$el);
console.log("beforeMount","vue实例没有和根元素el挂载");
},
mounted: function() {
console.log(this.$el);
console.log("mounted","vue实例已经和根元素el挂载完成");
},
beforeUpdate:function(){
console.log("beforeUpdate","vue实例的数据没有发生变化！");
},
updated: function(){
console.log("updated","vue实例的数据发生变化后会调用该方法");
},
beforeDestroy: function() {
// 当调用vm.$destroy()方法销毁vue实例时会执行该方法（此时vue实例还存在）
console.log(vm.text);
console.log("beforeDestroy","vue实例销毁之前会调用");
},
destroyed: function(){
// vue实例被完全销毁之后才会执行该方法（和根元素解绑了）
vm.text = "vue实例被销毁了"; // 该数据会存在，但是页面的虚拟DOM不会发生改变
console.log(vm); // 此时vue实例已经和根元素没有关系了
console.log("destroyed","vue实例销毁之后才会调用");
}
});
</script>
</body>
</html>
