vue的計算屬性與watch

2021-10-23 02:20:28 字數 883 閱讀 9699

vue中計算屬性,監聽的物件為深度監聽,資料會進行快取,依賴修改了才會進行重新整理

watch,監聽的物件只是物件的位址,並不會對屬性進行監聽,如果要監聽屬性,可以在在方法名為 『obj.attr』 監聽attr屬性。可以設定deep為true,不過效能開銷比較大,watch當頁面剛載入,不會執行,只有當堅挺的物件修改後才會執行,如果要馬上執行,可以給immediate設定為true。

頁面響應式監聽:`

arr1:[1

,2,3

,4];

通過arr1[0]

=666,無法被監聽到

arr2:[,

]arr2[0]

.name =

'cc'

;此時的更改是可以被監聽到,並且觸發檢視更新

物件已經初始化過的屬性被修改,則可以被監聽到,如果是新增屬性,則監聽不到,如果要監聽新增的屬性,可以用$set方法

watch中監聽陣列(不需要設定deep為true):

// 通過push,unshift等方法改變陣列可以通過watch監聽到

this.namelist.push('瑤')

// 直接通過陣列下標進行修改陣列無法通過watch監聽到

this.namelist[2] = '愛'

// 通過$set修改陣列可以通過watch監聽到

this.$set(this.namelist, 2, '張')

// 利用陣列splice方法修改陣列可以通過watch監聽到

this.namelist.splice(2, 1, '蔣如意')

watch中監聽物件屬性(需要設定deep為true):

this.$set(obj, 屬性名, value)

Vue的計算屬性與watch

一 vue的計算屬性是什麼?它的計算屬性是computed 二 計算屬性computed的特點有哪些?doctype html utf 8 title script head text v model firstname text v model lastname div newvue comput...

vue學習(四)計算屬性和watch

computed計算屬性是用來宣告式的描述乙個值依賴了其它的值,當你在模板裡把資料繫結到乙個計算屬性上時.vue 會在其依賴的任何值導致該計算屬性改變時更新 dom。這個功能非常強大,它可以讓你的 更加宣告式 資料驅動並且易於維護。watch監聽的是你定義的變數,當你定義的變數的值發生變化時,呼叫對...

1 3 Vue 計算屬性及watch

1.計算屬性的作用及使用 計算屬性 computed 的作用 在乙個計算屬性裡可以完成各種複雜的邏輯,包括運算 函式呼叫等,只要最終返回乙個結果就可以。計算屬性還可以依賴多個vue例項的資料,只要其中任一資料變化,計算屬性就會重新執行,檢視也會更新。計算屬性 computed 與 method方法的...