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; i < newValue.length; i++) {
        if (oldValue[i] != newValue[i]) {
          console.log(newValue)
        }
      }
    },
    deep: true
  }
}

3、对象的watch

data() {
  return {
    bet: {
      pokerState: 53,
      pokerHistory: ‘local‘
    }
    }
},
watch: {
  bet: {
    handler(newValue, oldValue) {
      console.log(newValue)
    },
    deep: true
  }
}

tips: 只要bet中的属性发生变化(可被监测到的),便会执行handler函数;如果想监测具体的属性变化,如pokerHistory变化时,才执行handler函数,则可以利用计算属性computed做中间层。事例如下:
4、对象具体属性的watch[活用computed]

data() {
  return {
    bet: {
      pokerState: 53,
      pokerHistory: ‘local‘
    }
    }
},
computed: {
  pokerHistory() {
    return this.bet.pokerHistory
  }
},
watch: {
  pokerHistory(newValue, oldValue) {
    console.log(newValue)
  }
}

原文地址:https://www.cnblogs.com/kennyliu/p/9573276.html

时间: 2024-08-30 16:34:43

vue watch数组或者对象的相关文章

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 关于数组和对象的更新

在日常开发中,我们用的最多的就是 绑定数据 <div v-for="item in data" :key="item.id"> <!-- 内容 --></div> 如果你有ng的开发经验,假设 data 你要更新数据了 this.data=res.data; 但是这在vue中 并不会起到作用,DOM并没有触发变化. vue不是已经实现的实时数据双向绑定,那么model层发生了变化之后,为什么view层没有更新呢??? 看官网 这里

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数组中对象属性变更页面没重新渲染的问题

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

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

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

vue数组和对象方法

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

vue的数组如何存储数据

vue 和 angular 还有有些区别的, 比如,vue中的数组数据改变后,view并没有发生改变,angular就不会这样. 所以VUE 在数组扩展方法中提供以了一个新的API arr.$set(index, value); 此方法通过索引index设置数组元素来触发视图的跟新. 例如:vue 中的 data { return { aa: [{name:jxj,age:25},{name:jxj2,age:252},{name:jxj3,age:253}]   } } view : 中  <

Vue中的混入对象mixins

Vue中的混入对象mixins mixins的定义 混入是分发vue组件中可复用功能的非常灵活的方式.混入对象可以包含任意组件选项,当组件使用混入对象时,所有混入对象的选项将被混入该组件本身的选项. 选项合并规则 当组件和混入对象含有同名选项时,这些选项将以恰当的方式混合: 同名钩子函数将会被混合为一个数组,因此都会被调用(组合) 混入对象的钩子将在组件自身钩子函数之前调用(调用顺序) 数据对象data在内部会进行浅合并(一层属性深度),在和组件的数据发生冲突时以组件数据优先 两个对象键名冲突时