详解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 相关文章推荐
Javascript之文件操作
Mar 07 Javascript
原生javascript实现图片轮播效果代码
Sep 03 Javascript
javascript实现动态侧边栏代码
Feb 19 Javascript
玩转JavaScript OOP - 类的实现详解
Jun 08 Javascript
很棒的js选项卡切换效果
Jul 15 Javascript
js实现对table的增加行和删除行的操作方法
Oct 13 Javascript
vue实现列表的添加点击
Dec 29 Javascript
从零学习node.js之express入门(六)
Feb 25 Javascript
利用nvm管理多个版本的node.js与npm详解
Nov 02 Javascript
Vue脚手架的简单使用实例
Jul 10 Javascript
JavaScript折半查找(二分查找)算法原理与实现方法示例
Aug 06 Javascript
Angular7中创建组件/自定义指令/管道的方法实例详解
Apr 02 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
德劲1102收音机的打理维修案例
2021/03/02 无线电
PHP设计聊天室步步通
2006/10/09 PHP
php简单对象与数组的转换函数代码(php多层数组和对象的转换)
2011/05/18 PHP
php下通过curl抓取yahoo boss 搜索结果的实现代码
2011/06/10 PHP
php自定文件保存session的方法
2014/12/10 PHP
小程序微信支付功能配置方法示例详解【基于thinkPHP】
2019/05/05 PHP
JQuery.uploadify 上传文件插件的使用详解 for ASP.NET
2010/01/22 Javascript
IE6、IE7中setAttribute不支持class/for/rowspan/colspan等属性
2011/08/28 Javascript
简单实用jquery版三级联动select示例
2013/07/04 Javascript
jquery中邮箱地址 URL网站地址正则验证实例代码
2013/09/15 Javascript
使用JS读秒使用示例
2013/09/21 Javascript
Javascript对象属性方法汇总
2013/11/21 Javascript
jQuery制作的别致导航有阴影背景高亮模式窗口
2014/04/15 Javascript
Javascript中使用parseInt函数需要注意的问题
2015/04/02 Javascript
Angular页面间切换及传值的4种方法
2016/11/04 Javascript
bootstrap手风琴制作方法详解
2017/01/11 Javascript
jQuery实现搜索页面关键字的功能
2017/02/16 Javascript
JS中的作用域链
2017/03/01 Javascript
基于jquery trigger函数无法触发a标签的两种解决方法
2018/01/06 jQuery
详解Angular调试技巧之报错404(not found)
2018/01/31 Javascript
js canvas实现写字动画效果
2018/11/30 Javascript
微信小程序如何实现radio单选框单击打勾和取消
2020/01/21 Javascript
如何管理Vue中的缓存页面
2021/02/06 Vue.js
Python实现复杂对象转JSON的方法示例
2017/06/22 Python
tensorflow建立一个简单的神经网络的方法
2018/02/10 Python
解决pycharm无法调用pip安装的包问题
2018/05/18 Python
python 获取字符串MD5值方法
2018/05/29 Python
Python socket聊天脚本代码实例
2020/01/02 Python
Python实现进度条和时间预估的示例代码
2020/06/02 Python
windows支持哪个版本的python
2020/07/03 Python
HTML5本地存储之Web Storage详解
2016/07/04 HTML / CSS
作弊检讨书1000字
2014/02/01 职场文书
安全生产责任书
2014/03/12 职场文书
优秀员工推荐材料
2014/12/20 职场文书
导游词欢迎词
2015/02/02 职场文书
MySQL 数据类型详情
2021/11/11 MySQL