vue给对象添加属性没有响应式的问题及解决

目录
  • vue给对象添加属性没有响应式
  • 给已创建的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。

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 使用Vue.$set()或者Object.assign()修改对象新增响应式属性的方法

    目录 Vue.$set() Vue.$set()源码 Object.assign() 首先建议先读读Vue官方文档深入响应式原理的介绍,对这一块你的理解会加深很多深入响应式原理 vue代码中,只要在data对象里定义的对象,赋值后,任意一个属性值发生变化,视图都会实时变化 比如下面在data定义了obj对象,mounted里赋值后,(也可以在其他地方赋值)只要obj.a或者obj.b的值改变了,视图会跟着变化 data() { return { obj: {} } }, mounted: { t

  • Vue响应式添加、修改数组和对象的值

    Vue响应式添加、修改数组和对象的值

    有些时候,不得不想添加.修改数组和对象的值,但是直接添加.修改后又失去了getter.setter. 由于 JavaScript 的限制, Vue 不能检测以下变动的数组: 1. 利用索引直接设置一个项时,例如: vm.items[indexOfItem] = newValue 2. 修改数组的长度时,例如: vm.items.length = newLength 为了避免第一种情况,以下两种方式将达到像 vm.items[indexOfItem] = newValue 的效果, 同时也将触发状

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

    目录 vue数据不响应问题 vue数据响应不及时问题 vue数据不响应问题 将本来要新增的属性提前在data中定义好 我可以提前在userInfo里面定义好,这样就不是新增属性了,就像下面这样 data() {     return {       userInfo: {         name: '子君',         sex: '男',         // 我先提前定义好         officialAccount: ''       }     }   } 直接替换掉userI

  • vue给对象添加属性没有响应式的问题及解决

    目录 vue给对象添加属性没有响应式 给已创建的vue添加响应式属性 怎么才能添加响应式的属性呢? 总结 vue给对象添加属性没有响应式 vue2的响应式原理使用的是对象代理去实现的,对象代理中有一个get和set方法,当我们访问对象的时候就会触发get方法,当我们对对象中的值进行修改时会触发set方法. 但是当我们给对象添加一个新的属性时对象代理是检测不到的,所以就会出现直接给对象添加属性响应式不生效的问题. 在vue中可以使用this.$set(对象名,'属性名',属性值)的方法去给对象添加

  • vue对象添加属性(key:value)、显示和删除属性方式

    vue对象添加属性(key:value)、显示和删除属性方式

    目录 对象添加属性(key:value).显示和删除属性 效果图 添加属性 删除属性 不能检测到对象属性的添加或删除问题 有三种解决方案 对象添加属性(key:value).显示和删除属性 效果图 <FormItem label="输入项填充内容 :" prop="value" :rules="name1" style="margin-top: 20px"> <Button type="succes

  • 对VUE中的对象添加属性

    背景:在通过接口获取数据集对象后,根据业务场景需要在数据集对象上增加额外的属性 data中定义的数据集对象mindData格式示例如下 mindData: [ {label:'清醒',value:'清醒'}, {label:'朦胧',value:'朦胧'}, {label:'嗜睡',value:'嗜睡'}, {label:'昏睡',value:'昏睡'}, {label:'谵妄',value:'谵妄'}, {label:'模糊',value:'模糊'}] 1) 通过post调用接口获取minDa

  • JS动态给对象添加属性和值的实现方法

    如下所示: var obj={}; for(var i=0;i<10;i++){ eval("obj.p"+i+"="+i); } 以上就是小编为大家带来的JS动态给对象添加属性和值的实现方法全部内容了,希望大家多多支持我们~

  • vue修改对象的属性值后页面不重新渲染的实例

    最近项目在使用vue,遇到几次修改了对象的属性后,页面并不重新渲染,场景如下: HTML页面如下: <template v-for="item in tableData"> <div :class="{'redBorder':item.red}"> <div>{{ item.name}}</div> <div> <el-button size="mini" @click="

  • Python实现动态给类和对象添加属性和方法操作示例

    本文实例讲述了Python实现动态给类和对象添加属性和方法操作.分享给大家供大家参考,具体如下: 动态给类和对象添加属性 定义一个Person类 class Person(object): def __init__(self, name): self.name = name 给对象添加属性 # 创建2个Person,分别为p1,p2 p1 = Person('amy') print(p1.name) p1.age = 10 # 给p1对象添加属性 print(p1.age) # 输出10 p2

  • Vue.js中provide/inject实现响应式数据更新的方法示例

    vue.js官方文档:https://cn.vuejs.org/v2/api/#provide-inject 首先假设我们在祖辈时候传入进来是个动态的数据,官方不是说如果你传入了一个可监听的对象,那么其对象还是可响应的么? parent父页面: export default { provide() { return { foo: this.fonnB } }, data(){ return { fonnB: 'old word '} } created() { setTimeout(()=>{

  • vue 对象添加或删除成员时无法实时更新的解决方法

    vue 对象添加或删除成员时无法实时更新的解决方法

    前阵子将项目搬上Vue的时候偶遇一个突发问题 当对象添加或删除成员时页面无法实时更新渲染,但是数组是正常的 目测是ob没有监听到对象的成员有变化 查看一些大家的求助回答是说ob监听的是数组length的变动 对象默认没有length 新增成员时不会自增length 所以监听不到对象的变化 最近大脑过于疲惫 懒得看文档了... 不多废话 解决方式直接上代码 在实例内部可以用$set和$delete this.$set(this.age,'age',18); this.$delete(this.ag

  • vue如何使用媒体查询实现响应式

    目录 使用媒体查询实现响应式的两种方式 前提 1.在每个组件中为其使用媒体查询 2.写n套页面,在使用这些页面的组件中进行一次媒体查询 vue中的媒体查询 语法 使用媒体查询实现响应式的两种方式 前提 依赖: sass,sass-loader 1.在每个组件中为其使用媒体查询 这种方法的有点是减少了重写不同终端同一组件的工作量,缺点是每个组件都要使用媒体查询,当一套页面组件不同时,需要进行组件的显示与隐藏(display:none!important),在不同终端区别不大的情况下建议使用这种方法

  • JavaScript中prototype为对象添加属性的误区介绍

    JavaScript中prototype为对象添加属性的误区介绍

    先上需要用到的全部代码片段(截取) 复制代码 代码如下: MenuControl.prototype.boxDisplay = false;//是否显示图层选择菜单 MenuControl.prototype.controlUI; MenuControl.prototype.show = function(){ if(pointControl.boxDisplay){ pointControl.hide(); } menuBoxDiv.style.display = ""; this.

随机推荐