文章目錄

• vue雙向綁定原理
• 方法一 增加一個基本類型的變量
• 方法二 使用整體對象替換
• 方法三 使用vue文檔提供的方法

vue雙向綁定原理

vue深入式響應(yīng)原理，當(dāng)我們在data中聲明變量對象，Vue 將遍歷此對象所有的 property（如下面的list），并使用 Object.defineProperty 把這些 property 全部轉(zhuǎn)為 getter/setter。

<div v-for="(item,index) in list":key="index"@click="changeSingle(item,index)">{{item.name}}，今年{{item.age}}歲，{{item.single}}單身</div> data () {return {list: []//聲明一個數(shù)組}},mounted () {this.setSingle()},methods: {//設(shè)置初始值setSingle () {this.list = [{ name: '小帥', age: '17' },{ name: '大漂亮', age: '16' },{ name: '阿偉', age: '18' },{ name: '金姐', age: '22' }]this.list.forEach(element => {element.single = '是'})},//點(diǎn)擊事件 改變狀態(tài)值changeSingle (item, index) {item.single = '不是'console.log('月老牽線，告別單身~')}}

當(dāng)我們修改基本類型的數(shù)據(jù)時(shí)，視圖上會即時(shí)更新。但是，當(dāng)我們修改引用數(shù)據(jù)類型時(shí)，由于 JavaScript 的限制，Vue 不能檢測數(shù)組和對象的變化。這個限制是由于引用數(shù)據(jù)類型（數(shù)組和對象）的數(shù)據(jù)存儲層級可能包含多層，當(dāng)我們沒有在聲明引用數(shù)據(jù)類型時(shí)就聲明其屬性值，它不會監(jiān)聽深層級的屬性。
此時(shí)月老都牽線了 但是小帥的狀態(tài)沒變 （攤手）

救救小帥吧~

方法一 增加一個基本類型的變量

偶然發(fā)現(xiàn)，在觸發(fā)增刪改引用數(shù)據(jù)類型的屬性值，同時(shí)修改一個基本數(shù)據(jù)類型的值，并且該基本類型必須渲染在視圖上，才會觸發(fā)引用數(shù)據(jù)類型數(shù)據(jù)在視圖上的更新。
代碼如下
HTML代碼：

<div v-for="(item,index) in list":key="index"@click="changeSingle(item,index)">{{item.name}}，今年{{item.age}}歲，{{item.single}}單身</div><div>{{flag}}</div>

js代碼：

data () {return {person: {},list: [],flag: true}},mounted () {this.setSingle()},methods: {setSingle () {this.list = [{ name: '小帥', age: '17' },{ name: '大漂亮', age: '16' },{ name: '阿偉', age: '18' },{ name: '金姐', age: '22' }]this.list.forEach(element => {element.single = '是'})},changeSingle (item, index) {this.flag = !this.flagitem.single = '不是'console.log('月老牽線,' + item.name + '告別單身~')}} }

方法二 使用整體對象替換

直接給list整體賦一個值

changeSingle (item, index) {this.list = [{ name: '小帥', age: '17', single: '不是' },{ name: '大漂亮', age: '16' },{ name: '阿偉', age: '18' },{ name: '金姐', age: '22' }]console.log('月老牽線,' + item.name + '告別單身~')}

方法三 使用vue文檔提供的方法

$forceUpdate()，在增刪改數(shù)據(jù)后實(shí)行強(qiáng)制更新。

changeSingle (item, index) {item.single = '不是'this.$forceUpdate()console.log('月老牽線,' + item.name + '告別單身~')}

好的，恭喜小帥告別單身~（??ヽ(°▽°)ノ?）

總結(jié)

以上是生活随笔為你收集整理的vue双向绑定不生效、对象中的属性值发生改变页面不会重新渲染问题解决办法的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。