[vue] 数据不响应 ... Vue.set

问题：数据不响应

解决方法

1. 将本来要新增的属性提前在data中定义好

data() {
          
   
    return {
          
   
      userInfo: {
          
   
        name: 子君,
        sex: 男,
        // 我先提前定义好
        officialAccount: 
      }
    }
  }

2. 直接替换掉userInfo …

虽然无法给userInfo里面添加新的属性，但是因为userInfo已经定义好了，所以我直接修改userInfo的值不就可以了么，所以也可以像下面这样写

this.userInfo = {
          
   
  // 将原来的userInfo 通过扩展运算法复制到新的对象里面
  ...this.userInfo,
  // 添加新属性
  officialAccount: 前端有的玩
}

3. 使用Vue.set

其实上面两种方法都有点取巧的嫌疑，其实对于新增属性，Vue官方专门提供了一个新的方法Vue.set用来解决新增属性无法触发数据响应。

Vue.set 方法定义

/**
* target 要修改的对象
* prpertyName 要添加的属性名称
* value 要添加的属性值
*/
Vue.set( target, propertyName, value )

4. 使用$forceUpdate (不建议)

但是实际上这个方法并不建议使用，因为它会引起许多不必要的性能消耗。

针对数组的特定方式

其实不仅仅是对象，数组也存在数据修改之后不响应的情况，比如下面这段代码

<template>
  <div>
    <ul>
      <li v-for="item in list" :key="item">
        {
          
   {
          
    item }}
      </li>
    </ul>
    <button @click="handleChangeName">修改名称</button>
  </div>
</template>
<script>
export default {
          
   
  data() {
          
   
    return {
          
   
      list: [张三, 李四]
    }
  },
  methods: {
          
   
    // 修改用户名称
    handleChangeName() {
          
   
      this.list[0] = 王五
    }
  }
}
</script>

上面的代码希望将张三的名字修改为王五，实际上这个修改并不能生效，这是因为Vue不能检测到以下变动的数组:

当你利用索引直接设置一个项时，例如: this.list[index] = newValue 修改数组的length属性,例如: this.list.length = 0

所以在上例中通过this.list[0] = 王五 是无法触发数据响应的，那应该怎么办呢？像上面提到的Vue.set和$forceUpdate都可以解决这个问题，比如Vue.set可以这样写

Vue.set(this.list,0,王五)

除了那些方法之外，Vue还针对数组提供了变异方法 在操作数组的时候，我们一般会用到数据提供的许多方法，比如push,pop,splice等等，在Vue中调用数组上面提供的这些方法修改数组的值是可以触发数据响应的，比如上面的代码改为以下代码即可触发数据响应

this.list.splice(0,1,王五)