根据官方文档定义:

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

受现代 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的方法就可以更新页面了

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

  1. Vue的数据响应式

    getter和setter怎么用 示例代码 getter ,关键词为 get ,用于获取一个值.定义时为函数,但是使用时不用加括号. setter 用于对数据的改写 Object.defineProp ...

  2. Vue数据绑定和响应式原理

    Vue数据绑定和响应式原理 当实例化一个Vue构造函数,会执行 Vue 的 init 方法,在 init 方法中主要执行三部分内容,一是初始化环境变量,而是处理 Vue 组件数据,三是解析挂载组件.以 ...

  3. Vue 2.0 与 Vue 3.0 响应式原理比较

    Vue 2.0 的响应式是基于Object.defineProperty实现的 当你把一个普通的 JavaScript 对象传入 Vue 实例作为 data 选项,Vue 将遍历此对象所有的 prop ...

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

    原文地址 在开发过程中,我们时常会遇到这样一种情况:当vue的data里边声明或者已经赋值过的对象或者数组(数组里边的值是对象)时,向对象中添加新的属性,如果更新此属性的值,是不会更新视图的. 根据官 ...

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

    一.为什么需要使用Vue.set? vue中不能检测到数组和对象的两种变化: 1.数组长度的变化 vm.arr.length = 4 2.数组通过索引值修改内容 vm.arr[1] = ‘aa’ Vu ...

  6. vue 数组 新增元素 响应式原理 7种方法

    1.问题 思考一个问题,以下代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...

  7. Vue方法中修改数组某一项元素而不能响应式更新

    <template> <div> <ul> <li v-for="(item, i) in ms" :key="i"& ...

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

    Vue.js 是一款 MVVM 框架,数据模型仅仅是普通的 JavaScript 对象,但是对这些对象进行操作时,却能影响对应视图,它的核心实现就是「响应式系统」. 首先看一下 Object.defi ...

  9. vue学习之响应式原理的demo实现

    Vue.js 核心: 1.响应式的数据绑定系统 2.组件系统. 访问器属性 访问器属性是对象中的一种特殊属性,它不能直接在对象中设置,而必须通过 defineProperty() 方法单独定义. va ...

随机推荐

  1. git操作——git pull 撤销误操作,恢复本地代码

    需求 开发的代码还未commit到git本地仓库,就从git远程仓库上pull了代码,导致开发的代码直接被冲掉,需要退回到上一个版本代码. 操作 进入到项目git本地仓库文件夹下 打开cmd窗口,执行 ...

  2. swap function & copy-and-swap idiom

    在C++中,众所周知在一个资源管理类(例如含有指向堆内存的指针)中需要重新定义拷贝构造函数.赋值运算符以及析构函数(Big Three),在新标准下还可能需要定义移动构造函数和移动赋值运算符(Big ...

  3. spingboot项目在windows环境中运行时接收参数及日志中文乱码

    1.logback.xml配置 appender中添加 <param name="Encoding" value="UTF-8" /> <co ...

  4. AtCoder Beginner Contest 078 C HSI

    虽说这是个水题,但是我做了大概有一个小时吧,才找到规律,刚学概率,还不大会做题. 找到规律后,又想了想,才想到推导过程. 思路:想要知道花费的时间,就要知道提交的次数,我在这里是计算的提交次数的期望, ...

  5. UVa 10285【搜索】

    UVa 10285 哇,竟然没超时!看网上有人说是记忆化搜索,其实不太懂是啥...感觉我写的就是毫无优化的dfs暴力....... 建立一个坐标方向结构体数组,每个节点dfs()往下搜就好了. #in ...

  6. UVa 10323 【数学】

    UVa 10323 题目:计算阶乘在10000~6227020800之间的值,不在范围对应输出Under或者Over. 分析:简单题.数论.因为13!=6227020800,7!<10000&l ...

  7. 如何将英文PDF文献翻译成中文

    方法一:利用Google的本地文档翻译功能 这种方法比较简单,打开Google翻译首页http://translate.google.cn/, 选择"上传文档" 选择文件,开始翻译 ...

  8. mysql列转行 行转列

    列转行 SELECT flag ,substring_index(substring_index(t.context,), ) as result FROM ( select 'aa' as flag ...

  9. java执行sql语句使用别名时显示Column '***' not found

    java执行sql语句使用别名时显示Column '*' not found 在做一个小项目时遇到个问题,执行sql语句使用别名时总是报sql异常 Column '*' not found,折腾半天终 ...

  10. 解决ViewState过于庞大的问题

    这里是我将ViewState持久化保持在服务器端的代码,这样ViewState不占用网络带宽,因此其存取只是服务器的磁盘读取时间.并且它很 小,可以说是磁盘随便转一圈就能同时读取好多ViewState ...