VUE 學(xué)習(xí)筆記 —— 計(jì)算屬性偵聽(tīng)器、樣式綁定、條件列表渲染
基本上無(wú)害
發(fā)布于 云南 2019-10-31 · 2.6w瀏覽 1回復(fù) 5贊

計(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ú)害
火星宛如雪花,從42號(hào)有軌電車車頂?shù)墓渭娖魃巷w落而下。
瀏覽 2.6w
5
相關(guān)推薦
最新評(píng)論 1
贊過(guò)的人 5
評(píng)論加載中...

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