vue中watch监听对象中某个属性的方法

目录
  • immediate 和 handler
  • deep 深度监听
    • 以currentParams为例，监听selOrgId属性

immediate 和 handler

watch 的用法有个特点，就是当值第一次绑定的时候，不会执行监听函数，只有值发生改变才会执行。如果我们需要在最初绑定值得时候也执行函数，就需要用到 immediate 属性。

'currentParams.selOrgId': {
    handler(newV, oldV) {
        console.log("watch", newV, oldV)
    },
    immediate: true
}

deep 深度监听

当需要监听复杂的数据类型（对象）的改变时，普通的 watch 方法无法坚挺到对象内部属性的改变，此时就需要使用 deep 属性对对象进行深度监听。

currentParams: {
    handler (newV, oldV) {
        console.log('watch深度监听：', newV, oldV);
    },
    deep: true
}

watch深度监听 ，可以监听到对象中每个属性的变化，但是会给对象的所有属性都加上这个监听器，当对象属性较多时，每个属性值得变化都会执行 handler 。

以currentParams为例，监听selOrgId属性

data(){
    return {
        currentParams: {
            selOrgId: '1'
        },
    }
}

1.通过input输入框触发watch

<input v-model="currentParams.selOrgId" />

data(){
    return {
        currentParams: {
            selOrgId: '1',//声明不声明都可以触发watch
        },
    }
},

watch: {
    'currentParams.selOrgId': (newV, oldV) => {
        console.log("watch", newV, oldV)
    },
},

2.通过js动态修改对象中属性值触发watch

data(){
    return {
        currentParams: {

        },
    }
},

watch: {
    'currentParams.selOrgId': (newV, oldV) => {
        console.log("watch", newV, oldV)
    },
},
methods: {
    triggerWatch () {
        方法一、要监听的属性值（currentParams.selOrgId）不需要事先声明
        this.currentParams=Object.assign({}, this.currentParams, {selOrgId:
        "改变后的值"});

        方法二、要监听的属性值（currentParams.selOrgId）不需要事先声明
        this.$set(this.currentParams,'selOrgId',"改变后的值")

        方法三、要监听的属性值（currentParams.selOrgId）需要事先声明，否则监听不到
        this.currentParams.selOrgId = "改变后的值";
    }
}

