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

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

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

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

Vue為了實現(xiàn)在數(shù)據(jù)變化時對頁面重新渲染。所以在初始化時對傳進來來的數(shù)據(jù)對象進行監(jiān)聽。

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

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

當你把一個普通的 JavaScript 對象傳入 Vue 實例作為 data 選項，Vue 將遍歷此對象所有的 property，并使用 Object.defineProperty 把這些 property 全部轉為 getter/setter。

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

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

如果初始值沒給這個變量Vue還能監(jiān)聽嗎？

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

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

如果后面使用了這個變量，那么后面對這個變量進行更新時頁面不會變化的，因為vue根本沒監(jiān)聽這個對象。

解決辦法：

（1）一開始就傳入這個變量；

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

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

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

有一個神奇的測試題：

<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 時，順便更新了 span-b

視圖更新其實是異步的。

1、當我們讓 a 從 ‘a1’ 變成 ‘a2’ 時，Vue 會監(jiān)聽到這個變化，但是 Vue 并不能馬上更新視圖，因為 Vue 是使用 Object.defineProperty 這樣的方式來監(jiān)聽變化的，監(jiān)聽到變化后會創(chuàng)建一個視圖更新任務到任務隊列里。（文檔有寫）

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

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

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

最新評論