vue數(shù)據(jù)更新視圖不更新

1.data中有對(duì)象obj :{name:'遠(yuǎn)航'，age:18}

2.此時(shí)新增phone

this.obj.phone = '123456'

再次更新 用this.obj.phone = '654321' 視圖未更新  用this.$set(this.obj,"phone", "654321");也未更新

3.添加完成以后數(shù)據(jù)有更新，視圖未更新，

解決問(wèn)題

因?yàn)閛bj中沒(méi)有phone字段，第一次新增屬性的時(shí)候就要用this.$set(this.obj,"phone", "123456");就可以了

我第一次新增屬性沒(méi)有用this.$set(),因此沒(méi)有建立數(shù)據(jù)監(jiān)聽

新增多個(gè)屬性方法

// 代替 `Object.assign(this.someObject, { a: 1, b: 2 })`
this.someObject = Object.assign({}, this.someObject, { a: 1, b: 2 })

vue數(shù)據(jù)不更新的原因(數(shù)據(jù)更改了,但是視圖沒(méi)有更新)

templete:

<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 = {};//真正實(shí)現(xiàn)數(shù)據(jù)更新的是這行代碼
? ? ? ? ? ? ? ? ? ? self.dataObj['text'] = 'new text';
? ? ? ? ? ? ? ? }, 3000);
? ? ? ? ? ? }
})

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

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

解決辦法

首先清空原始數(shù)據(jù)，然后添加一個(gè)text屬性并賦值。然后數(shù)據(jù)和模版都更新里。

其中.text屬性不具有響應(yīng)式，但是數(shù)據(jù)更新了。原因：

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

具體流程如下

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

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

數(shù)組更新檢測(cè)

Vue 包含一組觀察數(shù)組的變異方法，所以它們也將會(huì)觸發(fā)視圖更新。這些方法如下：

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

注意事項(xiàng)

由于 JavaScript 的限制，Vue 不能檢測(cè)以下變動(dòng)的數(shù)組：

當(dāng)你利用索引直接設(shè)置一個(gè)項(xiàng)時(shí)，例如：vm.items[indexOfItem] = newValue

當(dāng)你修改數(shù)組的長(zhǎng)度時(shí)，例如：vm.items.length = newLength

舉個(gè)例子：

var vm = new Vue({
? data: {
? ? items: ['a', 'b', 'c']
? }
})
vm.items[1] = 'x' // 不是響應(yīng)性的
vm.items.length = 2 // 不是響應(yīng)性的

為了解決第一類問(wèn)題，以下兩種方式都可以實(shí)現(xiàn)和vm.items[indexOfItem] = newValue相同的效果，同時(shí)也將觸發(fā)狀態(tài)更新：

// Vue.set
Vue.set(vm.items, indexOfItem, newValue)

// Array.prototype.splice
vm.items.splice(indexOfItem, 1, newValue)

你也可以使用 vm.$set 實(shí)例方法，該方法是全局方法 Vue.set 的一個(gè)別名：

vm.$set(vm.items, indexOfItem, newValue)

為了解決第二類問(wèn)題，你可以使用 splice：

vm.items.splice(newLength)

對(duì)象更改檢測(cè)注意事項(xiàng)

還是由于 JavaScript 的限制，Vue 不能檢測(cè)對(duì)象屬性的添加或刪除：

var vm = new Vue({
? data: {
? ? a: 1
? }
})
// `vm.a` 現(xiàn)在是響應(yīng)式的
vm.b = 2
// `vm.b` 不是響應(yīng)式的

對(duì)于已經(jīng)創(chuàng)建的實(shí)例，Vue 不能動(dòng)態(tài)添加根級(jí)別的響應(yīng)式屬性。但是，可以使用 Vue.set(object, key, value)方法向嵌套對(duì)象添加響應(yīng)式屬性。例如，對(duì)于：

var vm = new Vue({
? data: {
? ? userProfile: {
? ? ? name: 'Anika'
? ? }
? }
})

你可以添加一個(gè)新的 age 屬性到嵌套的 userProfile 對(duì)象：

Vue.set(vm.userProfile, 'age', 27)

你還可以使用 vm.$set 實(shí)例方法，它只是全局 Vue.set 的別名：

vm.$set(vm.userProfile, 'age', 27)

有時(shí)你可能需要為已有對(duì)象賦予多個(gè)新屬性，比如使用 Object.assign() 或 _.extend()。在這種情況下，你應(yīng)該用兩個(gè)對(duì)象的屬性創(chuàng)建一個(gè)新的對(duì)象。所以，如果你想添加新的響應(yīng)式屬性，不要像這樣：

Object.assign(vm.userProfile, {
? age: 27,
? favoriteColor: 'Vue Green'
})

你應(yīng)該這樣做：

vm.userProfile = Object.assign({}, vm.userProfile, {
? age: 27,
? favoriteColor: 'Vue Green'
})

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

最新評(píng)論