什么是數據響應式？

const vm =newVUE({data:{n:0}})

上面的代碼中，如果修改vm.n，那么UI中的n就會通過變化來響應我，這就是數據響應式。

VUE對data做了什么？

當給一個vue實例傳入data的時候，vue內部會對傳入的data添加監聽和代理。

大概工作原理為：

傳入data

vue把原本的data用一個newdata保存下來

newdata中的屬性會替換掉原來的data，（監聽過程）

修改data值

由于data已經被監聽，實際上修改的是newdata的內容

newdata會把修改后的數據傳給data（代理過程）

最后把結果返回給vm

怎么做到監聽和代理？

使用Object.defineProperty可以給對象添加屬性和getter/setter來監控數據的讀寫。具體使用方法：

Object.defineProperty()?developer.mozilla.org

修改了原來data中不包含的key怎么辦？

由于這個key沒有被VUE監聽，不能正常的更新UI。

VUE提供了一個方法來添加新的key，使用Vue.set或者this.$set來新增key，例如：

this.$set(this.object, 'newkey', 100)

data中有數組呢？

如果data中包含數組，我們又想把新數據插入數組怎么辦？我們不能提前聲明好所有的key，一個個set又太麻煩。這可如何是好？

VUE篡改了數組的API，直接調用這些被改動過的API就會更新UI，具體如下：

https://cn.vuejs.org/v2/guide/list.html#%E5%8F%98%E6%9B%B4%E6%96%B9%E6%B3%95?cn.vuejs.org

以上就是我在學習過程中理解的VUE的數據響應式，觀點僅供參考，如有錯誤歡迎指正。

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的vue data数据修改_VUE的数据响应式的全部內容，希望文章能夠幫你解決所遇到的問題。

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