Vue中我認(rèn)為需要注意的地方:
1抢呆、組件化(組件系統(tǒng))
小型翰萨、獨(dú)立和可復(fù)用組件組成了大的組件琢感,進(jìn)而構(gòu)建了頁(yè)面丢间。多個(gè)頁(yè)面形成了一個(gè)大型的應(yīng)用。
2驹针、組件
組件是一個(gè)擁有預(yù)定義選項(xiàng)的Vue實(shí)例烘挫。一個(gè) Vue 應(yīng)用由一個(gè)通過 new Vue 創(chuàng)建的根 Vue 實(shí)例,以及可選的嵌套的柬甥、可復(fù)用的組件樹組成饮六。
組件中定義一個(gè)props,相當(dāng)于定義一個(gè)attribute,props的值為attribute名稱暗甥。例如:在組件上使用v-bind:title=""喜滨,組件內(nèi)接收title,使用props: ['title'],這樣實(shí)現(xiàn)了父子組件的傳值撤防。
3虽风、響應(yīng)式數(shù)據(jù)
數(shù)據(jù)改變時(shí),視圖會(huì)進(jìn)行重渲染。當(dāng)實(shí)例被創(chuàng)建時(shí)就已經(jīng)存在于 data 中的 property 才是響應(yīng)式的辜膝。也就是說如果你添加一個(gè)新的 property无牵,這個(gè)屬性不是響應(yīng)式的。(在實(shí)例中新添加的屬性厂抖,不會(huì)觸發(fā)視圖的更新)
Object.freeze()茎毁,這會(huì)阻止修改現(xiàn)有的 property,也意味著響應(yīng)系統(tǒng)無法再追蹤變化忱辅。
Vue 實(shí)例還暴露了一些有用的實(shí)例 property 與方法七蜘。它們都有前綴
data就是實(shí)例中的data橡卤。
vm.watch 是一個(gè)實(shí)例方法损搬, a是data中的數(shù)據(jù)
vm.$watch('a', function (newValue, oldValue) {
// 這個(gè)回調(diào)將在vm.a
改變后調(diào)用
})
4碧库、實(shí)例生命周期鉤子
每個(gè) Vue 實(shí)例在被創(chuàng)建時(shí)都要經(jīng)過一系列的初始化過程,例如巧勤,需要設(shè)置數(shù)據(jù)監(jiān)聽嵌灰、編譯模板、將實(shí)例掛載到 DOM 并在數(shù)據(jù)變化時(shí)更新 DOM 等颅悉。同時(shí)在這個(gè)過程中也會(huì)運(yùn)行一些叫做生命周期鉤子的函數(shù)沽瞭,這給了用戶在不同階段添加自己的代碼的機(jī)會(huì)。
創(chuàng)建new Vue()后签舞,init Events & lifecycle秕脓,說明事件和生命周期會(huì)被初始化柒瓣。
緊接著儒搭,執(zhí)行第一個(gè)生命周期,beforeCreate芙贫。(可以做頁(yè)面路由攔截等搂鲫,組件被創(chuàng)建前)
然后,Init injection & reactivity磺平。(初始化注入及響應(yīng))
下一步魂仍,created生命周期鉤子函數(shù)。(組件實(shí)例被創(chuàng)建完成拣挪,屬性已經(jīng)綁定擦酌,但是DOM還未生成。)
下一步菠劝,beforeMount(template編譯赊舶,掛載之前)。
下一步,mounted(編譯笼平,并替換了綁定的元素)园骆。(注意:如果操作DOM,需要在此生命周期或之后)
下一步寓调,beforeUpdate(data發(fā)生改變)
下一步锌唾,updated(虛擬DOM被重新渲染然后更新數(shù)據(jù))
5、模板方法
如果你熟悉虛擬 DOM 并且偏愛 JavaScript 的原始力量夺英,你也可以不用模板晌涕,直接寫渲染 (render) 函數(shù),使用可選的 JSX 語法痛悯。
6渐排、動(dòng)態(tài)參數(shù)
vue 2.6.0中新增,可以用方括號(hào)括起來的 JavaScript 表達(dá)式作為一個(gè)指令的參數(shù)灸蟆。例如:
v-bind:[eventname]='dosomething'
對(duì)動(dòng)態(tài)參數(shù)的值的約束
動(dòng)態(tài)參數(shù)預(yù)期會(huì)求出一個(gè)字符串驯耻,異常情況下值為 null。這個(gè)特殊的 null 值可以被顯性地用于移除綁定炒考。任何其它非字符串類型的值都將會(huì)觸發(fā)一個(gè)警告可缚。
對(duì)動(dòng)態(tài)參數(shù)表達(dá)式的約束
因?yàn)槟承┳址缈崭窈鸵?hào)斋枢,放在 HTML attribute 名里是無效的帘靡。
變通的辦法是使用沒有空格或引號(hào)的表達(dá)式,或用計(jì)算屬性替代這種復(fù)雜表達(dá)式瓤帚。
在 DOM 中使用模板時(shí) (直接在一個(gè) HTML 文件里撰寫模板)描姚,還需要避免使用大寫字符來命名鍵名,因?yàn)闉g覽器會(huì)把 attribute 名全部強(qiáng)制轉(zhuǎn)為小寫戈次。