Vue学习笔记之侦听器

1、基本侦听器

当简单响应式属性发生变化时，可通过添加属性的侦听器，自动监测属性变化事件，如下代码，定义了3个响应式属性，分别为question、answer、loading，侦听器定义在关键字watch区域，使用语法格式question(newQuestion,oldQuestion)定义侦听器函数，当输入包含?时，将自动调用异步函数getAnswer，从api中获取问题答案，并同步更新响应式属性的数据。

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<div id="app">
    <p>
        Ask a yes/no question:
        <input v-model="question" :disabled="loading" />
    </p>
    <p>{
  {answer}}</p>
</div>
<script>
    const { createApp } = Vue;
    createApp({
        data(){
            return {
                question: '',
                answer: 'Questions usually contain a question mark.;-)',
                loading: false,
                obj: {
                    name:'黄飞虎'
                }
            }
        },
        watch: {
            question(newQuestion, oldQuestion) {
                this.obj.name = newQuestion;
                if (newQuestion.includes('?')) {
                    this.getAnswer();
                }
            },
            'obj.name'(newvalue) {
                console.log(newvalue);
            },
            obj: {
                //handler(newvalue, oldvalue) {
                //    console.log(newvalue.name + ',' + oldvalue.name);
                //},
                //deep: true //深层侦听器，对象任何属性更改均能监测
                handler(newvalue) {
                    console.log(newvalue.name);
                },
                flush:'post',//侦听器回调中访问的 DOM 将是被 Vue 更新之前的状态，则设置此属性
                immediate: true //组件初始化后立即执行上述回调函数
            }
        },
        methods: {
            async getAnswer() {
                this.loading = true;
                this.answer = 'Thinking...';
                try {
                    const res = await fetch('https://yesno.wtf/api');
                    this.answer = (await res.json()).answer;
                } catch (error) {
                    this.answer = 'Error! Could not reach the API.' + error;
                } finally {
                    this.loading = false;
                }
            }
        },
        created() {
            const unwatch = this.$watch('obj.name', (newvalue) => {
                console.log('命令式创建侦听器：'+newvalue);
            });
            unwatch();//停止该侦听器
        }
    }).mount('#app');
</script>

2、层级属性侦听器

可侦听复杂对象的某个属性的变化，使用.隔开关键字语法形式，如上述代码，定义了复杂对象obj，使用语法'obj.name'(newvalue)定义侦听器处理函数。

watch:{
'obj.name'(newvalue) {
                console.log(newvalue);
            }
}

3、深层侦听器

使用deep:true关键字修饰侦听器,可以监听嵌套对象所有属性的变更，如下代码，增加了obj对象的深层侦听器。

watch: {
            obj: {
                handler(newvalue, oldvalue) {
                    console.log(newvalue.name + ',' + oldvalue.name);
                },
                deep: true //深层侦听器，对象任何属性更改均能监测
            }
        }

4、即时回调侦听器

使用immediate: true关键字修饰侦听器,可以在组件初始化之后立即执行侦听器回调函数，

watch: {
            obj: {
                handler(newvalue) {
                    console.log(newvalue.name);
                },
                immediate: true //组件初始化后立即执行上述回调函数
            }
        }

5、回调的触发时机

如果想在侦听器回调中能访问被 Vue 更新之后的 DOM，请使用flush:'post'关键字修饰侦听器,

watch: {
            obj: {
                handler(newvalue) {
                    console.log(newvalue.name);
                },
                flush:'post'//侦听器回调中访问的 DOM 将是被 Vue 更新之前的状态，则设置此属性
            }
        }

6、命令式创建侦听器

可使用关键字$watch创建侦听器，也可以随时停止侦听器，如下代码：

created() {
            const unwatch = this.$watch('obj.name', (newvalue) => {
                console.log('命令式创建侦听器：'+newvalue);
            });
            unwatch();//停止该侦听器
        }