Vue学习笔记之侦听器

1、基本侦听器

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

    

        Ask a yes/no question:
        
    
    
{{answer}}

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();//停止该侦听器
        }