vue 数组和对象渲染问题
vue 数组和对象渲染问题
最近项目有点忙碌,遇到好多问题都没有总结(╥﹏╥),在开发过程中,取vuex
中的数组渲染完成之后,再次修改数组的值,数据更新了,但是视图并没有更新。以为是数组更新
的问题,后来又以为是因为vuex
导致的问题. 最后强制刷新组件解决了问题,但是还没有找到根本问题的所在...
数组更新检测
- 在 vue 中使用数组的
push()
、pop()
、shift()
、unshift()
、splice()
、sort()
、reverse()
、filter()
、concat()
方法时,改变数组的同时可以触发视图的变化。 - 注意: 有两种情况 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>
对象更新检测
方法一: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/#...
https://cn.vuejs.org/v2/guide...
来源:https://segmentfault.com/a/1190000016475738
vue 数组和对象渲染问题的更多相关文章
- vue数组中对象属性变化页面不渲染问题
问题引入 Vue之所以能够监听Model状态的变化,是因为JavaScript语言本身提供了Proxy或者Object.observe()机制来监听对象状态的变化.但是,对于数组元素的赋值,却没有办法 ...
- vue 数组和对象不能直接赋值情况和解决方法
Vue 不能检测以下变动的数组: 当你利用索引直接设置一个项时,例如:vm.items[indexOfItem] = newValue 当你修改数组的长度时,例如:vm.items.length = ...
- vue 数组、对象 深度拷贝和赋值
由于此对象的引用类型指向的都是一个地址(除了基本类型跟null,对象之间的赋值,只是将地址指向同一个,而不是真正意义上的拷贝) 数组: let a = [11,22,33]; let b = a; / ...
- vue 数组和对象的双向绑定不响应问题
对象和数组的数据类型是对象,对象是对象这个是毫无疑问的.数组可以把索引当成键名,把索引对应的元素当成该键名的键值. vue对象有些操作不能双向绑定的原因是vue未改变原对象,以及未给新增属性增加set ...
- Vue 数组和对象更新,但是页面没有刷新
在使用数组的时候,数组内部数据发生改变,但是与数组绑定的页面的数据却没有发生变化. <ul> <li v-for="(item,index) in todos" ...
- Vue 改变数组中对象的属性不重新渲染View的解决方案
Vue 改变数组中对象的属性不重新渲染View的解决方案 在解决问题之前,我们先来了解下 vue响应性原理: Vue最显著的一个功能是响应系统-- 模型只是一个普通对象,修改对象则会更新视图.受到ja ...
- vue中改变数组或对象,页面没做出对应的渲染
原文链接 数组更新检测 变异方法 Vue 包含一组观察数组的变异方法,所以它们也将会触发视图更新.这些方法如下: push() pop() shift() unshift() splice() sor ...
- Vue不能检测数组或对象变动问题的解决
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vue遍历数组和对象的方法以及他们之间的区别
前言:vue不能直接通过下标的形式来添加数据,vue也不能直接向对象中插值,因为那样即使能插入值,页面也不会重新渲染数据 一,vue遍历数组 1,使用vue数组变异方法 pop() 删除数组最后一 ...
随机推荐
- 【边双连通】poj 3352 Road Construction
http://poj.org/problem?id=3352 [题意] 给定一个连通的无向图,求最少加多少条边使得这个图变成边双连通图 [AC] //#include<bits/stdc++.h ...
- 关于时区、时间戳引起的bug理解
时间戳定义:0时区1970年1月1日到现在的毫秒数,所以全世界同一时刻的时间戳都是一样的. 北京时间对应时间戳=unix(0时区对应时间的时间戳)-8*60*60*1000(8小时的毫秒数)----- ...
- git提交之后没有push,代码被覆盖之后恢复
git reflog 通过这个看commit id git reset [commit id] --hard 有时候要删除一个index.lock文件.
- Requests模拟登陆
requests模拟登陆知乎网站 实例 # -*- coding: utf-8 -*- __author__ = 'CQ' import requests try: import cookielib ...
- 不拖控件的asp.net编程方法——第1回
以前写的asp.net程序基本上都用了webfrom的控件编写的,当然有个好处就是易入门.快速效率高,但感觉自己这了几个小系统,还是没学到什么东西,感觉心里没底,因为都是封装好的东西,拿来就用的,功能 ...
- 关于傅里叶变换NTT(FNT)的周边
NTT:快速数论变化,对于FFT精度减少的情况,NTT可以避免但是会慢一点,毕竟是数论有Mod,和快速米 引用:http://blog.csdn.net/zz_1215/article/details ...
- kafka exactly-once
2018年,Apache Kafka以一种特殊的设计和方法实现了强语义的exactly-once和事务性. 这篇文章将讲解kafka中exactly-once和事务操作的原理,具体为 (1)exact ...
- go语言学习之路五:Go语言内存分配机制make&new
Go有两种分配内存的机制,规则很简单,下面来简单介绍一下.1.new函数New()函数可以给一个值类型的数据分配内存(不知道什么是值类型请前往切片那一部分),调用成功后返回一个初始化的内存块指针,同时 ...
- Angular 组件通讯、生命周期钩子 小结
本文为原创,转载请注明出处: cnzt 文章:cnzt-p http://www.cnblogs.com/zt-blog/p/7986858.html http://www.cnblogs ...
- GeoServer发布Heatmap
转自原文 GeoServer发布Heatmap 百度等热力图是使用开源的heatmap.js做的,但是这种解决方案的缺陷是: 1 数据量大的话,从前端通过后台查询比较费时,比如arcserver默认设 ...