學習要點：
1.應用實例
2.生命周期
本節課我們來開始學習 Vue3.x 的應用實例和生命周期的問題。
一．應用實例
1. 首先，回顧一下：我們創建一個應用實例，具體方案如下：
// 創建一個應用實例，{}里是選項對象
const app = Vue.createApp({})
// 這里的 app 是實例
console.log(app)
// app.mount()這個返回的是一個代理對象，并不返回應用本身
// 它返回的是這個組件本身，也就是根組件
const vm = app.mount('#app')
PS：.mount()方法作用是掛載 DOM 元素，是 Vue 的應用 API，并允許鏈式調用；
PS：在“API 參考”中找到“應用 API”目錄，可以參考更多的應用 API；
PS：目前學習了兩個，另一個是注冊全局組件的.component()；
2. 由于，.mount()返回的是根組件實例對象，那么它可以直接調用 data()內的數據；
const app = Vue.createApp({
data() {
return {
count : 100
}
}
})
const vm = app.mount('#app')
console.log(vm.count)
二．生命周期
1. 首先，可以參考一下文檔中生命周期的圖示，看下它執行的流程；
2. 其次，我們要了解一下常用的聲明周期的鉤子，具體如下：
(1) .created 鉤子：當實例被創建后會執行(在模板渲染前執行，一般用于初始化屬性值)；
(2) .mounted 鉤子：當實例被掛載后會執行(在模板渲染完成后執行，此時可以操作 DOM)；
(3) .updated 鉤子：當虛擬 DOM 被修改后會執行；
<div id="app">
<div id="abc">{{count}}div>
div>
// 創建一個應用實例，{}里是選項對象
const app = Vue.createApp({
data() {
return {
count : 0
}
},
// 初始化
created() {
this.count = 100
console.log('初始化~')
// 無法獲取 DOM
//console.log(document.getElementById('abc').innerText)
},
// 掛載后執行
mounted() {
// 獲取 DOM
console.log(document.getElementById('abc').innerText)
},
// 數據被修改后執行
updated() {
console.log('數據被修改了~')
}
})
本文由:蘭州啟點網絡（
www.syzhibo.net)整理發布!
啟點CMS演示地址及賬號
