详解vue 数组和对象渲染问题


Posted in Javascript onSeptember 21, 2018

最近项目有点忙碌,遇到好多问题都没有总结(???),在开发过程中,取vuex中的数组渲染完成之后,再次修改数组的值,数据更新了,但是视图并没有更新。以为是数组更新的问题,后来又以为是因为vuex导致的问题. 最后强制刷新组件解决了问题,但是还没有找到根本问题的所在...

数组更新检测

  1. 在 vue 中使用数组的push()、pop()、shift()、unshift()、splice()、sort()、reverse() 、filter()、concat() 方法时,改变数组的同时可以触发视图的变化。
  2. 注意: 有两种情况 vue 无法检测到变动的数组,分别是:

(1)直接操作数组的长度;

// Vue.set
this.$set(arr, indexOfItem, newValue)
// Array.prototype.splice
this.arr.splice(indexOfItem, 1, newValue)

(2)利用索引直接设置一个项时,例如:this.arr[indexOfItem] = newValue

this.arr.splice(newLength)

demo如下:

<template>
 <div class="demo">
 <div class="list-item" v-for="item in arr[0].elements" :key="item.name">{{item.name}}</div>
 <div class="change-btn" @click="changeArr">改变列表的值</div>
 </div>
</template>

<script>
 export default {
 data() {
  return {
  index: 0,
  arr: [{
   elements: [{
   name: '0'
   }, {
   name: '1'
   }, {
   name: '2'
   }]
  }]
 
  }
 },
 methods: {
  changeArr() {
  // 可以改变数组的值
   this.arr[0].elements.push({
   name: '3'
   })
  // this.arr[0].elements[1].name = '4' 可以改变数组的值
  // this.arr[0].elements[1] = { 无法改变数组的值
  // name: '4'
  // }
  }
 }
 }
</script>

问题: 用v-for循环渲染数组数据时,数据更新了,视图却没有更新

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

1. 当你利用索引直接设置一个项时,例如: vm.items[indexOfItem] = newValue
2. 当你修改数组的长度时,例如: 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)

对象更新检测

方法一:this.$set()

方法二:Object.assign()

demo.vue

<template>
 <div class="demo">
 {{object}}
 <div class="change-btn" @click="changeArr">改变列表的值</div>
 </div>
</template>

<script>
 export default {
 data() {
  return {
  index: 0,
  object: {
   name: 'haha'
  }
  }
 },
 methods: {
  changeArr() {
  // 方法一: 
   this.$set(this.object, 'age', 27)
  // 方法二:
   this.object = Object.assign({}, this.object, {
   age: 27
   })
  // 方法三: ---不可行
   this.object.age = '27'
  }
 }
 }
 </script>

补充:

this.$forceUpdate()迫使 Vue 实例重新渲染。注意它仅仅影响实例本身和插入插槽内容的子组件,而不是所有子组件。
使用 v-if 在切换时,元素及它的绑定数据和组件都会被销毁并重建

参考文献

https://cn.vuejs.org/v2/api/#vm-forceUpdate
https://cn.vuejs.org/v2/guide/list.html?#

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js确定对象类型方法
Mar 30 Javascript
Javascript判断对象是否相等实现代码
Mar 18 Javascript
在JavaScript中处理时间之getHours()方法的使用
Jun 10 Javascript
javascript常用正则表达式汇总
Jul 31 Javascript
javascript+HTML5 Canvas绘制转盘抽奖
May 16 Javascript
jquery popupDialog 使用 加载jsp页面的方法
Oct 25 Javascript
AngularJS压缩JS技巧分析
Nov 08 Javascript
vue的全局提示框组件实例代码
Feb 26 Javascript
node.js 模块和其下载资源的镜像设置的方法
Sep 06 Javascript
vue 项目接口管理的实现
Jan 17 Javascript
深入解析koa之中间件流程控制
Jun 17 Javascript
js实现盒子移动动画效果
Aug 09 Javascript
vue 2.8.2版本配置刚进入时候的默认页面方法
Sep 21 #Javascript
Puppeteer环境搭建的详细步骤
Sep 21 #Javascript
jQuery序列化form表单数据为JSON对象的实现方法
Sep 20 #jQuery
JavaScript 高性能数组去重的方法
Sep 20 #Javascript
vue2 设置router-view默认路径的实例
Sep 20 #Javascript
vue实现同一个页面可以有多个router-view的方法
Sep 20 #Javascript
vuejs router history 配置到iis的方法
Sep 20 #Javascript
You might like
PHP 5.0对象模型深度探索之属性和方法
2008/03/27 PHP
PHP在特殊字符前加斜杠的实现代码
2011/07/17 PHP
用 Composer构建自己的 PHP 框架之基础准备
2014/10/30 PHP
在IE中调用javascript打开Excel的代码(downmoon原作)
2007/04/02 Javascript
javascript 隐藏/显示指定的区域附HTML元素【legend】用法
2010/03/05 Javascript
CSS和Javascript简单复习资料
2010/06/29 Javascript
js不完美解决click和dblclick事件冲突问题
2012/07/16 Javascript
jquery制作LED 时钟特效
2015/02/01 Javascript
JavaScript定时显示广告代码分享
2015/03/02 Javascript
jQuery插件zoom实现图片全屏放大弹出层特效
2015/04/15 Javascript
js实现C#的StringBuilder效果完整实例
2015/12/22 Javascript
js自定义弹框插件的封装
2020/08/24 Javascript
Vue.js实现数据响应的方法
2018/08/13 Javascript
arctext.js实现文字平滑弯曲弧形效果的插件
2019/05/13 Javascript
[41:52]DOTA2-DPC中国联赛 正赛 CDEC vs Dynasty BO3 第二场 2月22日
2021/03/11 DOTA
Python中SOAP项目的介绍及其在web开发中的应用
2015/04/14 Python
Python数据分析之如何利用pandas查询数据示例代码
2017/09/01 Python
python实现AES和RSA加解密的方法
2019/03/28 Python
python面试题Python2.x和Python3.x的区别
2019/05/28 Python
Python图像处理之图片文字识别功能(OCR)
2019/07/30 Python
解决Python二维数组赋值问题
2019/11/28 Python
python 实现turtle画图并导出图片格式的文件
2019/12/07 Python
使用python的pyplot绘制函数实例
2020/02/13 Python
Python图像处理库PIL的ImageDraw模块介绍详解
2020/02/26 Python
详解Pycharm出现out of memory的终极解决方法
2020/03/03 Python
Matplotlib使用Cursor实现UI定位的示例代码
2020/03/12 Python
Python datetime模块使用方法小结
2020/06/18 Python
用CSS3实现无限循环的无缝滚动的示例代码
2017/11/01 HTML / CSS
Europcar西班牙:全球汽车租赁领域的领导者
2018/09/17 全球购物
有机婴儿毛毯和衣服:Monica + Andy
2020/03/01 全球购物
Linux的主要特性
2016/09/03 面试题
应届生法律顾问求职信
2013/11/19 职场文书
过程装备与控制工程专业求职信
2014/07/02 职场文书
2014年团队工作总结
2014/11/24 职场文书
转让协议书
2015/01/27 职场文书
PHP命令行与定时任务
2021/04/01 PHP