資訊專(zhuān)欄INFORMATION COLUMN
摘要：網(wǎng)上關(guān)于生命周期的文章一抓一大把看了很多收獲是有的但紙上得來(lái)終覺(jué)淺最終還是決定自己上手加深一下印象測(cè)試版本程序設(shè)計(jì)如下程序運(yùn)行結(jié)果如下加載時(shí)卸載時(shí)以下是我的總結(jié)不對(duì)的地方歡迎拍磚鉤子調(diào)用時(shí)獲取中的屬性得到獲取中的屬性
網(wǎng)上關(guān)于vue生命周期的文章一抓一大把, 看了很多, 收獲是有的, 但紙上得來(lái)終覺(jué)淺. 最終還是決定自己上手,加深一下印象
測(cè)試版本
vue 2.5.2
程序設(shè)計(jì)如下
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é)果如下:
加載時(shí):
卸載時(shí):
以下是我的總結(jié)(不對(duì)的地方歡迎拍磚):
beforeCreate 鉤子調(diào)用時(shí):
獲取data中的屬性 得到undefined
獲取props中的屬性 報(bào)錯(cuò)
獲取computed中的屬性 得到undefined
其他鉤子函數(shù)中均能正常的獲取到所有的值
值得注意的是 在created鉤子執(zhí)行后 computed 屬性函數(shù)中可以訪問(wèn)到 data props methods 中的值
甚至在destroyed 函數(shù)中依然能夠正常的訪問(wèn)到這些值.
歡迎挑錯(cuò) ^_^
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/90186.html
摘要：如上圖，該圖沒(méi)有現(xiàn)成的，所以是在大師原有的上修改出來(lái)的我們?cè)陂_(kāi)發(fā)過(guò)程中，通常以當(dāng)天下午下班前十分鐘為節(jié)點(diǎn)，合并當(dāng)日修復(fù)的代碼到分支另外要說(shuō)的就是分支的命名了，通常我們已即將發(fā)布的版本號(hào)為后綴添加到后面，例如等等。 showImg(https://segmentfault.com/img/remote/1460000015968861?w=1920&h=1080); 首發(fā)公眾號(hào)：Andr...
摘要：和下面手動(dòng)調(diào)用在控制臺(tái)中輸入在這個(gè)階段會(huì)銷(xiāo)毀實(shí)例，生命周期結(jié)束。外部實(shí)例中的函數(shù)顯示的效果參考鏈接組件的生命周期詳解生命周期 為什么要認(rèn)識(shí)Vue的生命周期 Vue的生命周期是一個(gè)非常重要的點(diǎn)，如果不懂Vue的生命周期，那么很多時(shí)候，就不知道Vue的實(shí)際渲染時(shí)機(jī)，程序中會(huì)出現(xiàn)各種bug。 因此，學(xué)習(xí)Vue的生命周期是非常用必要的。 showImg(https://segmentfault...
摘要：注意看下此時(shí)還是沒(méi)有選項(xiàng)鉤子函數(shù)和間的生命周期在這一階段發(fā)生的事情還是比較多的。鉤子函數(shù)和鉤子函數(shù)間的生命周期當(dāng)發(fā)現(xiàn)中的數(shù)據(jù)發(fā)生了改變，會(huì)觸發(fā)對(duì)應(yīng)組件的重新渲染，先后調(diào)用和鉤子函數(shù)。 首先，每個(gè)Vue實(shí)例在被創(chuàng)建之前都要經(jīng)過(guò)一系列的初始化過(guò)程,這個(gè)過(guò)程就是vue的生命周期。首先看一張圖吧~這是官方文檔上的圖片相信大家一定都會(huì)很熟悉： showImg(https://segmentfau...
閱讀 486·2023-04-25 17:26
閱讀 1504·2021-08-05 09:58
閱讀 1970·2019-08-30 13:17
閱讀 953·2019-08-28 17:52
閱讀 1069·2019-08-26 18:27
閱讀 1424·2019-08-26 14:05
閱讀 3624·2019-08-26 14:05
閱讀 1598·2019-08-26 10:45
