對(duì)于剛接觸vue的同學(xué)會(huì)經(jīng)常遇到數(shù)據(jù)更新了但是模板沒(méi)有更新的問(wèn)題，下面將結(jié)合vue的響應(yīng)式特性以及異步更新機(jī)制分析常見(jiàn)的錯(cuò)誤：

異步更新帶來(lái)的數(shù)據(jù)響應(yīng)式誤解

異步數(shù)據(jù)的處理基本是一定會(huì)遇到的，處理不好就會(huì)遇到數(shù)據(jù)不更新的問(wèn)題，但有一種情況是在未正確處理的情況下也能正常更新，這就會(huì)造成一種誤解，詳情如下所示：

模板

<div id="app">    <h2>{{dataObj.text}}</h2></div>

js

new Vue({      el: '#app',      data: {        dataObj: {}      },      ready: function () {        var self = this;        /**         * 異步請(qǐng)求模擬         */        setTimeout(function () {          self.dataObj = {};           self.dataObj['text'] = 'new text';        }, 3000);      }    })

上面的代碼非常簡(jiǎn)單，我們都知道vue中在data里面聲明的數(shù)據(jù)才具有響應(yīng)式的特性，所以我們一開(kāi)始在data中聲明了一個(gè)dataObj空對(duì)象，然后在異步請(qǐng)求中執(zhí)行了兩行代碼，如下：

self.dataObj = {}; self.dataObj['text'] = 'new text';

首先清空原始數(shù)據(jù)，然后添加一個(gè)text屬性并賦值。到這里為止一切都如我們所想的，數(shù)據(jù)和模板都更新了。

那么問(wèn)題來(lái)了，dataObj.text具有響應(yīng)式的特性嗎？

模板更新了，應(yīng)該具有響應(yīng)式特性，如果這么想那么你就已經(jīng)走入了誤區(qū)，一開(kāi)始我們并沒(méi)有在data中聲明.text屬性，所以該屬性是不具有響應(yīng)式的特性的。

但模板切切實(shí)實(shí)已經(jīng)更新了，這又是怎么回事呢？

那是因?yàn)関ue的dom更新是異步的，即當(dāng)setter操作發(fā)生后，指令并不會(huì)立馬更新，指令的更新操作會(huì)有一個(gè)延遲，當(dāng)指令更新真正執(zhí)行的時(shí)候，此時(shí).text屬性已經(jīng)賦值，所以指令更新模板時(shí)得到的是新值。

具體流程如下所示：

1. self.dataObj = {};發(fā)生setter操作
2. vue監(jiān)測(cè)到setter操作，通知相關(guān)指令執(zhí)行更新操作
3. self.dataObj['text'] = 'new text';賦值語(yǔ)句
4. 指令更新開(kāi)始執(zhí)行

所以真正的觸發(fā)更新操作是self.dataObj = {};這一句引起的，所以單看上述例子，具有響應(yīng)式特性的數(shù)據(jù)只有dataObj這一層，它的子屬性是不具備的。

對(duì)比示例：

模板

<div id="app">    <h2>{{dataObj&&dataObj.text}}</h2></div>

js

new Vue({      el: '#app',      data: {        dataObj: {}      },      ready: function () {        var self = this;        /**         * 異步請(qǐng)求模擬         */        setTimeout(function () {          self.dataObj['text'] = 'new text';        }, 3000);      }    })

上述例子的模板是不會(huì)更新的。

Vue.$set

通過(guò)$set方法可以將添加一個(gè)具備響應(yīng)式特性的屬性，并且其子屬性也具備響應(yīng)式特性，但是必須是新屬性才可以，如果是本身已有的屬性該方法是不起作用的。

new Vue({      el: '#app',      data: {        dataObj: {}      },      ready: function () {        var self = this;        /**         * 異步請(qǐng)求模擬         */        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屬性是不具備響應(yīng)式特性的。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持武林網(wǎng)。