vue中数据不响应的问题及解决
更新时间：2022年09月24日 09:39:48 作者：那谁呀撒
这篇文章主要介绍了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)
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要为大家详细介绍了vue自定义数字输入框组件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-06-06
这篇文章主要介绍了Vue+Electron打包桌面应用超详细完整教程,在这大家要记住整个项目的json文件不能有注释,及时没报错也不行,否则运行命令时还是有问题,具体细节问题参考下本文详细讲解2024-02-02
这篇文章主要给大家介绍了关于vue3实现监听store中state状态变化的简单方法,store是一个状态管理工具,文中通过代码介绍的非常详细,需要的朋友可以参考下2023-10-10
Vue之beforeEach非登录不能访问的实现（代码亲测）
这篇文章主要介绍了Vue之beforeEach非登录不能访问的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-07-07
vue组件中的style标签标有scoped属性时表明style里的css样式只适用于当前组件元素 。接下来通过本文给大家分享vue组件中的样式属性scoped实例详解，感兴趣的朋友跟随小编一起看看吧2018-10-10
今天小编就为大家分享一篇Vue 应用中结合vux使用微信 jssdk的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-08-08
这篇文章主要介绍了Vue3实现登录表单验证功能,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-06-06
el-select如何获取下拉框选中label和value的值
在开发业务场景中我们通常遇到一些奇怪的需求,例如el-select业务场景需要同时获取我们选中的label跟 value,下面这篇文章主要给大家介绍了关于el-select如何获取下拉框选中label和value的值,需要的朋友可以参考下2022-10-10
vue3中引入新的组件传值方式,就是provide/inject依赖注入模式,本文主要介绍了vue3+ts 依赖注入provide inject的用法,感兴趣的可以了解一下2023-11-11
Vuex的插件vuex-persistedstate数据持久化存储操作
这篇文章主要介绍了Vuex的插件vuex-persistedstate数据持久化存储操作,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧2023-12-12
最新评论