修改data中的obj數(shù)據(jù)的屬性

//方法一
var obj = this.obj;
obj.name = 'long';
this.obj = obj;

//方法二
Vue.set(this.obj, "password", "num");
//part1,要修改的obj對(duì)象;
//part2,要添加或者修改的屬性;
//part3,修改值；

修改data以實(shí)現(xiàn)數(shù)據(jù)響應(yīng)式

Vue為了實(shí)現(xiàn)在數(shù)據(jù)變化時(shí)對(duì)頁(yè)面重新渲染。所以在初始化時(shí)對(duì)傳進(jìn)來(lái)來(lái)的數(shù)據(jù)對(duì)象進(jìn)行監(jiān)聽(tīng)。

怎么保證你的變化我Vue能監(jiān)聽(tīng)到？

監(jiān)聽(tīng)的操作就是：對(duì)數(shù)據(jù)對(duì)象的每一個(gè)數(shù)據(jù)，內(nèi)部?jī)?nèi)部聲明一個(gè)變量，存儲(chǔ)這個(gè)傳進(jìn)來(lái)的初始值，然后開始了代理模式。后續(xù)對(duì)這個(gè)數(shù)據(jù)的讀取和修改，實(shí)際都是對(duì)這個(gè)內(nèi)部變量的getter和setter。由此所有的修改都會(huì)經(jīng)過(guò)setter，那么只需要setter的時(shí)候觸發(fā)監(jiān)聽(tīng)函數(shù)，渲染頁(yè)面即可。

當(dāng)你把一個(gè)普通的 JavaScript 對(duì)象傳入 Vue 實(shí)例作為 data 選項(xiàng)，Vue 將遍歷此對(duì)象所有的 property，并使用 Object.defineProperty 把這些 property 全部轉(zhuǎn)為 getter/setter。

每個(gè)組件實(shí)例都對(duì)應(yīng)一個(gè) watcher 實(shí)例，它會(huì)在組件渲染的過(guò)程中把“接觸”過(guò)的數(shù)據(jù) property 記錄為依賴。之后當(dāng)依賴項(xiàng)的 setter 觸發(fā)時(shí)，會(huì)通知 watcher，從而使它關(guān)聯(lián)的組件重新渲染。

那么返回給外部的，實(shí)際是一個(gè)經(jīng)過(guò)篡改的，經(jīng)過(guò)了代理的數(shù)據(jù)對(duì)象。

如果初始值沒(méi)給這個(gè)變量Vue還能監(jiān)聽(tīng)嗎？

這里面有個(gè)新手易犯的問(wèn)題是：一開始傳進(jìn)數(shù)據(jù)對(duì)象時(shí)忘記傳這個(gè)變量或無(wú)法傳這個(gè)變量。

由于 JavaScript 的限制，Vue 不能檢測(cè)數(shù)組和對(duì)象的變化。

如果后面使用了這個(gè)變量，那么后面對(duì)這個(gè)變量進(jìn)行更新時(shí)頁(yè)面不會(huì)變化的，因?yàn)関ue根本沒(méi)監(jiān)聽(tīng)這個(gè)對(duì)象。

解決辦法：

（1）一開始就傳入這個(gè)變量；

（2）對(duì)于對(duì)象：使用Vue.set或vm.$ set在使用之前監(jiān)聽(tīng)變量；

（3）對(duì)于數(shù)組，除了使用對(duì)象的Vue.set或和vm.$set 方法。尤雨溪其實(shí)對(duì)數(shù)組的如下方法進(jìn)行了封裝，使用這些方法的時(shí)候已經(jīng)進(jìn)行了set監(jiān)聽(tīng)。

• push()
• pop()
• shift()
• unshift()
• splice()
• sort()
• reverse()

有一個(gè)神奇的測(cè)試題：

<div id="app">
? ? <span class=span-a>
? ? ? {{obj.a}}?
? ? </span>
? ? <span class=span-b>
? ? ? {{obj.b}}
? ? </span>
? </div>

var app = new Vue({
? el: '#app',
? data: {
? ? obj: {
? ? ? a: 'a',
? ? }
? },
})
app.obj.a = 'a2'
app.obj.b = 'b'

最終 span-a 和 span-b 中分別展示什么字符串？答案是：a2和b

原因是視圖在顯示 span-a 的 a2 時(shí)，順便更新了 span-b

視圖更新其實(shí)是異步的。

1、當(dāng)我們讓 a 從 ‘a1’ 變成 ‘a2’ 時(shí)，Vue 會(huì)監(jiān)聽(tīng)到這個(gè)變化，但是 Vue 并不能馬上更新視圖，因?yàn)?Vue 是使用 Object.defineProperty 這樣的方式來(lái)監(jiān)聽(tīng)變化的，監(jiān)聽(tīng)到變化后會(huì)創(chuàng)建一個(gè)視圖更新任務(wù)到任務(wù)隊(duì)列里。（文檔有寫）

2、所以在視圖更新之前，要先把余下的代碼運(yùn)行完才行，也就是會(huì)運(yùn)行 b = ‘b’。

3、等到視圖更新的時(shí)候，由于 Vue 會(huì)去做 diff（文檔有寫），于是 Vue 就會(huì)發(fā)現(xiàn) a 和 b 都變了，自然會(huì)去更新 span-a 和 span-b。

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。 

最新評(píng)論