vue 2.0 watch 监听对象的变化

矫情吗；* 2022-01-07 13:47 643阅读 0赞

#### 导读 ####

使用 `Vue` 中的 `watch` 方法监听对象，设置 `deep:true` 可以进行深度监听，当对象中的属性发生变化时，会调用 `handler` 方法。

<template>
        <div>
            <input v-model="test.text">
        </div>
    </template>
      
    <script>
    export default {
        data () {
            return {
                test: {
                    text: ''
                }
            }
        },
      
        watch:{
            test: {
                deep: true,
                handler: function (newVal,oldVal){
                    console.log('newValue', newVal);
                    console.log('oldValue', oldVal.text);
                }
            }
        }
    }
    </script>

如果需要只监听对象中某一属性的变化，`watch` 也能实现，另外也可以结合使用计算属性 `computed` 来对此进行监听。

<script>
    export default {
        data () {
            return {
                test: {
                    text1: '',
                    text2: ''
                }
            }
        },
        
        watch:{
            'test.text1': {
                deep: true,
                handler: function (newVal,oldVal){
                    // code
                }
            }
        }
    }
    </script>

以下是结合计算属性对某一对象的单一属性实现监听的方法：

<script>
    export default {
        data () {
            return {
                test: {
                    text1: '',
                    text2: ''
                }
            }
        },
        computed:{
            testText1 () {
                return this.test.text1
            }
        },
        watch:{
            testText1: {
                dosomething (newVal,oldVal){
                    // code
                }
            }
        }
    }
    </script>

##### 写在最后 #####

如果文中有什么错误，欢迎大家指正，我们不怕错，就怕错不知。感谢。

转载于:https://www.cnblogs.com/anani/p/9287986.html

发表评论取消回复

表情：

评论列表（有 0 条评论，643人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue 的 watch 监听实现代码

var vm = new Vue({ el: "app", data: { firstname: "",

女爷i/ 2023年01月11日 09:25/ 0 赞/ 231 阅读

相关 html 监听后端变化_Vue.js中 watch(深度监听)

![3614479af92b1e18b28f09a4b08bfdec.png][] ![2d0fa97e9e8d96649872706c84acab73.png][] h

「爱情、让人受尽委屈。」/ 2023年01月04日 13:10/ 0 赞/ 344 阅读

相关 Vue - watch监听对象变化

1. 监听非对象的属性监听props-msg和data，分别是String和Number属性；可以正常监听到变化 // Parent <te

蔚落/ 2022年12月23日 03:53/ 0 赞/ 261 阅读

相关 vue监听和深度监听watch

watch可以让我们监控一个值的变化，从而做出相应的反应。 <div id="app"> 用户名：<input type="text" v-m

向右看齐/ 2022年12月11日 06:29/ 0 赞/ 188 阅读

相关 Vue使用watch监听一个对象中的属性

问题描述 Vue提供了一个watch方法可以让使用者去监听某些data内的数据变动，触发响应的办法：比如 queryData: { name:

怼烎@/ 2022年10月13日 12:58/ 0 赞/ 200 阅读

相关 uniapp 使用 watch 监听属性的变化

<input type="text" v-model="propName"/> watch: \{ propName: \{ han

雨点打透心脏的1/2处/ 2022年09月05日 00:27/ 0 赞/ 1431 阅读

相关 vue watch属性的简单使用，watch监听对象变化

代码中监听了一个简单的属性currentPage和一个对象selectForm,只要它们的值一改变就会触发其中的逻辑函数或者异步请求 watch: {

浅浅的花香味﹌/ 2022年04月08日 08:42/ 0 赞/ 391 阅读

相关 vue 2.0 watch 监听对象的变化

导读使用 `Vue` 中的 `watch` 方法监听对象，设置 `deep:true` 可以进行深度监听，当对象中的属性发生变化时，会调用 `handler` 方法。

矫情吗；*/ 2022年01月07日 13:47/ 0 赞/ 644 阅读

相关微信小程序 watch监听数据变化类似vue中的watch

1.参考 [https://github.com/donghaohao/vuefy][https_github.com_donghaohao_vuefy] 2.项目使用

系统管理员/ 2021年12月22日 11:23/ 0 赞/ 371 阅读

相关第八章 watch监听 83 名称案例-使用watch监听文本框数据的变化

1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <met

╰+哭是因爲堅強的太久メ/ 2021年11月04日 11:44/ 0 赞/ 320 阅读