vue双向绑定不生效、对象中的属性值发生改变页面不会重新渲染问题解决办法

vue双向绑定原理

vue深入式响应原理，当我们在data中声明变量对象，Vue 将遍历此对象所有的 property（如下面的list），并使用 Object.defineProperty 把这些 property 全部转为 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: []//声明一个数组
    }
  },
  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) {
      item.single = '不是'
      console.log('月老牵线，告别单身~')
    }
  }

当我们修改基本类型的数据时，视图上会即时更新。但是，当我们修改引用数据类型时，由于 JavaScript 的限制，Vue 不能检测数组和对象的变化。这个限制是由于引用数据类型（数组和对象）的数据存储层级可能包含多层，当我们没有在声明引用数据类型时就声明其属性值，它不会监听深层级的属性。
此时月老都牵线了 但是小帅的状态没变 （摊手）

救救小帅吧~

方法一 增加一个基本类型的变量

偶然发现，在触发增删改引用数据类型的属性值，同时修改一个基本数据类型的值，并且该基本类型必须渲染在视图上，才会触发引用数据类型数据在视图上的更新。
代码如下
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.flag
      item.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()，在增删改数据后实行强制更新。

changeSingle (item, index) {
      item.single = '不是'
      this.$forceUpdate()
      console.log('月老牵线,' + item.name + '告别单身~')
    }

好的，恭喜小帅告别单身~（✿✿ヽ(°▽°)ノ✿）