<template>
<div>
<div id="test">{{name}}</div>
<el-button @click="name='点击更新的内容'">更新内容</el-button>
</div>
</template>
<script>
export default {
data() {
return {
name: '暴怒的代码'
}
},
render(h) {
return h('div', [
h('h1', this.name),
h('button', {
on: {
click: () => {
alert('点击了我')
}
}
}, 'Click me')
]);
},
beforeCreate() {
console.log('------------------初始化阶段------------------')
//这里data 和 methods 中的数据还没有初始化，所以输出的应该是undefined
console.log(`这是beforeCreate的执行:${this.name}`)
},
created() {
//这里数据已经初始化了，可以输出data中的内容
console.log(`这是Create的执行:${this.name}`)
//因为在created（）中还没有渲染到DOM页面，所以在渲染前修改，选的数据是下面的内容
this.name = '在渲染到DOM之前就修改内容'
},
beforeMount() {
console.log('------------------挂载阶段------------------')
//开始编译数据,但是当前数据只在内存中渲染,并没有真实的渲染到html页面上
console.log(`这是beforeMount的执行:${document.getElementById('test').innerText}`)
},
mounted() {
//获取到数据,内存中的数据真实的挂载到页面中,Vue实例创建完成
console.log(`这是mounted的执行:${document.getElementById('test').innerText}`)
},
beforeUpdate() {
console.log('------------------更新阶段------------------')
//页面上的数据还是以前的，内存中的数据是最新的
console.log(`这是beforeUpdate的执行,页面数据:${document.getElementById('test').innerText}`)
console.log(`这是beforeUpdate的执行,data数据:${this.name}`)
},
updated() {
//页面上的数据和内存中的数据都是最新的
console.log(`这是updated的执行,页面数据:${document.getElementById('test').innerText}`)
console.log(`这是updated的执行,data数据:${this.name}`)
},
beforeDestroy() {
console.log('------------------销毁阶段------------------')
// 仍可以使用data与method方法
console.log(`这是beforeDestroy的执行:${this.name}`)
},
destroyed() {
// 已经销毁data与method方法
console.log(`这是destroyed的执行:${this.name}`)
},
}
</script>
