forceUpdate() & set
前言
在开发过程中，我们时常会遇到这样一种情况：当vue的data里边声明或者已经赋值过的对象或者数组（数组里边的值是对象）时，向对象中添加新的属性，如果更新此属性的值，是不会更新视图的。
根据官方文档定义：如果在实例创建之后添加新的属性到实例上，它不会触发视图更新。
当你把一个普通的 JavaScript 对象传入 Vue 实例作为 data 选项，Vue 将遍历此对象所有的属性，并使用 Object.defineProperty 把这些属性全部转为 getter/setter
受现代 JavaScript 的限制 (以及废弃 Object.observe)，Vue 不能检测到对象属性的添加或删除。由于 Vue 会在初始化实例时对属性执行 getter/setter 转化过程，所以属性必须在 data 对象上存在才能让 Vue 转换它，这样才能让它是响应的。
对象
看一下示例：
在vue框架中，如果data中有一个变量:age，修改他，页面会自动更新。但如果data中的变量为数组或对象，我们直接去给某个对象或数组添加属性，页面是识别不到的
<template>
<p>{{userInfo.name}}</p>
<p v-if="userInfo.sex">{{userInfo.sex}}</p>
<button @click="updateName">修改userInfo</button>
<button @click="addSex">添加性别</button>
</template>
<script>
data(){
userInfo:{name:'小明'}
},
methods:{
updateName(){
this.userInfo.name='小红'
},
addSex(){
this.userInfo.sex = '男'
}
}
</script>
可以发现，在updateName函数中，我们尝试给userInfo对象修改name值，并成功修改，但添加的sex属性失败了
分析
- 名字修改成功是因为vue初始化时为对象的属性建立 了
getter/setter函数，可以监测数据变化并挂载到视图上- 而新增的sex属性由于错过了建立
getter/setter阶段，即使在userInfo对象中添加成功，但由于没有setter函数，无法响应到视图上
解决方法
方法一：$forceUpdate()
迫使 Vue 实例重新渲染。注意它仅仅影响实例本身和插入插槽内容的子组件，而不是所有子组件。
methods:{
updateName(){
this.userInfo.sex='男'
this.$forceUpdate();
}
}
方法二：Vue.set(object, key, value)
methods:{
updateName(){
this.$set(this.userInfo,'sex,'男');
}
}
数组
上面的例子反映的是给对象添加属性时的问题，数组同样有类似的问题，请看下面的例子
<body>
<div id="app">
<p>{{userInfo.name}}</p>
<p v-if="userInfo.sex">{{userInfo.sex}}</p>
<ul>
<li v-for="(item,index) in hobbies" :key='index'>{{item}}</li>
</ul>
<button @click="update">修改爱好</button>
</div>
<script>
let vm = new Vue({
el:'#app',
data: {
userInfo:{name:'小明'},
hobbies:['抽烟','喝酒','烫头']
},
methods:{
update(){
this.hobbies[2] = '读书'
}
}
})
</script>
</body>
点击修改爱好按钮后页面并没有修改，打开控制台发现值已修改
解决方法
一、使用vue提供的更新数组的方法
vue给我们提供了它封装后的可用于对数组进行增删改查操作的方法
Vue 将被侦听的数组的变更方法进行了包裹，所以它们也将会触发视图更新。这些被包裹过的方法包括：
push()pop()shift()unshift()splice()sort()reverse()
上面的例子
update(){
//参数分别是：开始索引，是否删除（0：添加 1：删除），修改后的值
this.hobbies.splice(2,1,'读书')
},
使用封装后的方法则可以成功渲染到视图
二、Vue.set()
update(){
//参数分别是：对象，索引，修改后的值
Vue.set(this.hobbies,2,'读书')
},
三、this.$forceUpdate()
update() {
this.hobbies[2] = '读书'
this.$forceUpdate()
},
forceUpdate() & set的更多相关文章
- vue之$forceUpdate
由于一些嵌套特别深的数据,导致数据更新了.UI没有更新(连深度监听都没有监听到) this.$forceUpdate();
- React篇-报错信息：warning: Can't call setState (or forceUpdate) on an unmounted component.
报错信息是: Warning: Can't call setState (or forceUpdate) on an unmounted component. This is a no-op, but ...
- Vue.extend构造器和$mount实例构造组件后可以用$destroy()进行卸载,$forceUpdate()进行更新,$nextTick()数据修改
html <div id="app"> </div> <p><button onclick="destroy()"&g ...
- Can’t call setState (or forceUpdate) on an unmounted component 警告处理方法
Can’t call setState (or forceUpdate) on an unmounted component Warning: Can't call setState (or forc ...
- 温故而知新 Vue 原来也有this.$forceUpdate();
由于一些嵌套特别深的数据,导致数据更新了.UI没有更新(连深度监听都没有监听到),我捉摸着有没有和react一样的立即更新UI的API呢 this.forceUpdate()呢?结果还真有: this ...
- Vue – 基础学习(3):$forceUpdate()和$nextTick()的区别
Vue – 基础学习(3):$forceUpdate()和$nextTick()的区别
- VUE项目中使用this.$forceUpdate()强制页面重新渲染
在使用Vue框架开发时,在函数中改变了页面中的某个值,在函数中查看是修改成功了,但在页面中没有及时刷新改变后的值,我是在使用多层v-for嵌套时出现这种问题的, 解决方法:运用 this.$force ...
- VUE项目中使用this.$forceUpdate();解决页面v-for中修改item属性值后页面v-if不改变的问题
VUE项目中使用this.$forceUpdate();解决页面v-for中修改item属性值后页面v-if不改变的问题:https://blog.csdn.net/jerrica/article/d ...
- vue $forceUpdate() 强制重新渲染
vue $forceUpdate() 强制重新渲染:https://blog.csdn.net/z9061/article/details/94862047
- vue2.0 操作数组下标不跟新ui，使用set()或$forceUpdate 也不能跟新视图情况
在vue 2.0 中操作数组不跟新ui图,即使使用set()或 $forceUpdate也不能跟新视图,我在前段时间也遇到了一个问题,当时我使用的时element 的tree 组件 由于需要对tree ...
随机推荐
- javascript Date 日期格式化 formatDate, require.js 模块 支持全局js引入 / amd方式加载
* 引入AMD加载方式: require.js CDN https://cdn.bootcss.com/require.js/2.3.5/require.js * 创建模块文件./js/util/d ...
- python学习笔记(十三)-python对Excel进行读写修改操作
日常工作中会遇到Excel的读写问题.我们可以使用xlwt 模块将数据写入Excel表格,使用xlrd 模块从Excel读取数据,使用xlutils模块和xlrd模块结合对Excel数据进行修改.下面 ...
- 鸿蒙内核源码分析(事件控制篇) | 任务间多对多的同步方案 | 百篇博客分析OpenHarmony源码 | v30.02
百篇博客系列篇.本篇为: v30.xx 鸿蒙内核源码分析(事件控制篇) | 任务间多对多的同步方案 | 51.c.h .o 进程通讯相关篇为: v26.xx 鸿蒙内核源码分析(自旋锁篇) | 自旋锁当 ...
- pkusc2021游记
@ 目录 前言 Day 0 Day 1 Day 2 Day 3 前言 到时候APIO的大概也会写在这篇里吧. Day 0 车,公交,飞机,公交,车 坐了半天的交通终于到了,整个人都坐的晕乎乎的,然后看 ...
- P2150-[NOI2015]寿司晚宴【dp】
正题 题目链接:https://www.luogu.com.cn/problem/P2150 题目大意 将\(2\sim n\)选出一些分成两个集合,要求这两个集合中没有一对数不是互质的.求方案数对\ ...
- ❤️❤️爆肝3万字整理小白快速入门分布式版本管理软件：Git，图文并茂(建议收藏)--已码一万字❤️❤️
@ 目录 什么是Git SVN VS Git 什么是版本控制 安装Git 谁在操作? Git本地仓库 本地仓库构造 重点 Git基本操作 git add git commit git diff git ...
- 踩坑系列《十一》完美解决阿里云vod视频点播无法播放音频和视频点播控制台里的媒资库里面的视频无法播放
刚开始项目部署的时候,音频还是正常播放,后面直接报了 获取m3u8文件失败(manifestLoadError) 的错误,原因是 我的域名 xxx.com 这个域名没有解析到点播提供的CNAME上,所 ...
- Java面向对象编程（二）
关键字 -- this 一.this关键字的使用: 1.this可以用来修饰.调用:属性.方法.构造器. 2.this修饰属性和方法: this理解为:当前对象 或 当前正在创建的对象. 2.1 在类 ...
- 一次OutOfMemoryError: GC overhead limit exceeded
现象: 由于需要将mysql表中的过期数据在凌晨定时读取出过滤后转入到MongoDB,一个转换SQL达到百行,而且有几十个,集中运行后程序反馈异常: Handler dispatch failed; ...
- Arcscene教程
筛选 看不清的话可以进行如下操作:右键-->属性-->符号系统-->把高程前面的对号取消-->添加- ...