<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 中的數(shù)據(jù)還沒有初始化，所以輸出的應該是undefined
? ? ? console.log(`這是beforeCreate的執(zhí)行:${this.name}`)
? ? },
? ? created() {
? ? ? //這里數(shù)據(jù)已經(jīng)初始化了，可以輸出data中的內容
? ? ? console.log(`這是Create的執(zhí)行:${this.name}`)
? ? ? //因為在created（）中還沒有渲染到DOM頁面，所以在渲染前修改，選的數(shù)據(jù)是下面的內容
? ? ? this.name = '在渲染到DOM之前就修改內容'
? ? },
? ? beforeMount() {
? ? ? console.log('------------------掛載階段------------------')
? ? ? //開始編譯數(shù)據(jù),但是當前數(shù)據(jù)只在內存中渲染,并沒有真實的渲染到html頁面上
? ? ? console.log(`這是beforeMount的執(zhí)行:${document.getElementById('test').innerText}`)
? ? },
? ? mounted() {
? ? ? //獲取到數(shù)據(jù),內存中的數(shù)據(jù)真實的掛載到頁面中,Vue實例創(chuàng)建完成
? ? ? console.log(`這是mounted的執(zhí)行:${document.getElementById('test').innerText}`)
? ? },
? ? beforeUpdate() {
? ? ? console.log('------------------更新階段------------------')
? ? ? //頁面上的數(shù)據(jù)還是以前的，內存中的數(shù)據(jù)是最新的
? ? ? console.log(`這是beforeUpdate的執(zhí)行,頁面數(shù)據(jù):${document.getElementById('test').innerText}`)
? ? ? console.log(`這是beforeUpdate的執(zhí)行,data數(shù)據(jù):${this.name}`)
? ? },
? ? updated() {
? ? ? //頁面上的數(shù)據(jù)和內存中的數(shù)據(jù)都是最新的
? ? ? console.log(`這是updated的執(zhí)行,頁面數(shù)據(jù):${document.getElementById('test').innerText}`)
? ? ? console.log(`這是updated的執(zhí)行,data數(shù)據(jù):${this.name}`)
? ? },
? ? beforeDestroy() {
? ? ? console.log('------------------銷毀階段------------------')
? ? ? // 仍可以使用data與method方法
? ? ? console.log(`這是beforeDestroy的執(zhí)行:${this.name}`)
? ? },
? ? destroyed() {
? ? ? // 已經(jīng)銷毀data與method方法
? ? ? console.log(`這是destroyed的執(zhí)行:${this.name}`)
? ? },
? }
</script>
