详解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 相关文章推荐
jQuery删除节点的三个方法即remove()detach()和empty()
Dec 27 Javascript
ExtJs纵坐标值重复问题的解决方法
Feb 27 Javascript
jquery uploadify 在FF下无效的解决办法
Sep 26 Javascript
复制网页内容,粘贴之后自动加上网址的实现方法(脚本之家特别整理)
Oct 16 Javascript
JavaScript获取当前日期是星期几的方法
Apr 06 Javascript
Angular中$cacheFactory的作用和用法实例详解
Aug 19 Javascript
利用NPM淘宝的node.js镜像加速nvm
Mar 27 Javascript
jQuery实现的淡入淡出图片轮播效果示例
Aug 29 jQuery
如何基于JS截获动态代码
Dec 25 Javascript
vue 对axios get pust put delete封装的实例代码
Jan 05 Javascript
微信小程序将页面按钮悬浮固定在底部的实现代码
Oct 29 Javascript
通过滑动翻页效果实现和移动端click事件问题
Jan 26 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水印技术
2007/02/14 PHP
php addslashes和mysql_real_escape_string
2010/01/24 PHP
64位windows系统下安装Memcache缓存
2015/12/06 PHP
PHP实现简易blog的制作
2016/10/24 PHP
php处理多图上传压缩代码功能
2018/06/13 PHP
javascript 获取页面的高度及滚动条的位置的代码
2010/05/06 Javascript
让input框实现类似百度的搜索提示(基于jquery事件监听)
2014/01/31 Javascript
使用原生js封装webapp滑动效果(惯性滑动、滑动回弹)
2014/05/06 Javascript
js随机生成网页背景颜色的方法
2015/02/26 Javascript
JS实现可直接显示网页代码运行效果的HTML代码预览功能实例
2015/08/06 Javascript
Js实现简单的小球运动特效
2016/02/18 Javascript
Vue.js系列之vue-router(上)(3)
2017/01/03 Javascript
jQuery电话号码验证实例
2017/01/05 Javascript
Bootstrap面板学习使用
2017/02/09 Javascript
layui前端框架之table表数据的刷新方法
2018/08/17 Javascript
vue添加axios,并且指定baseurl的方法
2018/09/19 Javascript
angular6根据environments配置文件更改开发所需要的环境的方法
2019/03/06 Javascript
webpack+vue-cil 中proxyTable配置接口地址代理操作
2020/07/18 Javascript
[00:38]TI珍贵瞬间系列(二):笑
2020/08/26 DOTA
python编程-将Python程序转化为可执行程序[整理]
2007/04/09 Python
使用Python搭建虚拟环境的配置方法
2018/02/28 Python
Python批处理更改文件名os.rename的方法
2018/10/26 Python
Python实现查找字符串数组最长公共前缀示例
2019/03/27 Python
python 绘制拟合曲线并加指定点标识的实现
2019/07/10 Python
使用Python paramiko模块利用多线程实现ssh并发执行操作
2019/12/05 Python
Python实现i人事自动打卡的示例代码
2020/01/09 Python
重构Python代码的六个实例
2020/11/25 Python
6种非常炫酷的CSS3按钮边框动画特效
2016/03/16 HTML / CSS
Parfumdreams英国:香水和化妆品
2019/05/10 全球购物
PHP如何去执行一个SQL语句
2016/03/05 面试题
婚纱摄影师求职信范文
2014/04/17 职场文书
党的群众路线学习材料
2014/05/16 职场文书
创先争优活动承诺书
2014/08/30 职场文书
2015年建筑工程工作总结
2015/05/13 职场文书
大学毕业典礼致辞
2015/07/29 职场文书
感谢信的技巧及范例
2019/05/15 职场文书