[06] watch侦听器（监视器）

最新推荐文章于 2024-08-21 14:09:37 发布

亦昭昭

最新推荐文章于 2024-08-21 14:09:37 发布

阅读量1.2k

点赞数 34

分类专栏：记录vue学习文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/z240113765/article/details/136216144

版权

记录vue学习专栏收录该内容

10 篇文章 0 订阅

订阅专栏

本文详细介绍了Vue.js中如何使用watch侦听器监控数据变化，包括简单写法的直接监视数据和对象属性，以及完整写法的深度监听和立即执行。通过实例演示了配置项如`deep`和`immediate`的应用。

摘要由CSDN通过智能技术生成

watch侦听器简单写法

作用：监视数据变化，执行一些业务逻辑或异步操作
语法：
1. watch同样声明在跟data同级的配置项中
2. 简单写法：简单类型数据直接监视
3. 完整写法：添加额外配置项

data: { 
  words: 'apple',
  obj: {
    words: 'apple'
  }
},

watch: {
  // 该方法会在数据变化时，触发执行
  数据属性名 (newValue, oldValue) {
    一些业务逻辑或异步操作。 
  },
  '对象.属性名' (newValue, oldValue) {
    一些业务逻辑或异步操作。 
  }
}

示例1：直接监视

在这里插入图片描述

 <div class="box">
            <div class="input-wrap">
                <textarea v-model="words"></textarea>
                <!-- <textarea v-model="obj.words"></textarea> -->
                <span><i>⌨️</i>文档翻译</span>
            </div>
            <div class="output-wrap">
                <div class="transbox">mela</div>
            </div>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                words: ''
            },
            watch: {
                // 数据变化时调用执行
                words(newValue, oldValue) {
                    console.log('变化', newValue, oldValue);
                }
            }
        })
    </script>

示例2：监视对象中的键值

在这里插入图片描述

<div class="box">
            <div class="input-wrap">
                <!-- <textarea v-model="words"></textarea> -->
                <textarea v-model="obj.words"></textarea>
                <span><i>⌨️</i>文档翻译</span>
            </div>
            <div class="output-wrap">
                <div class="transbox">mela</div>
            </div>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script>
      const app = new Vue({
            el: '#app',
            data: {
                // words: ''
                obj: {
                    words: ''
                }
            },
            watch: {
                // 数据变化时调用执行
                // words(newValue, oldValue) {
                //     console.log('变化', newValue, oldValue);
                // }
                'obj.words'(newValue, oldValue) {
                    console.log('变化', newValue, oldValue);
                }
            }
        })
    </script>

watch侦听器完整写法

完整写法需添加额外的配置项

deep:true 对复杂类型进行深度监听
immdiate:true 初始化立刻执行一次handler方法

data: {
  obj: {
    words: 'apple',
    lang: 'italy'
  },
},

watch: {// watch 完整写法
  数据属性名: {
    deep: true, // 深度监视
    immediate: true, // 是否立刻执行一次handler,即初始的时候
    handler (newValue) {
      console.log(newValue)
    }
  }
}

总结

1.简单写法

watch: {
  数据属性名 (newValue, oldValue) {
    一些业务逻辑或异步操作。 
  },
  '对象.属性名' (newValue, oldValue) {
    一些业务逻辑或异步操作。 
  }
}

2.完整写法

watch: {// watch 完整写法
  数据属性名: {
    deep: true, // 深度监视(针对复杂类型)
    immediate: true, // 是否立刻执行一次handler，即初始的时候
    handler (newValue) {
      console.log(newValue)
    }
  }
}