watch侦听器

vue2
1.2k 词
watch侦听器

watch侦听器(监视器)#

作用： 监视数据变化 ，执行一些业务逻辑或异步操作

典型场景：实时翻译

语法：

  1. 简单写法--简单类型数据，直接监视
  2. 完整写法--添加额外配置项 watch ，与data、methods同级

简单写法#

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

实例-实时翻译#

翻译成的语言：
⌨️ 文档翻译 
<div id="app">
    <!-- 条件选择框 -->
    <div class="query">
        <span>翻译成的语言：</span>
        <select>
            <option value="italy">意大利</option>
            <option value="english">英语</option>
            <option value="german">德语</option>
        </select>
    </div>
    <!-- 翻译框 -->
    <div class="box">
        <div class="input-wrap">
            <textarea v-model="obj.words"></textarea>
            <span>
                <i>⌨️</i>
                文档翻译
            </span>
        </div>
        <div class="output-wrap">
            <div class="transbox">{{ result }}</div>
        </div>
    </div>
</div>
const app = new Vue({
    el: '#app',
    data: {
        // words: '',
        obj: {
            words: '',
        },
        result: '',
    },
    watch: {
        // 该方法会在数据变化时调用执行
        // 旧的值oldValue一般不用，可以省略的
        async 'obj.words'(newValue, oldValue) {
            const res = await axios({
                url: 'https://applet-base-api-t.itheima.net/api/translate',
                params: {
                    words: newValue,
                },
            });
            this.result = res.data.data;
        },
    },
});

防抖优化#

防抖：延迟执行，一段时间内多次触发只执行最后一次

若一输入内容就开始翻译，即使输入一个字母也发送一次请求，那么太耗费资源了

于是做一下防抖，每隔1s无输入才请求一次

'obj.words'(newValue, oldValue) {
    clearTimeout(this.timer);
    this.timer = setTimeout(async () => {
        const res = await axios({
            url: 'https://applet-base-api-t.itheima.net/api/translate',
            params: {
                words: newValue,
            },
        });
        this.result = res.data.data;
    }, 1000);
},

完整写法#

  1. deep:true 对复杂类型深度监视
  2. immediate:true 初始化立刻执行一次handler方法 
data: {
    obj: {
        words: 'andy',
        lang: 'italy',
    },
},
watch: {
    // watch完整写法
    数据属性名: {
        deep: true, // 深度监视
        handler(newValue) {
            console.log(newValue);
        },
    },
},

需求：输入内容，修改语言，两个操作都会实时翻译

data: {
    // words: '',
    obj: {
        words: 'hello',
        lang: 'italy',
    },
    result: '',
    // timer: null, // 延时器id，无响应式特性，可以直接省略
},
watch: {
    obj: {
        deep: true, // 深度监视
        immediate: true, // 立刻执行
        handler(newValue) {
            console.log(newValue);
            clearTimeout(this.timer);
            this.timer = setTimeout(async () => {
                const res = await axios({
                    url: 'https://applet-base-api-t.itheima.net/api/translate',
                    params: newValue,
                });
                console.log(res.data.data);
                this.result = res.data.data;
            }, 1000);
        },
    },
    // 该方法会在数据变化时调用执行
    // 旧的值oldValue一般不用，可以省略的
    // 'obj.words'(newValue, oldValue) {},
},