定義:要用的屬性不存在,要通過已有屬性計算得來。
例如:已知姓和名,求全名。
原理:底層借助了objcet.defineproperty方法提供的getter和setter。
姓:名:全名:}
優勢:與methods實現相比,內部有快取機制(復用),效率更高,除錯方便。
備註:(1)計算屬性最終會出現在vm上,直接讀取使用即可。
(2)如果計算屬性要被修改,那必須寫set函式去響應修改,且set中要引起計算時依賴的資料發生改變。
簡寫形式
computed:}
備註(使用場景):當不需要set()改變依賴資料時可以使用簡寫形式,呼叫方式不變。
當被監視的屬性變化時, **函式自動呼叫, 進行相關操作
監視的屬性必須存在,才能進行監視!!
監視的兩種寫法:
(1)new vue時傳入watch配置
使用:定義:watch:
}}
(2)通過vm.$watch監視
定義在vue外面的vm.$watch('ishot',
})
深度監視
(1)vue中的watch預設不監測物件內部值的改變(一層)。
(2)配置deep:true可以監測物件內部值改變(多層)。
numbers:}
監視屬性簡寫:
(1)new vue時傳入watch配置簡寫:
ishot(newvalue,oldvalue)
備註(使用場景):當不需要immediate和deep時可以使用
(2)通過vm.$watch監視簡寫:
vm.$watch('ishot',(newvalue,oldvalue)=>)
備註(使用場景):當不需要immediate和deep時可以使用
computed能完成的功能,watch都可以完成。
watch能完成的功能,computed不一定能完成,例如:watch可以進行非同步操作。
watch:,1000);}, lastname(val)
}
備註:(1)所被vue管理的函式,最好寫成普通函式,這樣this的指向才是vm 或 元件例項物件。
(2)所有不被vue所管理的函式(定時器的**函式、ajax的**函式等、promise的**函式),最好寫成箭頭函式,這樣this的指向才是vm 或 元件例項物件。
Vue基礎語法(四)
vue的生命週期鉤子函式 所有的生命週期鉤子自動繫結this到上下文例項中,因此可以訪問資料對property和方法進行運算,這意味著不蹦使用箭頭函式來定義乙個生命週期方法。參考官方文件 生命週期圖 生命週期鉤子一共有十乙個,這裡只寫八個 template div div template scri...
04 Vue的基礎語法(計算屬性)
計算屬性中也可以進行一些更加複雜的操作 每個計算屬性都包含乙個getter和乙個setter 在上面的例子中,我們只是使用getter來讀取。在某些情況下,你也可以提供乙個setter方法 不常用 在需要寫setter的時候,如下 我們可能會考慮這樣的乙個問題 methods和computed看起來...
vue的計算和監視屬性,附一小例項
1.計算屬性 在computed屬性物件中定義計算屬性的方法 在頁面中使用 來顯示計算的結果 2.監視屬性 通過通過vm物件的 watch 或watch配置來監視指定的屬性 當屬性變化時,函式自動呼叫,在函式內部進行計算 3.計算屬性高階 通過getter setter實現對屬性資料的顯示和監視 計...