資訊專欄INFORMATION COLUMN
摘要：網(wǎng)上關(guān)于生命周期的文章一抓一大把看了很多收獲是有的但紙上得來終覺淺最終還是決定自己上手加深一下印象測試版本程序設(shè)計如下程序運(yùn)行結(jié)果如下加載時卸載時以下是我的總結(jié)不對的地方歡迎拍磚鉤子調(diào)用時獲取中的屬性得到獲取中的屬性
網(wǎng)上關(guān)于vue生命周期的文章一抓一大把, 看了很多, 收獲是有的, 但紙上得來終覺淺. 最終還是決定自己上手,加深一下印象
測試版本
vue 2.5.2
程序設(shè)計如下
function log() {
try {
console.log("%c%s", "color: blue", `===============data:foo ---> ${this.foo}=====================`)
} catch (e) {
}
try {
console.log("%c%s", "color: blue", `===============props:bar ---> ${this.bar}=====================`)
} catch (e) {
}
try {
console.log("%c%s", "color: blue", `===============computed:baz ---> ${this.baz}=====================`)
} catch (e) {
}
try {
console.log("%c%s", "color: blue", `===============computed:bzz ---> ${this.bzz}=====================`)
} catch (e) {
}
}
export default {
data() {
return {
foo: "foo"
}
},
props: {
bar: {type: String, "default": "bar"}
},
computed: {
baz() {
return this.foo + this.bar
},
bzz() {
return this.method()
}
},
beforeCreate() {
console.log("%c%s", "color: red", "
===============beforeCreate called===============")
log.call(this)
},
created() {
console.log("%c%s", "color: red", "
===============created called===============")
log.call(this)
},
mounted() {
console.log("%c%s", "color: red", "
===============mounted called===============")
log.call(this)
},
methods: {
method() {
return "method"
}
},
beforeDestroy() {
console.log("%c%s", "color: red", "
===============beforeDestroy called===============")
log.call(this)
},
destroyed() {
console.log("%c%s", "color: red", "
===============destroyed called===============")
log.call(this)
}
}
程序運(yùn)行結(jié)果如下:
加載時:
卸載時:
以下是我的總結(jié)(不對的地方歡迎拍磚):
beforeCreate 鉤子調(diào)用時:
獲取data中的屬性 得到undefined
獲取props中的屬性 報錯
獲取computed中的屬性 得到undefined
其他鉤子函數(shù)中均能正常的獲取到所有的值
值得注意的是 在created鉤子執(zhí)行后 computed 屬性函數(shù)中可以訪問到 data props methods 中的值
甚至在destroyed 函數(shù)中依然能夠正常的訪問到這些值.
歡迎挑錯 ^_^
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/90186.html
摘要：如上圖，該圖沒有現(xiàn)成的，所以是在大師原有的上修改出來的我們在開發(fā)過程中，通常以當(dāng)天下午下班前十分鐘為節(jié)點(diǎn)，合并當(dāng)日修復(fù)的代碼到分支另外要說的就是分支的命名了，通常我們已即將發(fā)布的版本號為后綴添加到后面，例如等等。 showImg(https://segmentfault.com/img/remote/1460000015968861?w=1920&h=1080); 首發(fā)公眾號：Andr...
摘要：注意看下此時還是沒有選項(xiàng)鉤子函數(shù)和間的生命周期在這一階段發(fā)生的事情還是比較多的。鉤子函數(shù)和鉤子函數(shù)間的生命周期當(dāng)發(fā)現(xiàn)中的數(shù)據(jù)發(fā)生了改變，會觸發(fā)對應(yīng)組件的重新渲染，先后調(diào)用和鉤子函數(shù)。 首先，每個Vue實(shí)例在被創(chuàng)建之前都要經(jīng)過一系列的初始化過程,這個過程就是vue的生命周期。首先看一張圖吧~這是官方文檔上的圖片相信大家一定都會很熟悉： showImg(https://segmentfau...
閱讀 559·2023-04-25 17:26
閱讀 1560·2021-08-05 09:58
閱讀 2019·2019-08-30 13:17
閱讀 1015·2019-08-28 17:52
閱讀 1127·2019-08-26 18:27
閱讀 1467·2019-08-26 14:05
閱讀 3682·2019-08-26 14:05
閱讀 1684·2019-08-26 10:45
