解决vue数组中对象属性变化页面不渲染问题


Posted in Javascript onAugust 09, 2018

做checkbox多选功能的时候遇到了一个坑,逻辑怎么看都对,但是就是有bug,最后发现数组那里值变了页面勾选没有重新渲染。

换了关键词搜索找到了相关方法。

其实之前读文档教程的时候看到过这里,但是只有真的使用之后才会有最直接的感触。

数组更新检测

变异方法

Vue 包含一组观察数组的变异方法,所以它们也将会触发视图更新。这些方法如下:

push()
pop()
shift()
unshift()
splice()
sort()
reverse()

你打开控制台,然后用前面例子的 items 数组调用变异方法:example1.items.push({ message: 'Baz' }) 。

替换数组

变异方法 (mutation method),顾名思义,会改变被这些方法调用的原始数组。相比之下,也有非变异 (non-mutating method) 方法,例如:filter(), concat() 和 slice() 。这些不会改变原始数组,但总是返回一个新数组。当使用非变异方法时,可以用新数组替换旧数组:

example1.items = example1.items.filter(function (item) {
return item.message.match(/Foo/)
})

你可能认为这将导致 Vue 丢弃现有 DOM 并重新渲染整个列表。幸运的是,事实并非如此。Vue 为了使得 DOM 元素得到最大范围的重用而实现了一些智能的、启发式的方法,所以用一个含有相同元素的数组去替换原来的数组是非常高效的操作。

注意事项

由于 JavaScript 的限制,Vue 不能检测以下变动的数组:

当你利用索引直接设置一个项时,例如:vm.items[indexOfItem] = newValue

当你修改数组的长度时,例如:vm.items.length = newLength

为了解决第一类问题,以下两种方式都可以实现和 vm.items[indexOfItem] = newValue 相同的效果,同时也将触发状态更新:

// Vue.set
Vue.set(example1.items, indexOfItem, newValue)
// Array.prototype.splice
example1.items.splice(indexOfItem, 1, newValue)

为了解决第二类问题,你可以使用 splice:

example1.items.splice(newLength)

对象更改检测注意事项

还是由于 JavaScript 的限制,Vue 不能检测对象属性的添加或删除:

var vm = new Vue({
data: {
a: 1
}
})
// `vm.a` 现在是响应式的
 
vm.b = 2
// `vm.b` 不是响应式的

对于已经创建的实例,Vue 不能动态添加根级别的响应式属性。但是,可以使用 Vue.set(object, key, value) 方法向嵌套对象添加响应式属性。例如,对于:

var vm = new Vue({
data: {
userProfile: {
name: 'Anika'
}
}
})

你可以添加一个新的 age 属性到嵌套的 userProfile 对象:

Vue.set(vm.userProfile, 'age', 27)

你还可以使用 vm.$set 实例方法,它只是全局 Vue.set 的别名:

this.$set(this.userProfile, 'age', 27)

有时你可能需要为已有对象赋予多个新属性,比如使用 Object.assign() 或 _.extend()。在这种情况下,你应该用两个对象的属性创建一个新的对象。所以,如果你想添加新的响应式属性,不要像这样:

Object.assign(this.userProfile, {
age: 27,
favoriteColor: 'Vue Green'
})

你应该这样做:

this.userProfile = Object.assign({}, this.userProfile, {
age: 27,
favoriteColor: 'Vue Green'
})

