|
1.實例生命周期鉤子 之前學習了創(chuàng)建Vue實例以及數(shù)據(jù)與方法，本次我將接著上次來學習，本次我學習的內(nèi)容是實例生命周期鉤子。概念：每個 Vue 實例在被創(chuàng)建時都要經(jīng)過一系列的初始化過程，例如，需要設置數(shù)據(jù)監(jiān)聽、編譯模板、將實例掛載到 DOM 并在數(shù)據(jù)變化時更新 DOM 等。同時在這個過程中也會運行一些叫做生命周期鉤子的函數(shù)，這給了用戶在不同階段添加自己的代碼的機會。詳細：在實例創(chuàng)建完成后被立即調(diào)用。在這一步，實例已完成以下的配置：數(shù)據(jù)觀測 (data observer)，property 和方法的運算，watch/event 事件回調(diào)。然而，掛載階段還沒開始，$el property 目前尚不可用 鉤子可以用來在一個實例被創(chuàng)建之后執(zhí)行代碼：| console.log('a is: ' + this.a) |
也有一些其它的鉤子，在實例生命周期的不同階段被調(diào)用，如 mounted、updated 和 destroyed。生命周期鉤子的 this 上下文指向調(diào)用它的 Vue 實例。不要在選項 property 或回調(diào)上使用箭頭函數(shù)，比如 created: () => console.log(this.a) 或vm.$watch('a', newValue => this.myMethod())。因為箭頭函數(shù)并沒有 this，this 會作為變量一直向上級詞法作用域查找，直至找到為止，經(jīng)常導致 Uncaught TypeError: Cannot read property of undefined 或 Uncaught TypeError: this.myMethod is not a function 之類的錯誤。個人理解：生命周期鉤子函數(shù)，給了用戶在不同階段添加自己的代碼的機會,也就是說中有實例被創(chuàng)建時就已經(jīng)存在于 data 中的 property才可以通過數(shù)據(jù)與方法來改變值（ 響應式）。不能直接添加，而現(xiàn)在我們通過生命周期鉤子函數(shù)，給了用戶在不同階段添加自己的代碼的機會。數(shù)據(jù)綁定最常見的形式就是使用“Mustache”語法 (雙大括號) 的文本插值：| <span>Message: {{ msg }}</span> |
標簽將會被替代為對應數(shù)據(jù)對象上 msg property 的值。無論何時，綁定的數(shù)據(jù)對象上 msg property 發(fā)生了改變，插值處的內(nèi)容都會更新。通過使用 v-once 指令，你也能執(zhí)行一次性地插值，當數(shù)據(jù)改變時，插值處的內(nèi)容不會更新。但請留心這會影響到該節(jié)點上的其它數(shù)據(jù)綁定：| <spanv-once>這個將不會改變: {{ msg }}</span> |
數(shù)據(jù)綁定最常見的形式就是使用“Mustache”語法 (雙大括號) 的文本插，值綁定的數(shù)據(jù)對象上 msg property 發(fā)生了改變，插值處的內(nèi)容都會更新（我認為可以理解為單方向響應式，一個隨著另一個改變）。如果加上v-once 指令，就是執(zhí)行一次性地插值，這樣一來，插值一次之后msg property再改變對之前插值沒有有影響，始終不變。雙大括號會將數(shù)據(jù)解釋為普通文本，而非HTML 代碼。為了輸出真正的 HTML，你需要使用v-html 指令：| <p>Using mustaches: {{ rawHtml }}</p><p>Using v-html directive: <span v-html="rawHtml"></span></p> |
這個 span 的內(nèi)容將會被替換成為 property 值 rawHtml，直接作為 HTML——會忽略解析 property 值中的數(shù)據(jù)綁定。注意，你不能使用 v-html 來復合局部模板，因為 Vue 不是基于字符串的模板引擎。反之，對于用戶界面 (UI)，組件更適合作為可重用和可組合的基本單位。本次就簡單介紹到這里，由于時間比較倉促，學習不夠深入，并且本文是參考vue官網(wǎng)上的介紹加上一些自己的理解完成的，如理解有誤還請指教。主 編 | 張禎悅 責 編 | 舒寒同行JT
|
