标签：el 生命周期 console log 调用 vue 挂载 data
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
{{message}}
<input type="text" v-model="message" /><br />
<button @click="destoryVue()">摧毁</button>
<table></table>
</div>
<script>
new Vue({
el: "#app",
data: {
message: "我是this.data.message",
userList: []
},methods:{
destoryVue(){
this.$destroy()
}
},
beforeCreate() {
console.log("我是实例化之前的vue，现在调用的是beforeCreate()");
// 实例化之前挂载对象都没有挂对象
console.log(this)
console.log(this.$el);
console.log(this.$data)
},
created() {
console.log("我是实例化的vue，挂载对象el此时还没有完成，现在调用的是create()，主要用于数据初始化");
// 这里主要用于数据初始化，此时挂载对象还没有跟标签有任何关系
console.log(this)
console.log(this.$el);
console.log(this.$data);
},
beforeMount() {
console.log("此时模板已挂载完成，现在调用的是beforeMount()");
// 此时已经得到挂载对象el的根节点内容，但是还没有进行数据绑定
console.log(this)
console.log(this.$el);
console.log(this.$data)
},
mounted() {
console.log("现在调用的是mounted()");
// 此时数据绑定已完成
console.log(this)
console.log(this.$el);
console.log(this.$data)
},
beforeUpdate() {
console.log("现在调用的是beforeUpdate()");
// 修改之前会先调用这个函数再调用update（）
console.log(this)
console.log(this.$el);
console.log(this.$data)
},
updated() {
console.log("现在调用的是updated()");
// 每次修改都会调用该函数
console.log(this)
console.log(this.$el);
console.log(this.$data)
},
beforeDestroy() {
console.log("现在调用的是beforeDestroy()");
// 调用destroyed（）之前会自动调用该函数
console.log(this)
console.log(this.$el);
console.log(this.$data)
},
destroyed() {
console.log("现在调用的是destroyed()");
// 摧毁之后，绑定会被摧毁
console.log(this)
console.log(this.$el);
console.log(this.$data)
}
})
</script>
</body>
</html>
标签：el,
生命周期,
console,
log,
调用,
vue,
挂载,
data
From： https://www.cnblogs.com/Liku-java/p/17019532.html