到此这篇关于vue中watch监听对象中某个属性的文章就介绍到这了,更多相关vue watch监听对象属性内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 解决Vue2.0 watch对象属性变化监听不到的问题

    问题 很早之前就遇到一个问题,父组件向子组件传值,子组件监听传入对象的某个属性.发现子组件使用deep watch都不能观察到对象中属性的变化,今天终于找到为啥出现这种问题和解决办法了. 解决 为啥出现这种问题?受 ES5 的限制,Vue.js 不能检测到对象属性的添加或删除. 请参照https://v1-cn.vuejs.org/guide/reactivity.html 解决方式: 通过vue的this.$set(object, key, value)方法 通过Object.assign()

  • Vue开发之watch监听数组、对象、变量操作分析

    本文实例讲述了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: { winCh

  • Vue踩坑之Vue Watch方法不能监听到数组或对象值的改变详解

    Vue踩坑之Vue Watch方法不能监听到数组或对象值的改变详解

    目录 前言 一:利用索引直接改变arr的值 如我在button事件中写的(arr[0]=1000) 二:直接修改数组的长度 如this.arr.length=3 总结如下 前言 Vue不能监听到数组和对象值的变化其实和双向绑定的原理有关.Vue双向绑定原理是利用js中的Object.defineproperty重定义对象的GET和SET方法,而同时这种方法存在着缺陷.就是只能监听到对象内已有的值.在监听对象中属性变化的方法中中,无疑是 使用ES6的proxy更为优越. 同时我对Vue中不能监听到

  • 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使用watch监听一个对象中的属性的实现方法

    问题描述 Vue提供了一个watch方法可以让使用者去监听某些data内的数据变动,触发相应的方法,比如 queryData: { name: '', creator: '', selectedStatus: '', time: [], }, 第一种解决方案:直接对象 现在我需要监听这个queryData,我可以这样做: watch: { queryData: { handler: function() { //do something }, deep: true } } 第二种解决方案:dee

  • vue中watch监听对象中某个属性的方法

    目录 immediate 和 handler deep 深度监听 以currentParams为例,监听selOrgId属性 immediate 和 handler watch 的用法有个特点,就是当值第一次绑定的时候,不会执行监听函数,只有值发生改变才会执行.如果我们需要在最初绑定值得时候也执行函数,就需要用到 immediate 属性. 'currentParams.selOrgId': { handler(newV, oldV) { console.log("watch", ne

  • Vue3中watch监听对象的属性值(监听源必须是一个getter函数)

    目录 Vue3 中使用 watch 侦听对象中的具体属性 1.前言 2. 原因 3.watch源码分析 4.doWatch源码分析 5.总结 Vue3 中使用 watch 侦听对象中的具体属性 1.前言 <script lang="ts" setup> // 接受父组件传递的数据 const props = defineProps({ test: { type: String, default: '' } }) // 使用 watch 侦听 props 中的 test 属性

  • vue watch深度监听对象实现数据联动效果

    vue watch深度监听对象实现数据联动效果

    当对象内的某一个元素发生变化,判断对象另一元素,并进行赋值 <template> <input type="text" v-model="a.a1.a12"/>{{a.a1.a12}} <input type="text" v-model="a.a2.a22"/>{{a.a2.a22}} </template> <script> data(){ retrun{ a:{

  • VUE 实现滚动监听 导航栏置顶的方法

    HTML 非重点的代码,比如样式啥的,我就不放上来了,一笔带过 简略的写一下html代码,可以对照文章最后的效果图看,应该不难理解 <div :style="{ paddingBottom: paddingBottom}"> <header>资源信息</header> <div> <!-- 公司信息 浏览量 --> </div> <div id="fixedBar" :class=&quo

  • React在组件中如何监听redux中state状态的改变

    React在组件中如何监听redux中state状态的改变

    目录 在组件中监听redux中state状态的改变 解决方式 React和redux的状态处理 在组件中监听redux中state状态的改变 解决方式 1.在组件中引入store 2.在constructor构造器方法中,重写store.subscribe方法(该方法即是监听state状态改变的放过) 组件完整代码如下: import React, { Component } from 'react' import CSSModules from 'react-css-modules'  imp

  • VUE3中watch监听使用的不同情况总结

    目录 watch介绍 watch监听的不同情况 1 监听单个refimpl数据 2 监听多个refimpl数据 3 监听proxy数据 4 监听proxy数据的某个属性 5 监听proxy数据的某些属性 总结 watch介绍 vue中watch用来监听数据的响应式变化.获取数据变化前后的值 watch的完整入参 watch(监听的数据,副作用函数,配置对象) watch(data, (newData, oldData) => {}, {immediate: true, deep: true})

  • vue监听对象及对象属性问题

    监听整个对象,使用watch就行 export default { data() { return { a: { b: 1, c: 2 } } }, watch() { a: { handler(newVal, oldVal) { console.log('监听a整个对象的变化'); }, deep: true } } } 监听对象中具体属性的变化,需要使用watch配合computed export default { data() { return { a: { b: 1, c: 2 } }

  • 关于vue中如何监听数组变化

    关于vue中如何监听数组变化

    前言 前段时间学习了关于vue中响应式数据的原理,(并作了学习笔记vue响应式原理),其实是通过Object.defineProperty控制getter和setter,并利用观察者模式完成的响应式设计.那么数组有一系列的操作方法,这些方法并不会触发数组的getter和setter方法.那么vue中针对数组的响应式设计是如何实现的呢...那么我们一起去学习下吧~ 源码部分 https://github.com/vuejs/vue/blob/dev/src/core/observer/array.

  • vue中同时监听多个参数的实现

    目录 如何同时监听多个参数 data中定义一个对象 完整代码 vue事件监听,条件判断 事件监听 v-on 条件判断 如何同时监听多个参数 vue使用watch同时监听多个参数,其中有任意一个参数发生改变时,都会被监听到需要使用到计算属性computed与监听watch data中定义一个对象 data(){     return{         obj:{             name:'xpf',             gender:'male',             age:2

随机推荐