對于剛接觸vue的同學會經常遇到數據更新了但是模板沒有更新的問題，下面將結合vue的響應式特性以及異步更新機制分析常見的錯誤：
異步更新帶來的數據響應式誤解
異步數據的處理基本是一定會遇到的，處理不好就會遇到數據不更新的問題，但有一種情況是在未正確處理的情況下也能正常更新，這就會造成一種誤解，詳情如下所示：
模板
<div id="app">
<h3>{{dataObj.text}}</h3>
</div>
js
new Vue({
el: '#app',
data: {
dataObj: {}
},
ready: function () {
var self = this;
/**
* 異步請求模擬
*/
setTimeout(function () {
self.dataObj = {};
self.dataObj['text'] = 'new text';
}, 3000);
}
})
上面的代碼非常簡單，我們都知道vue中在data里面聲明的數據才具有響應式的特性，所以我們一開始在data中聲明了一個dataObj空對象，然后在異步請求中執行了兩行代碼，如下：
self.dataObj = {};
self.dataObj['text'] = 'new text';
首先清空原始數據，然后添加一個text屬性并賦值。到這里為止一切都如我們所想的，數據和模板都更新了。
那么問題來了，dataObj.text具有響應式的特性嗎？
模板更新了，應該具有響應式特性，如果這么想那么你就已經走入了誤區，一開始我們并沒有在data中聲明.text屬性，所以該屬性是不具有響應式的特性的。
但模板切切實實已經更新了，這又是怎么回事呢？
那是因為vue的dom更新是異步的，即當setter操作發生后，指令并不會立馬更新，指令的更新操作會有一個延遲，當指令更新真正執行的時候，此時.text屬性已經賦值，所以指令更新模板時得到的是新值。
具體流程如下所示：
所以真正的觸發更新操作是self.dataObj = {};這一句引起的，所以單看上述例子，具有響應式特性的數據只有dataObj這一層，它的子屬性是不具備的。
對比示例：
模板
<div id="app">
<h3>{{dataObj&&dataObj.text}}</h3>
</div>
js
new Vue({
el: '#app',
data: {
dataObj: {}
},
ready: function () {
var self = this;
/**
* 異步請求模擬
*/
setTimeout(function () {
self.dataObj['text'] = 'new text';
}, 3000);
}
})
上述例子的模板是不會更新的。
Vue.$set
通過$set方法可以將添加一個具備響應式特性的屬性，并且其子屬性也具備響應式特性，但是必須是新屬性才可以，如果是本身已有的屬性該方法是不起作用的。
new Vue({
el: '#app',
data: {
dataObj: {}
},
ready: function () {
var self = this;
/**
* 異步請求模擬
*/
setTimeout(function () {
var data = {
name: 'xiaofu',
age: 18
};
var data01 = {
name: 'yangxiaofu',
age: 19
};
self.dataObj['person'] = {};
self.$set('dataObj.info', data);
self.$set('dataObj.person', data01);
}, 3000);
}
})
如上所示， .person屬性是不具備響應式特性的。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
