Vue不能檢測陣列和物件的變化

2022-05-03 20:48:12 字數 984 閱讀 8392

上班第一天沒事做寫篇部落格。。。

前段時間出去面試了下,《vue不能檢測陣列和物件的變化》這個問題很高頻提起,今天來聊下這個問題

先看官網文件說明:

情況一:新增的值不會觸發響應(刪除同理)

情況二:原有的值改變會觸發響應

情況三:vue提供的方法$set可以觸發響應

以上3個例子總結了物件增/刪,模板沒有響應的實際情況,陣列也是類似操作就不舉例了,

其實就是物件、陣列資料的增/刪徐用vue提供的方法$set,官網例子:

物件一次性新增多個屬性:

巴拉啦說了一大堆,其實就是一句話物件屬性的增/刪、陣列的元素增/刪用vue提供的方法最為穩妥,不然容易導致資料無響應

提一嘴vue2.0與3.0資料的雙向繫結區別:

2.0:使用object.defineproperty來劫持物件屬性的 geter 和 seter 操作,當資料發生改變發出通知

3.0:使用es6的新特性porxy來劫持資料,當資料改變時發出通知

面試的時候可以用這個延伸vue3的一些話題,

好的面試是面試官提出乙個知識點,然後面試者作出自己的理解並主動延伸相關知識點的話題

貼個大佬關於深入了解object.defineproperty的部落格寫的很好:

Vue監聽陣列和物件的變化

工作中常會遇到一些資料變化了,但是檢視未更新的情況,自己寫了一些demo簡單測試了一下。ishot2020 07 17下午02.08.22 yes 可以監聽 no 不可以監聽 h1 nums div button click handlearr add 陣列新增 button button clic...

vue中如何檢測陣列的變化

我們知道,object.defineproperty不能檢測陣列的操作,因此需要攔截陣列的操作 push,unshift,splice等 並重寫他們,使之可以對新操作的資料進行檢測。攔截陣列方法的思路 快取陣列的操作方法,直接快取array.prototype就行 使用乙個 陣列,重寫 陣列的操作方...

vue監聽陣列 物件變化

1.vue單獨監聽乙個陣列或者乙個物件變化 watch 2.如果你想監聽乙個陣列中多個物件是否變化,請看這裡!watch 沒錯!新增乙個deep true就可以實現對乙個陣列中多個物件是否變化進行監聽啦?3.watch中除了deep外,還有乙個屬性immediate immediate表示在watc...