vue中数据不响应的问题及解决方法

共计 1171 个字符，预计需要花费 3 分钟才能阅读完成。

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

我可以提前在 userInfo 里面定义好，这样就不是新增属性了，就像下面这样

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

直接替换掉 userInfo

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

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

使用 Vue.set

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

this.$set(this.userInfo,'officialAccount', '哈哈哈哈哈')

出现不响应的原因可能是，后期在 data 中为一个数组中某个变量增加属性…

解决的一种方法是，提前把这个属性在 data 中声明好，并赋初识默认值，就交给 vue 管理了

1.vue 由于 javascript 的限制，对象属性的增加和删除，不能及时更新视图 view

因为若一个对象的属性没有在 data 中声明，则他就不是响应式的。由于 Vue 会在初始化实例时对属性执行 getter/setter 转化过程，这样的话这个对象属性就是响应式的。而执行这个过程必须在 data 中声明才会有。

var vm = new Vue({
    data:{a:1// vm.a 是响应的}
})
vm.b = 2;// vm.b 是非响应的 

可以用 set 来解决这个问题

Vue.set(vm.someObject, 'b', 2);
// 或者
this.$set(this.someObject,'b',2);

2. 由于 JavaScript 的限制，Vue 不能检测以下变动的数组

vm.items[indexOfItem] = newValue;
解决 ---->
Vue.set(vm.items,indexOfItem,newValue) / vm.items.splice(indexOfItem, 1 , newValue)

vm.items.length = newLength;
解决 ---->
vm.items.splice(newLength)

以上为个人经验，希望能给大家一个参考。

阿里云 2 核 2G 服务器 3M 带宽 61 元 1 年，有高配

腾讯云新客低至 82 元 / 年，老客户 99 元 / 年

代金券：在阿里云专用满减优惠券