Vue学习笔记之侦听器

本文主要是介绍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();//停止该侦听器}

这篇关于Vue学习笔记之侦听器的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---