<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue生命周期钩子</title>
<style>
[v-cloak] {
display: none;
}
</style>
</head>
<body>
<div id="app" v-cloak>
<p v-html="message" ref="msg" v-once :style="setStyle"></p>
<p><button type="button" @click="changeMessage()">修改</button></p>
<p><button type="button" @click.once="destoryVue()">销毁</button></p>
</div>
</body>
<script src="https://cdn.bootcss.com/vue/2.6.11/vue.js"></script>
<script>
var vm = new Vue({
data: {
message: '听闻远方有你 动身跋涉千里<br/> 我吹过你吹过的风 这算不算相拥<br/> 我踏过你踏过的路 这算不算相逢<br/> 我还是喜欢你 认真且怂 从一而终',
count:0,
},
methods: {
changeMessage() {
this.message = this.$refs.msg.innerHTML+(this.count++);
console.log('成功修改数据');
},
destoryVue() {
this.$destroy();
console.log('成功销毁Vue实例');
}
},
computed: {
setStyle() {
return {
'font-family': 'Times New Roman, Times, serif',
'color': 'darkblue',
'font-size': 'large',
}
}
},
watch: {
message: function (newValue, oldValue) {
console.log('监视数据变化：原值：' + newValue + '------新值：' + oldValue);
}
},
beforeCreate() {
console.log('beforeCreate-------创建实例之前执行的钩子事件');
},
created() {
console.log('created-------实例创建完成后执行的钩子');
},
beforeMount() {
console.log('beforeMount--------将编译完成的HTML挂载到对应虚拟DOM时触发的钩子（此时页面并没有内容）');
},
mounted() {
console.log('mounted-------编译好的HTML挂载到页面完成后执行的事件钩子，此时钩子函数中一般会做一些ajax请求获取数据，进行数据初始化（mounted在整个实例中只会执行一次）');
},
beforeUpdate() {
console.log('beforeUpdate-----更新视图之前的钩子');
},
updated() {
console.log('updated------更新视图之后的钩子');
},
beforeDestroy() {
console.log('beforeDestroy----实例销毁之前执行的钩子');
},
destroyed() {
console.log('destroyed---------实例销毁完成执行的钩子');
},
}).$mount('#app');
</script>
</html>
