vuejs对象更新渲染_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如下：
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'
// }
}
}
}
对象更新检测
方法一：this.$set()
方法二：Object.assign()
demo.vue
{{object}}
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'
}
}
}
补充：
this.$forceUpdate()迫使 Vue 实例重新渲染。注意它仅仅影响实例本身和插入插槽内容的子组件，而不是所有子组件。
使用 v-if 在切换时，元素及它的绑定数据和组件都会被销毁并重建
参考文献
vuejs对象更新渲染_vue 数组和对象渲染问题相关推荐
- vue 对象里面放数组刷新问题_Vue 数组和对象更新,但是页面没有刷新的解决方式...
在使用数组的时候,数组内部数据发生改变,但是与数组绑定的页面的数据却没有发生变化. {{item.name}} data () { return { msg: 'Welcome to Your Vue ...
- some数组遍历的用法/得到两组数组对象中某属性相同or不同的对象/对比两组数组中, 对象的某个值重复
很早就知道some方法, 最近需求需要排查两组数组中有相同id的对象和不同id的对象, 实际运用到了some的妙用~ 首先举例我的需求如下(得到id相同和id不同的数据): const aa = [{ ...
- js根据对象中属性删除数组中对象
list.forEach((value,index)=>{if(value.content==content){list.splice(index,1)} })
- java vue 服务端渲染_vue ssr服务端渲染小白解惑
vue ssr服务端渲染小白解惑 >初学ssr入坑 初学vue服务端渲染疑惑非常多,我们大部分前端都是半路出家,上手都是前后端分离,对服务端并不了解,不说java.php语言了,连node服务都 ...
- JS 数组转对象 对象转数组 对象数组互相转换
js 对象数组互相转换 数组转换为对象 JS 数组转对象 对象转数组 对象数组互相转换 数组对象互相转换 JS 数组转对象.对象转数组(针对嵌套深层次比较深的对象或者数组) JS 声明一个函数,arr ...
- json vue 对象转数组_vue.js基于v-for实现批量渲染 Json数组对象列表数据示例
本文实例讲述了vue.js基于v-for实现批量渲染 json数组对象列表数据.分享给大家供大家参考,具体如下: vuejs的出现减轻了对dom的直接操作,同时它提供的 v-for 渲染列表数据也给我 ...
- vue更新数组和对象
vue更新数组和对象 https://cn.vuejs.org/v2/guide/list.html#数组更新检测 更改数组对象 let items=this.formValidate.items; ...
- watch深度监听数组_vue watch普通监听和深度监听实例详解(数组和对象)
vue watch普通监听和深度监听实例详解(数组和对象) 下面通过一段代码给大家介绍vue watch的普通监听和深度监听,具体代码如下所示: var vm=new Vue({ data:{ num ...
- Vue更新数组和对象的方法
1.更新数组中元素值:vue.set(this.对象,下标,新值) 由于 JavaScript 的限制,利用索引直接修改数组元素时,Vue 不能检测数组的变动: 正确的方法: Vue.set(vm.i ...
最新文章
- 新冠图像数据分析论文集合（附链接）
- 2019.4.1考试2019.4.2考试2019.4.4考试
- 操作系统：操作系统知识点总结
- JAVA继承类phone_JAVA（9）继承与多态
- Python for Data Analysis
- 用原生 JS 实现 MVVM 框架2——单向绑定
- 【报告分享】致胜直播带货十大法则.pdf（附下载链接）
- 5.Knockout.Js（自定义绑定）
- 【BERT】小学生级上手教程，从原理到上手全有图示，还能直接在线运行
- Java Word文档模板内容替换
- 毕业实习笔记——WRF模式入门(Cygwin版）
- Android studio 获取MD5和SHA1
- typename和class
- 百万调音师—音频基础知识
- 关于java字符流Reader.read()方法的个人理解
- 查看所连接局域网内所有ip
- Dreamwave cs6下载
- 【互联网及其应用】第2章互联网技术
- 武汉大学计算机应用技术考研经验分享,武汉大学计算机应用技术考研
- ABP.VNEXT框架系列之一：第一个ABP VNEXT 应用