摘要:網上關于生命周期的文章一抓一大把看了很多收獲是有的但紙上得來終覺淺最終還是決定自己上手加深一下印象測試版本程序設計如下程序運行結果如下加載時卸載時以下是我的總結不對的地方歡迎拍磚鉤子調用時獲取中的屬性得到獲取中的屬性
網上關于vue生命周期的文章一抓一大把, 看了很多, 收獲是有的, 但紙上得來終覺淺. 最終還是決定自己上手,加深一下印象
測試版本
vue 2.5.2
程序設計如下
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) } }
程序運行結果如下:
加載時:
卸載時:
以下是我的總結(不對的地方歡迎拍磚):
beforeCreate 鉤子調用時:
獲取data中的屬性 得到undefined
獲取props中的屬性 報錯
獲取computed中的屬性 得到undefined
其他鉤子函數中均能正常的獲取到所有的值
值得注意的是 在created鉤子執行后 computed 屬性函數中可以訪問到 data props methods 中的值
甚至在destroyed 函數中依然能夠正常的訪問到這些值.
歡迎挑錯 ^_^
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/90186.html
摘要:如上圖,該圖沒有現成的,所以是在大師原有的上修改出來的我們在開發過程中,通常以當天下午下班前十分鐘為節點,合并當日修復的代碼到分支另外要說的就是分支的命名了,通常我們已即將發布的版本號為后綴添加到后面,例如等等。 showImg(https://segmentfault.com/img/remote/1460000015968861?w=1920&h=1080); 首發公眾號:Andr...
閱讀 472·2023-04-25 17:26
閱讀 1495·2021-08-05 09:58
閱讀 1959·2019-08-30 13:17
閱讀 944·2019-08-28 17:52
閱讀 1061·2019-08-26 18:27
閱讀 1413·2019-08-26 14:05
閱讀 3608·2019-08-26 14:05
閱讀 1586·2019-08-26 10:45