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


这篇文章主要介绍了vue中数据不响应的问题及解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
vue数据不响应问题

将本来要新增的属性提前在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管理了

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)

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

本文地址:https://www.linuxprobe.com/vue-linux-python.html

来源:https://my.oschina.net/u/3585265/blog/5582191


码神部落- 版权声明 1、本主题所有言论和图片纯属会员个人意见,与码神部落立场无关。
2、本站所有主题由该帖子作者发表,该帖子作者对牛谈情码神部落享有帖子相关版权。
3、码神部落管理员和版主有权不事先通知发贴者而删除本文。
4、其他单位或个人使用、转载或引用本文时必须同时征得该帖子作者对牛谈情码神部落的同意。
5、帖子作者须承担一切因本文发表而直接或间接导致的民事或刑事法律责任。
6、本帖部分内容转载自其它媒体,但并不代表本站赞同其观点和对其真实性负责。
7、如本帖侵犯到任何版权问题,请立即告知本站,本站将及时予与删除并致以最深的歉意。

最新回复 (0)
    • 码神部落
      2
        立即登录 立即注册 GitHub登录
返回
发新帖
作者最近主题: