vue给对象添加属性没有响应式的问题及解决
vue给对象添加属性没有响应式
vue2的响应式原理使用的是对象代理去实现的，对象代理中有一个get和set方法，当我们访问对象的时候就会触发get方法，当我们对对象中的值进行修改时会触发set方法。
但是当我们给对象添加一个新的属性时对象代理是检测不到的，所以就会出现直接给对象添加属性响应式不生效的问题。
在vue中可以使用this.$set(对象名,'属性名',属性值)的方法去给对象添加属性，或者使用Vue.set(对象名,'属性名',属性值)的方法进行添加，添加之后的属性就带有响应式了!!
this.$set(this.goodsdata, 'isShow', false)
给已创建的vue添加响应式属性
我们知道，vue的data中变量都是响应式的，即数据改变，视图会一起改变；视图改变，数据也会响应变化。
但当我们给已创建好的vue实例中data中的变量对象添加属性时，数据虽然会更新，但视图却不会发生更新。
<template>
<div id="app">
<button @click="changem">按钮</button>
<ul v-for="item in items">
<li>{{ item }}</li>
</ul>
</div>
</template>
<script>
import Vue from "vue";
export default {
name: "App",
data() {
return {
items: {
a: "我是a",
},
};
},
methods: {
changem() {
this.items.m = "我是m";
console.log(this.items);
}
}
</script>上面代码中，我们通过v-for来展示items中所有的属性值，在通过changm函数向items中添加一个属性m，并赋值为‘我是m’。
但是执行函数后，虽然items发生了改变，但视图中items却没有改变，（也并没有m这属性的getter和setter，只有原来的属性a的getter和setter）这说明我们添加的这个属性并不是响应式的。
如图1、图2：
图1.视图
图2.Chrome控制台输出
怎么才能添加响应式的属性呢？
1.使用this.$forceUpdata()函数使得vue强制更新视图和数据（不推荐使用）。（调用强制更新方法this.$forceUpdate()会更新视图和数据，触发updated生命周期。）
代码：
<button @click="change1">按钮b</button>
.
.
.
.
.
change1() {
this.items.b = "我是b";
this.$forceUpdate();
console.log(this.items);
this.$nextTick(() => {
console.log(this.items);
})
}运行如图3、4
图3
图4
我不太明白的是这里也没有b的get和set函数。
2.Vue.set()函数
代码：
<button @click="change2">按钮c</button>
.
.
.
.
.
change2() {
Vue.set(this.items, "c", "我是c"); //视图更新
console.log(this.items);
},运行如图5、6
图5
图6
这次视图更新了，而且也有c的get和set函数，但是这样添加的属性较少，添加大量属性可用下面这种方法。
3.使用Object.assign() 函数.
代码：
<button @click="change3">按钮d</button>
.
.
.
.
.
change3() {
this.items = Object.assign({}, this.items, {
d: "ddd",
e: "eee",
});
console.log(this.items);
}运行如图7、8
图7
图8
这里也是视图更新，并且生成了d、e的get和set。
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了聊聊vue 中的v-on参数问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2021-01-01
Element Plus 日期选择器获取选中的日期格式(当前日期/时间戳格式）
如果想要获取选中的日期时间就需要通过,Element Plus 日期选择器 format属性和value-format属性,format指定输入框的格式,value-format 指定绑定值的格式,本篇文章就给大家介绍Element Plus 日期选择器获取选中的日期格式(当前日期/时间戳格式）,感兴趣的朋友一起看看吧2023-10-10
这篇文章主要介绍了uniapp中uni-load-more的使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-05-05
这篇文章主要介绍了vant的Uploader 文件上传,图片数据回显问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
闲话少说，我们进入今天的小小五分钟学习时间，前面我们了解了vue的组件，我们本文主要是讲解vue的动态组件和内置组件，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-08-08
这篇文章主要为大家介绍了Vue watch侦听器，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2021-12-12
这篇文章主要介绍了element-ui 文件上传修改文件名的方法示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-11-11
这篇文章主要为大家介绍了vue3.2 Composition API项目依赖升级示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-08-08
VUE是一套前端框架，免除了原生JavaScript中的DOM操作，简化书写。VUE基于MVVM（Model-View_ViewModel）思想，实现数据双向绑定。Vue的核心库只关注图层.响应式数据绑定和组件化开发是其两大特点。2023-01-01
这篇文章主要给大家介绍了关于Vue中正确使用Element-UI组件的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-10-10
最新评论