vue 关于数组和对象的更新

在日常开发中,我们用的最多的就是 绑定数据

<div v-for="item in data" :key="item.id">  <!-- 内容 --></div>

如果你有ng的开发经验,假设 data 你要更新数据了

this.data=res.data;

但是这在vue中 并不会起到作用,DOM并没有触发变化。

vue不是已经实现的实时数据双向绑定,那么model层发生了变化之后,为什么view层没有更新呢???

看官网 这里才发现 深入响应式原理  列表渲染

数组检测更细变异的方法

  • push()
  • pop()
  • shift()
  • unshift()
  • splice()
  • sort()
  • reverse()

注意事项

由于 JavaScript 的限制,Vue 不能检测以下变动的数组:

1.  this.data[index] = res.data;

2.  this.data.length = 0;

正确的操作方式

1. Vue.$set(this.data, 1, {name:"huangenai",age:"22"})

2.   vm.items.splice(0)

对象

还是由于 JavaScript 的限制,Vue 不能检测对象属性的添加或删除:

<script>
export default {
      data(){
            return {
                userProfile: {
                    name: ‘Anika‘
                }
                user: {
                   name: "huangenai",
                   age: 12
                }
            }
     },
     mounted() {
           this.$set(this.userProfile, ‘age‘, 27)
           this.user = Object.assign({}, this.user, {
                                     age: 22,
                                     name: "huangenai"
           });
     }
   }
</script>

此随笔乃本人学习工作记录,如有疑问欢迎在下面评论,转载请标明出处。

如果对您有帮助请动动鼠标右下方给我来个赞,您的支持是我最大的动力。

原文地址:https://www.cnblogs.com/huangenai/p/9836811.html

时间: 2024-11-06 17:18:02

vue 关于数组和对象的更新的相关文章

Vue 改变数组中对象的属性不重新渲染View的解决方案

在解决问题之前,我们先来了解下 vue响应性原理: Vue最显著的一个功能是响应系统-- 模型只是一个普通对象,修改对象则会更新视图.受到javascript的限制,Vue不能检测到对象属性的添加或删除,因为vue在初始化实列时将属性转为getter/setter,所以属性必须在data对象上才能让vue转换它.但是vue可以使用 Vue.set(object, key, value)方法将响应属性添加到嵌套的对象上:如下代码: Vue.set(obj, '_isHover', true); 或

vue遍历数组和对象的方法以及他们之间的区别

前言:vue不能直接通过下标的形式来添加数据,vue也不能直接向对象中加值,因为那样即使能加入值页面也不会跟着改变 一,vue遍历数组 1,使用vue数组变异方法 pops 删除数组租后一项 push 往数组里面增加一项 shift 删除数组第一项 unshift 往数组第一项里面加一线内容 splice 数组截取 sort 数组排序 reverse 对数组取反 2,数组的引用 3,vue set方法 二,vue遍历对象 1,对象引用 2,set方法 由于时间问题下回仔细说明,谢谢 原文地址:h

vue watch数组或者对象

1.普通的watch data() { return { frontPoints: 0 } }, watch: { frontPoints(newValue, oldValue) { console.log(newValue) } } 2.数组的watch data() { return { winChips: new Array(11).fill(0) } }, watch: { winChips: { handler(newValue, oldValue) { for (let i = 0;

vue 遍历数组和对象

一,遍历数组 wxml布局 <view class='common_tags_item' wx:for="{{filter_grade_list}}" wx:key="this" bindtap='selectFilterGrade' data-hi="{{index}}" style="background:{{filter_grade===index ? '#FFF5F5': '#F2F2F2'}};border-width:

Vue.set 向响应式对象中添加响应式属性,及设置数组元素触发视图更新

一.为什么需要使用Vue.set? vue中不能检测到数组和对象的两种变化: 1.数组长度的变化 vm.arr.length = 4 2.数组通过索引值修改内容 vm.arr[1] = ‘aa’ Vue.$set(target,key,value):可以动态的给数组.对象添加和修改数据,并更新视图中数据的显示. vue在构造函数new Vue()时,就通过Object.defineProperty中的getter和setter 这两个方法,完成了对数据的绑定.所以直接通过vm.arr[1] =

关于vue数组中对象属性变更页面没重新渲染的问题

前段时间做开发的时候用mqtt监听了服务端信息,推送过来的数据要变更数组里面的对象的数据,修改好后但是页面并没有更新,因为javascript机制,vue并不能检测到数组变化,也是查阅知道了$set()函数, 具体用法: arr.$set(index, { name : value }), index: 索引,name: 数组中对象的属性名, value: 要赋给属性的值 this.footerList.$set(i, { siteId : monitorSiteData[j].siteId,

vue数组和对象方法

变异方法:会改变原始数组 push() pop() shift() unshift() splice() sort() reverse() 非变异方法:不会改变原始数组,但是会返回一个新数组 fliter() slice() concat() vue不能检测变动的数组 利用索引值直接设置内容时 vm.items[indexOfItem] = newValue: 修改数组的长度时 vm.items.length = newLength: //这种写法并不能实时检测到变化 var vm = new

element vue Array数组和Map对象的添加与删除

使用场景: 一个后台系统中, 管理员要配置自定义字段后台要生成id和title,其他角色要使用自定义字段的表单, 添加数据, 但是每个要填写的对象的id 和title都是无法固定的,因此页面显示的title 和id都需要自定义数字和map对象来实现,vue 的数值动态添加内容需要特定的方式: 1.定义一个vue空数组与一个vue 空Map对象: data: function() { return{ arrayData:[],//自定义字段中下拉框的数组 mapData:{},//自定义字段提交保

VUE不能对新增属性监测更新

1 data () { 2 return { 3 data:{}, 4 } 5 }, 6 method:{ 7 if(data.code==0){ 8 this.loading = false; 9 this.data = data.data; 10 this.data.list.forEach(item =>{ 11 item.selected = false; 12 }) 1 checked(item){ 2 if(item.selected){ 3 item.selected = fals