計(jì)算屬性和偵聽(tīng)器
計(jì)算屬性:相當(dāng)于 tp 里的讀取器和修改器
計(jì)算屬性和方法的對(duì)比:
計(jì)算屬性是基于它們的響應(yīng)式依賴進(jìn)行緩存的。(比如上面例子的 Date.now,模板上的時(shí)間戳只會(huì)計(jì)算一次并緩存,不會(huì)隨時(shí)間更新。)
默認(rèn)使用“讀取器”,使用“修改器”的方法如下:
偵聽(tīng)器:相應(yīng)數(shù)據(jù)變化,并處理該數(shù)據(jù)變化帶來(lái)的其他變動(dòng)。
Class 與 Style 綁定
簡(jiǎn)而言之就是 v-bind:class (:class) 和 v-bind:style (:style) 經(jīng)過(guò)特別強(qiáng)化,可以傳遞數(shù)組或?qū)ο蟆?/p>
用在組件上:
條件渲染
v-if 用在 <template> 上,當(dāng)為 false 時(shí) template 不顯示。
v-if v-else-if v-else
添加key 屬性,防止 Vue 自行復(fù)用元素。
v-show 只變更 display 。
經(jīng)常改變請(qǐng)用 v-show ,很少改變用 v-if 。
不要將 v-if 與 v-for 用在同一個(gè)元素上!
列表渲染
維護(hù)狀態(tài)
數(shù)據(jù)項(xiàng)順序改變時(shí),Vue 將不會(huì)移動(dòng) Dom 來(lái)匹配數(shù)據(jù)項(xiàng)的順序,而是就地更新每個(gè)元素。
所以如果要在重新渲染時(shí)維護(hù)住數(shù)據(jù)項(xiàng),需要加 key 屬性。
數(shù)組更新檢測(cè)
變異方法
# push()
# pop()
# shift()
# unshift()
# splice()
# sort()
# reverse()
這些函數(shù)會(huì)觸發(fā)視圖更新,因?yàn)?Vue 講被監(jiān)聽(tīng)的數(shù)組的變異方法進(jìn)行了包裹。
(會(huì)引起原數(shù)組變化的方法,稱為變異方法。)
替換數(shù)組
手動(dòng)非變異方法替換原數(shù)組。 用一個(gè)含有相同元素的數(shù)組去替換原來(lái)的數(shù)組是非常高效的操作。
注意事項(xiàng)
Vue 無(wú)法檢測(cè)以下數(shù)組的變動(dòng):
當(dāng)你利用索引直接設(shè)置一個(gè)數(shù)組項(xiàng)時(shí),例如:vm.items[indexOfItem] = newValue
當(dāng)你修改數(shù)組的長(zhǎng)度時(shí),例如:vm.items.length = newLength
解決第一個(gè)問(wèn)題的方案:
解決第二個(gè)問(wèn)題:
對(duì)象變更檢測(cè)注意事項(xiàng)
Vue 不能檢測(cè)對(duì)象的添加或刪除??梢允褂?Vue.set(object, propertyName, value) 方法向嵌套對(duì)象添加響應(yīng)式屬性。
為已有對(duì)象賦值多個(gè)新屬性,應(yīng)該用兩個(gè)對(duì)象的屬性創(chuàng)建一個(gè)新對(duì)象。
顯示過(guò)濾/排序的結(jié)果
可以使用一個(gè) 計(jì)算屬性 來(lái)返回過(guò)濾/排序后的數(shù)組:





暫無(wú)評(píng)論,快來(lái)評(píng)論吧!