什么是數(shù)據(jù)響應(yīng)式？

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

上面的代碼中，如果修改vm.n，那么UI中的n就會(huì)通過(guò)變化來(lái)響應(yīng)我，這就是數(shù)據(jù)響應(yīng)式。

VUE對(duì)data做了什么？

當(dāng)給一個(gè)vue實(shí)例傳入data的時(shí)候，vue內(nèi)部會(huì)對(duì)傳入的data添加監(jiān)聽(tīng)和代理。

大概工作原理為：

傳入data

vue把原本的data用一個(gè)newdata保存下來(lái)

newdata中的屬性會(huì)替換掉原來(lái)的data，（監(jiān)聽(tīng)過(guò)程）

修改data值

由于data已經(jīng)被監(jiān)聽(tīng)，實(shí)際上修改的是newdata的內(nèi)容

newdata會(huì)把修改后的數(shù)據(jù)傳給data（代理過(guò)程）

最后把結(jié)果返回給vm

怎么做到監(jiān)聽(tīng)和代理？

使用Object.defineProperty可以給對(duì)象添加屬性和getter/setter來(lái)監(jiān)控?cái)?shù)據(jù)的讀寫。具體使用方法：

Object.defineProperty()?developer.mozilla.org

修改了原來(lái)data中不包含的key怎么辦？

由于這個(gè)key沒(méi)有被VUE監(jiān)聽(tīng)，不能正常的更新UI。

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

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

data中有數(shù)組呢？

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

VUE篡改了數(shù)組的API，直接調(diào)用這些被改動(dòng)過(guò)的API就會(huì)更新UI，具體如下：

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

以上就是我在學(xué)習(xí)過(guò)程中理解的VUE的數(shù)據(jù)響應(yīng)式，觀點(diǎn)僅供參考，如有錯(cuò)誤歡迎指正。

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來(lái)咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。