以上这篇解决vue数组中对象属性变化页面不渲染问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
(JS实现)MapBar中坐标的加密和解密的脚本
May 16 Javascript
利用JS重写Cognos右键菜单的实现代码
Apr 11 Javascript
jQuery 对Select的操作备忘记录
Jul 04 Javascript
javascript里绝对用的上的字符分割函数总结
Jul 31 Javascript
javascript设计模式--策略模式之输入验证
Nov 27 Javascript
学习javascript面向对象 理解javascript对象
Jan 04 Javascript
JS仿百度自动下拉框模糊匹配提示
Jul 25 Javascript
three.js绘制地球、飞机与轨迹的效果示例
Feb 28 Javascript
小程序scroll-view安卓机隐藏横向滚动条的实现详解
May 16 Javascript
Vue的编码技巧与规范使用详解
Aug 28 Javascript
JavaScript进阶(四)原型与原型链用法实例分析
May 09 Javascript
解决vue单页面应用打包后相对路径、绝对路径相关问题
Aug 14 Javascript
JavaScript引用类型Function实例详解
Aug 09 #Javascript
jquery ajax加载数据前台渲染方式 不用for遍历的方法
Aug 09 #jQuery
JavaScript引用类型之基本包装类型实例分析【Boolean、Number和String】
Aug 09 #Javascript
vue修改对象的属性值后页面不重新渲染的实例
Aug 09 #Javascript
vue异步axios获取的数据渲染到页面的方法
Aug 09 #Javascript
vue2.0的虚拟DOM渲染思路分析
Aug 09 #Javascript
Angular动画实现的2种方式以及添加购物车动画实例代码
Aug 09 #Javascript
You might like
Yii2框架数据库简单的增删改查语法小结
2016/08/31 PHP
区分JS中的undefined,null,"",0和false
2007/03/08 Javascript
js 屏蔽鼠标右键脚本附破解方法
2009/12/03 Javascript
基于js disabled="false"不起作用的解决办法
2013/06/26 Javascript
javascript拖拽上传类库DropzoneJS使用方法
2013/12/05 Javascript
jquery遍历checkbox的注意事项说明
2014/02/21 Javascript
jquery中animate的stop()方法作用实例分析
2015/01/30 Javascript
深入浅析JavaScript中with语句的理解
2016/05/12 Javascript
JavaScript排序算法动画演示效果的实现方法
2016/10/18 Javascript
vue axios用法教程详解
2017/07/23 Javascript
AngularJS实现注册表单验证功能
2017/10/16 Javascript
vuex实现登录状态的存储,未登录状态不允许浏览的方法
2018/03/09 Javascript
vue两个组件间值的传递或修改方式
2018/07/04 Javascript
解决angular2在双向数据绑定时[(ngModel)]无法使用的问题
2018/09/13 Javascript
原生JS实现旋转轮播图+文字内容切换效果【附源码】
2018/09/29 Javascript
JavaScript ES2019中的8个新特性详解
2019/02/20 Javascript
微信小程序+云开发实现欢迎登录注册
2019/05/24 Javascript
浅谈JavaScript中this的指向问题
2020/07/28 Javascript
python pyinstaller 加载ui路径方法
2019/06/10 Python
Python 装饰器原理、定义与用法详解
2019/12/07 Python
torch 中各种图像格式转换的实现方法
2019/12/26 Python
jupyter修改文件名方式(TensorFlow)
2020/04/21 Python
详解Python3 定义一个跨越多行的字符串的多种方法
2020/09/06 Python
python PyAUtoGUI库实现自动化控制鼠标键盘
2020/09/09 Python
css3 利用transform打造走动的2D时钟
2020/10/20 HTML / CSS
Antler英国官网:购买安特丽行李箱、拉杆箱
2019/08/25 全球购物
意大利中国电子产品购物网站:Geekmall.com
2019/09/30 全球购物
校园公益广告语
2014/03/13 职场文书
家长会欢迎词
2015/01/23 职场文书
PHP连接MSSQL数据库案例,PHPWAMP多个PHP版本连接SQL Server数据库
2021/04/16 PHP
详解CSS伪元素的妙用单标签之美
2021/05/25 HTML / CSS
解决Navicat for Mysql连接报错1251的问题(连接失败)
2021/05/27 MySQL
MySQL 使用索引扫描进行排序
2021/06/20 MySQL
uniapp 微信小程序 自定义tabBar 导航
2022/04/22 Javascript
Go Grpc Gateway兼容HTTP协议文档自动生成网关
2022/06/16 Golang
PostgreSQL常用字符串分割函数整理汇总
2022/07/07 PostgreSQL