详解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 相关文章推荐
推荐dojo学习笔记
Mar 24 Javascript
JavaScript的漂亮的代码片段
Jun 05 Javascript
jquery实现手机号码选号的方法
Jul 31 Javascript
js实现商城星星评分的效果
Dec 29 Javascript
详解Node.Js如何处理post数据
Sep 19 Javascript
移动端触屏幻灯片图片切换插件idangerous swiper.js
Apr 10 Javascript
微信小程序实现折叠面板
Jan 31 Javascript
Vue.js组件使用props传递数据的方法
Oct 19 Javascript
在vue中动态添加class类进行显示隐藏实例
Nov 09 Javascript
JavaScript或jQuery 获取option value值方法解析
May 12 jQuery
VUE使用axios调用后台API接口的方法
Aug 03 Javascript
JavaScript中arguments的使用方法详解
Dec 20 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
博士208HAF收音机实习报告
2021/03/02 无线电
Trying to clone an uncloneable object of class Imagic的解决方法
2012/01/11 PHP
php json与xml序列化/反序列化
2013/10/28 PHP
PHP 正则表达式小结
2015/02/12 PHP
ThinkPHP开发框架函数详解:C方法
2015/08/14 PHP
jquery插件如何使用 jQuery操作Cookie插件使用介绍
2012/12/15 Javascript
jquery中表单 多选框的一种巧妙写法
2015/09/06 Javascript
Bootstrap每天必学之媒体对象
2015/11/30 Javascript
第三章之Bootstrap 表格与按钮功能
2016/04/25 Javascript
asp.net+jquery.form实现图片异步上传的方法(附jquery.form.js下载)
2016/05/05 Javascript
网页挂马方式整理及详细介绍
2016/11/03 Javascript
bootstrap网格系统使用方法解析
2017/01/13 Javascript
AngularJS的依赖注入实例分析(使用module和injector)
2017/01/19 Javascript
从vue源码看props的用法
2019/01/09 Javascript
JavaScript动态创建二维数组的方法示例
2019/02/01 Javascript
JavaScript数组去重实现方法小结
2020/01/17 Javascript
Python松散正则表达式用法分析
2016/04/29 Python
python基于pyDes库实现des加密的方法
2017/04/29 Python
基于DataFrame筛选数据与loc的用法详解
2018/05/18 Python
详解TensorFlow查看ckpt中变量的几种方法
2018/06/19 Python
详解python的sorted函数对字典按key排序和按value排序
2018/08/10 Python
Python从文件中读取数据的方法讲解
2019/02/14 Python
python基于itchat模块实现微信防撤回
2019/04/29 Python
python如何使用Redis构建分布式锁
2020/01/16 Python
tensorflow2.0与tensorflow1.0的性能区别介绍
2020/02/07 Python
CSS3 linear-gradient线性渐变生成加号和减号的方法
2017/11/21 HTML / CSS
html5仿支付宝密码框的实现代码
2017/09/06 HTML / CSS
缓解脚、腿和背部疼痛:Z-CoiL鞋
2019/03/12 全球购物
VICHY薇姿俄罗斯官方网上商店:法国护肤品牌,火山温泉水
2019/11/22 全球购物
房屋租赁协议书
2014/04/10 职场文书
2014年售票员工作总结
2014/11/19 职场文书
悬崖上的金鱼姬观后感
2015/06/15 职场文书
刘胡兰观后感
2015/06/16 职场文书
运动会通讯稿100字
2015/07/20 职场文书
2016暑期校本培训心得体会
2016/01/08 职场文书
2016七夕情人节广告语
2016/01/28 职场文书