前言：其實使用vue的都知道，vue聲明在data中的屬性都是響應式的，也就是，我們在修改data中的屬性時，一般頁面都能實時更新。但是由于 JavaScript 的限制，Vue 不能檢測數組和對象的變化。比如我們對data中的對象屬性和數組屬性進行一些修改時，無法響應式更新渲染到頁面，因此vue提供了$set這個API來解決這個限制。

一 改變數組使用$set:

其實根據vue的官網，明確說明了下面兩種改變數組的操作時無法做到響應式更新頁面的

也許此時你還會不信，就偏偏用上邊這兩種試一下，看看是否真的無法更新頁面信息，當然我也測過：

因為，之前第一次使用vue開發項目時碰到過一個奇葩的問題，我就是直接使用上邊 '1' 的這種方法改變數組，奇怪的是本地瀏覽器竟然也更新了，剛開始以為是緩存什么的問題，但是重啟項目，清空瀏覽器緩存，還是一樣能更新。最后打了個包放到測試環境看了下，確實無法渲染使用這種方式改變數組，仔細看了下官網，還是按照它這規范操作數組，問題解決。

1. 改變數組的錯誤樣式：

a.下邊使用上面不提倡的 '1'這種方法改變數組：

結果：單單看打印出來的數組信息，list對應下標的元素是改變了，但是頁面確實沒有響應式更新。

b. 看下第 '2' 中不提倡的方式：

一樣，打印出來的數組長度是變化了，但是頁面顯示的長度還是最初數組的長度

2. 使用vue約定的方式操作數組：

二 使用$set操作對象：

1. 使用vue約定的方式操作對象：

a. 往對象中新增一個屬性

b. 往對象新增多個屬性：

2. 不正確的方式操作對象：

看下無法更新對象的寫法(以添加一個屬性為例)：

到這里，因為javaScript的限制，Vue 不能檢測數組和對象的變化的問題，通過提供的$setAPI得以解決了。

3. 非對象或數組的單個屬性：

$set是vue專門針對對象和數組的問題的，關于單純的屬性，vue官方是建議在開始時根據需要直接聲明在data中，不然直接把一個data中沒聲明的屬性，在某個dom中渲染使用或者直接在某個想選中對它進行操作，控制臺肯定會報：

Property or method "xxx" is not defined on the instance but referenced during render.

總結

以上是生活随笔為你收集整理的vue项目统一响应_vue中使用$set实现深入响应式原理的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。