解决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 相关文章推荐
通用javascript脚本函数库 方便开发
Oct 13 Javascript
单独使用CKFinder选择图片的方法
Aug 21 Javascript
通过Jquery遍历Json的两种数据结构的实现代码
Jan 19 Javascript
jquery 操作DOM案例代码分享
Apr 05 Javascript
Javascript 垃圾收集机制介绍理解
May 14 Javascript
jqGrid中文文档之选项设置
Dec 02 Javascript
JS函数的几种定义方式分析
Dec 17 Javascript
js实现表单提交后不重新刷新当前页面
Nov 30 Javascript
jquery实现刷新随机变化样式特效(tag标签样式)
Feb 03 Javascript
基于JavaScript中标识符的命名规则介绍
Jan 06 Javascript
JavaScript使用小插件实现倒计时的方法讲解
Mar 11 Javascript
发布订阅模式在vue中的实际运用实例详解
Jun 09 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
php基础知识:类与对象(5) static
2006/12/13 PHP
PHP通过header实现文本文件下载的代码
2010/08/08 PHP
PHP导入Excel到MySQL的方法
2011/04/23 PHP
PHP跳转页面的几种实现方法详解
2013/06/08 PHP
CodeIgniter框架中_remap()使用方法2例
2014/03/10 PHP
Zend Framework动作助手Json用法实例分析
2016/03/05 PHP
PHP微信开发之有道翻译
2016/06/23 PHP
三个思路解决laravel上传文件报错:413 Request Entity Too Large问题
2017/11/13 PHP
理解JavaScript中的事件
2006/09/23 Javascript
jQuery TextBox自动完成条
2009/07/22 Javascript
非常棒的10款jQuery 幻灯片插件
2011/06/14 Javascript
基于Jquery实现的一个图片滚动切换
2012/06/21 Javascript
把jQuery的类、插件封装成seajs的模块的方法
2014/03/12 Javascript
jquery中radio checked问题
2015/03/16 Javascript
很棒的js选项卡切换效果
2016/07/15 Javascript
jQuery实用小技巧_输入框文字获取和失去焦点的简单实例
2016/08/25 Javascript
angularjs实现柱状图动态加载的示例
2017/12/11 Javascript
vue 子组件向父组件传值方法
2018/02/26 Javascript
通过微信公众平台获取公众号文章的方法示例
2019/12/25 Javascript
python线程池的实现实例
2013/11/18 Python
通过数据库对Django进行删除字段和删除模型的操作
2015/07/21 Python
浅析Python的Django框架中的Memcached
2015/07/23 Python
Python reduce()函数的用法小结
2017/11/15 Python
判断python字典中key是否存在的两种方法
2018/08/10 Python
对python 读取线的shp文件实例详解
2018/12/22 Python
什么是Python中的顺序表
2020/06/02 Python
携程旅行网:中国领先的在线旅行服务公司
2017/02/17 全球购物
世界上最大的高分辨率在线图片库:Alamy
2018/07/07 全球购物
《草虫的村落》教学反思
2014/02/16 职场文书
师范生求职信
2014/06/14 职场文书
2014年群众路线教育实践活动整改措施
2014/09/24 职场文书
走近毛泽东观后感
2015/06/04 职场文书
捐书仪式主持词
2015/07/04 职场文书
军训后的感想
2015/08/07 职场文书
2016党员干部反腐倡廉心得体会
2016/01/13 职场文书
Go调用Rust方法及外部函数接口前置
2022/06/14 Golang