手機: 18919834768
電話熱線: 0931-7603702
網站知識
當前位置: 主頁 > 網站知識

vue3實例和生命周期

發布時間:2023-04-17 16:59:56???來自:未知???編輯:蘭州啟點網絡 www.ing-cap.com.cn

 

學習要點:
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.ing-cap.com.cn)整理發布!

? QQ咨詢

建站咨詢 售前咨詢 私人訂制 售后技術

? 電話咨詢

0931-7603702
(早9:00-晚10:00)

? 微信咨詢

掃碼關注
點點租

? 返回頂部
国产精品va无码二区_国产肥熟女视频一区二区三区_欧美亚洲另类在线一区_日韩亚洲中文字幕