vue新增属性响应式更新的问题

根据官方文档定义:

  如果在实例创建之后添加新的属性到实例上,它不会触发视图更新

受现代 JavaScript 的限制 (以及废弃 Object.observe),Vue 不能检测到对象属性的添加或删除。

由于 Vue 会在初始化实例时对属性执行 getter/setter 转化过程,所以属性必须在 data 对象上存在才能让 Vue 转换它,这样才能让它是响应的。

官方定义:

Vue 不允许在已经创建的实例上动态添加新的根级响应式属性 (root-level reactive property)。

但是它可以使用 Vue.set(object, key, value) 方法将响应属性添加到嵌套的对象上:

Vue.set(vm.obj, ‘e‘, 0)

您还可以使用 vm.$set 实例方法,这也是全局 Vue.set 方法的别名:

this.$set(this.obj,‘e‘,02)

for(var item in interim.message){
    // vue.devstatus[item] = interim.message[item];
    vue.$set(vue.devstatus,item,interim.message[item]);
}

  如上代码:interim.message是我从后台获得到的数据,想要将里边的数据的key和value保存在vue.devstatus中,使用第一种方式vue.devstatus[item] = interim.message[item];不能实现更新页面,使用vue.$set的方法就可以更新页面了

原文地址:https://www.cnblogs.com/yayaonly/p/11290273.html

时间: 2024-08-30 15:40:50

vue新增属性响应式更新的问题的相关文章

修改Vue数组没有响应式更新

由于 JavaScript 的限制,Vue 不能检测以下数组的变动: (1)当你利用索引直接设置一个数组项时,例如:vm.items[indexOfItem] = newValue (2)当你修改数组的长度时,例如:vm.items.length = newLength 为了解决第一类问题,我列出了可以响应式更新的方法: (1)push:在数组后面添加数据 this.list.push("ThinkPHP"); //还可以添加多个 this.list.push("ThinkP

vue新增属性是否会响应式更新?

原文地址 在开发过程中,我们时常会遇到这样一种情况:当vue的data里边声明或者已经赋值过的对象或者数组(数组里边的值是对象)时,向对象中添加新的属性,如果更新此属性的值,是不会更新视图的. 根据官方文档定义:如果在实例创建之后添加新的属性到实例上,它不会触发视图更新. 受现代 JavaScript 的限制 (以及废弃 Object.observe),Vue 不能检测到对象属性的添加或删除.由于 Vue 会在初始化实例时对属性执行 getter/setter 转化过程,所以属性必须在 data

Vue.set 向响应式对象中添加响应式属性,及设置数组元素触发视图更新

一.为什么需要使用Vue.set? vue中不能检测到数组和对象的两种变化: 1.数组长度的变化 vm.arr.length = 4 2.数组通过索引值修改内容 vm.arr[1] = ‘aa’ Vue.$set(target,key,value):可以动态的给数组.对象添加和修改数据,并更新视图中数据的显示. vue在构造函数new Vue()时,就通过Object.defineProperty中的getter和setter 这两个方法,完成了对数据的绑定.所以直接通过vm.arr[1] =

vue原理探索--响应式系统

Vue.js 是一款 MVVM 框架,数据模型仅仅是普通的 JavaScript 对象,但是对这些对象进行操作时,却能影响对应视图,它的核心实现就是「响应式系统」. 首先看一下 Object.defineProperty,Vue.js就是基于它实现「响应式系统」的. 主要涉及属性: enumerable,属性是否可枚举,默认 false. configurable,属性是否可以被修改或者删除,默认 false. get,获取属性的方法. set,设置属性的方法. 响应式基本原理就是,在 Vue

Vue 及框架响应式系统原理

个人bolg地址 全局概览 Vue运行内部运行机制 总览图: 初始化及挂载 在 new Vue()之后. Vue 会调用 _init 函数进行初始化,也就是这里的 init 过程,它会初始化生命周期.事件. props. methods. data. computed 与 watch 等.其中最重要的是通过 Object.defineProperty 设置 setter 与 getter 函数,用来实现「响应式」以及「依赖收集」,后面会详细讲到,这里只要有一个印象即可. 初始化之后调用 $mou

手写实现vue的MVVM响应式原理

MVVM响应式实现原理: 1.模板编译 2.数据劫持 3.watcher 文中应用到的数据名词: MVVM   ------------------        视图-----模型----视图模型                三者与 Vue 的对应:view 对应 template,vm 对应 new Vue({…}),model 对应 data nodeType       判断节点是否是元素节点 querySelector    创建一个元素节点 createDocumentFragme

Vue中的响应式原理

Vue最独特的特性之一,是其非侵入性的响应式系统. 响应式原理:数据变,页面变 Vue如何追踪变化 当把一个普通的JS对象传入Vue实例作为data选项时,Vue将遍历此对象的所有属性,并使用Object.defineProperty把这些属性全部转为getter/setter.Object.defineProperty是ES5中一个无法shim的特性,这也是Vue不支持IE8以及更低版本浏览器的原因. Object.defineProperty(obj, prop, descriptor)//

如何给一个响应式数据添加一个属性 this.$set

this.$set(this.data,”key”,value’) Vue.set(vm.items,2,"ling") : 表示 把vm.items  这个数组的下标为2 的元素,改为"ling" Vue.set(vm.person,"age","26") Vue.set()向响应式对象中添加一个属性,并确保这个新属性同样是响应式的,且触发视图更新.它必须用于向响应式对象上添加新属性,因为 Vue 无法探测普通的新增属性 (

Vue.js响应式原理

本文和大家分享的主要是Vue.js 响应式原理相关内容,一起来看看吧,希望对大家 学习Vue.js有所帮助. 关于Vue.js Vue.js 是一款 MVVM 框架,上手快速简单易用,通过响应式在修改数据的时候更新视图. Vue.js 的响应式原理依赖于 Object.defineProperty  ,尤大大在Vue.js 文档中就已经提到过,这也是 Vue.js 不支持 E8 以及更低版本浏览器的原因. Vue 通过设定对象属性的  setter/getter  方法来监听数据的变化,通过 g