为什么Vue2没办法对新增的属性做响应式更新

2024-11-04

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

根据官方文档定义: 如果在实例创建之后添加新的属性到实例上,它不会触发视图更新. 受现代 JavaScript 的限制 (以及废弃 Object.observe),Vue 不能检测到对象属性的添加或删除. 由于 Vue 会在初始化实例时对属性执行 getter/setter 转化过程,所以属性必须在 data 对象上存在才能让 Vue 转换它,这样才能让它是响应的. 官方定义: Vue 不允许在已经创建的实例上动态添加新的根级响应式属性 (root-level reactive property

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

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

用rem来做响应式开发

强烈推荐这篇文章:<web app 变革之rem> px转rem工具:<px转rem工具> 由于最近在做公司移动项目的重构,因为要实现响应式的开发,所以大量使用到了rem的单位,觉得这个单位有点意思.但是现在貌似用他的人很少.上一篇文章我分享了淘宝写的一篇rem的介绍,介绍的非常全面,但是他们似乎都把关注点放在了字体单位上了,其实rem不只是能应用到字体上面,还可以应用到长度和宽度上面,接下来看下我做的一个项目的首页吧. Demo 由于这个项目我设置了最大的宽度限制是640px,最

用rem来做响应式开发(转)

由于最近在做公司移动项目的重构,因为要实现响应式的开发,所以大量使用到了rem的单位,觉得这个单位有点意思.但是现在貌似用他的人很少.上一篇文章我分享了淘宝写的一篇rem的介绍,介绍的非常全面,但是他们似乎都把关注点放在了字体单位上了,其实rem不只是能应用到字体上面,还可以应用到长度和宽度上面,接下来看下我做的一个项目的首页吧. 由于这个项目我设置了最大的宽度限制是640px,最小限制是320px,大家可以改变浏览器的分辨率或者通过手机访问看看效果.基本上在不同分辨率下都是差不多的展示效果,而

用rem做响应式开发

设置对应的响应式的html rem比例 rem就是根元素(即:html)的字体大小.html中的所有标签样式凡是涉及到尺寸的(如: height,width,padding,margin,font-size.甚至,left,top等)你都可以放心大胆的用rem作单位. 我们平常在使用长度单位都会使用px,但是在做上面的响应式的时候,需要用rem或者百分比的单位,大家可以看我的Demo代码.在上篇文章介绍了rem的字体设置计算方法: html{ font-size:62.5%; /* 10÷16=

针对vue中请求数据对象新添加的属性不能响应式的解决方法

1.需要给对象添加属性时,不能采用传统的obj.属性=值,obj[属性]=值来添加属性,在vue页面时需要这样使用 this.$set(obj,"propertyName","value") 来添加属性 /* obj 要添加属性的对象 propertyName 属性名 value 属性值 */ 2.同理,在修改属性的时候,在对应的方法中也需要this.$set(obj,"propertyName","value&quo

使用rem来做响应式布局（js动态加载）

Vue2响应式原理

vue2响应式原理 vue的特性:数据驱动视图和双向数据绑定.vue官方文档也提供了响应式原理的解释: 深入响应式原理 Object.defineProperty() Object.defineProperty()的作用是直接在一个对象上定义一个新属性,或者修改一个属性使用方式:Object.defineProperty(对象名,属性名,配置项) <script> let person = { name: '张三', sex: '男', } Object.defineProperty(per

由浅入深，带你用JavaScript实现响应式原理（Vue2、Vue3响应式原理）

由浅入深,带你用JavaScript实现响应式原理前言为什么前端框架Vue能够做到响应式?当依赖数据发生变化时,会对页面进行自动更新,其原理还是在于对响应式数据的获取和设置进行了监听,一旦监听到数据发生变化,依赖该数据的函数就会重新执行,达到更新的效果.那么我们如果想监听对象中的属性被设置和获取的过程,可以怎么做呢? 1.Object.defineProperty 在ES6之前,如果想监听对象属性的获取和设置,可以借助Object.defineProperty方法的存取属性描述符来实现,具体

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

1.问题思考一个问题,以下代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>vue 数组响应式原理</title> </head> <body> <div id="app"> <div v-for="item in list"> {{ item

Vue.js 源码分析(四) 基础篇响应式原理 data属性

官网对data属性的介绍如下: 意思就是:data保存着Vue实例里用到的数据,Vue会修改data里的每个属性的访问控制器属性,当访问每个属性时会访问对应的get方法,修改属性时会执行对应的set方法. Vue内部实现时用到了ES5的Object.defineProperty()这个API,也正是这个原因,所以Vue不支持IE8及以下浏览器(IE8及以下浏览器是不支持ECMASCRIPT 5的Object.defineProperty()). 以一个Hello World为例,如下: <!DO

Vue2.x响应式原理

一.回顾Vue响应式用法 vue响应式,我们都很熟悉了.当我们修改vue中data对象中的属性时,页面中引用该属性的地方就会发生相应的改变.避免了我们再去操作dom,进行数据绑定. 二.Vue响应式实现分析对于vue的响应式原理,官网上给了出文字描述 https://cn.vuejs.org/v2/guide/reactivity.html . vue内部主要是通过数据劫持和观察者模式实现的数据劫持: vue2.x内部使用Object.defineProperty https://dev

Vue2 响应式原理

我们经常用vue的双向绑定,改变data的某个属性值,vue就马上帮我们自动更新视图,下面我们看看原理. Object的响应式原理: 可以看到,其实核心就是把object的所有属性都加上getter.setter,get时收集依赖,set时通知依赖,达到响应式更新的目的. 但是显而易见的,这种方法无法监测到data增加属性和删除属性的动作 Array的响应式原理: 可以看到array的原理和object类似,但是因为大多数情况下都不是set,而是一些操作数组的方法(push.pull.shift

vue2.0 之深入响应式原理

实例demo<div id="app"> <span>{{a}}</span> <input type="text" v-model="a"> <span>{{b}}</span> <input type="text" v-model="b"> <span>{{k.b}}</span> <inp

magento新增商品属性以及将属性加入Flat table

magento的EAV模型非常强大且灵活,但是如果不做优化的话,性能会非常低,因为attributes都存放在附表里,要获取一个entity的attribute,需要表联结一次,如果需要获取多条attributes, 就会产生大量的表联结,势必会对数据库造成压力,对于访问量大的内容,比如catalog_product(商品).商品列表(catalog_category),Magento core team使用了flat table这种策略来应对,简而言之,就是把需要的attributes的值收集

Vue2.4.0 新增的inheritAttrs，attrs

官方inheritAttrs,attrs文档https://cn.vuejs.org/v2/guide/components-props.html,从最下面的'非 Prop 的特性'开始看,看到最后 Vue2.4.0 新增的inheritAttrs,attrs 1.适用于Vue中全套层数深的组件,从父组件向子组件传递数据(除style和class) 2.当一个组件没有声明任何prop时候,attrs里面包含着全部的上层组件传递的所有数据(除style和class) 3.当声明了prop时候,at

vue双向数据绑定对于数组和新增对象属性不能监听的解决办法

出现数组不能按照索引进行跟新的原因是处于性能考虑的,但是整体数组的增加删除是可以监听到的:对于对象新增属性不能监听是因为没有在生成vue实例时候放进watcher收集依赖. 首先我们先来了解vue数据响应的原理.官方文档的解释: 当你把一个普通的 JavaScript 对象传给 Vue 实例的 data 选项,Vue 将遍历此对象所有的属性,并使用 Object.defineProperty 把这些属性全部转为 getter/setter. 当该属性的值为一个数组时,通过索引修改数组某一项的值或

利用边框border的属性做小符号

前两天学习中,发现网站上的一个小符号,以为是插入的img,但找来找去也未发现img的地址.最后问了同学,才得知是用border属性做出来的. 符号如右: 其css代码如下: .fuhao { position:absolute; top:12px; left:12px; width:0px; height:0px; overflow:hidden; border-width:6px 0px 6px 6px; border-color:transparent #A92222; border-st

HTML5新增的属性

关于html5新增的属性: HTML5现在已经不是SGML的子集,主要是增加了关于图像,位置,存储,多任务等功能. 绘画CANVAS; 用于播放媒体的video和audio元素: 本地离线存储localstorage长期存储数据,浏览器关闭后数据不丢失:sessionstorage的数据在浏览器关闭后自动删除: 语义化更好的内容元素如:article.footer.header.nav.section: 表单控件,type属性有calendar.date.time.email.URL.searc

HTML5新增的属性和废除的属性

HTML5中,在新增加和废除很多元素的同时,也增加和废除了很多属性. 新增的属性 1.表单相关的属性对input(type=text).select.textarea与button指定autofocus属性.它以指定属性的方式让元素在画面打开时自动获得焦点. 对input(type=text).textarea指定placeholder属性,它会对用户的输入进行提示,提示用户可以输入的内容. 对input.output.select.textarea.button与fieldset指定form

为什么Vue2没办法对新增的属性做响应式更新

热门专题