Vue3入门-02侦听器

Vue-02侦听器

选项式API中的侦听器

函数式侦听器

watch中声明的函数即为函数式侦听器，其中函数名就是要侦听的数据源，函数中的参数1位新数据值，参数2为旧数据值

<script>
    export default {
        data:()=>({
            age:30,
            info:{
                name:'张三',
                age:20
        	}
        }),
        watch:{
            age(newData, oldData){
                console.log('newData:'+newData)
                console.log('oldData' + oldData)
            },
            'info.name'(newData, oldData){
                console.log('newData:'+newData)
                console.log('oldData:' + oldData)
            }
        }
    }
</script>

<template>
	年龄:<input type="number" v-model="age">
</template>

对象是监听器

<script>
    export default {
        data:()=>({
            age:30,
            info:{
                name:'张三',
                age:20
        	}
        }),
        watch:{
            age:{
                handler(newData, oldData){
                    console.log('newData:'+newData)
                    console.log('oldData' + oldData)
            	}
        	},
            'info.name':{
                handler(newData, oldData){
                    console.log('newData:'+newData)
                    console.log('oldData' + oldData)
                }
            }
    	}
	}
</script>

<template>
	年龄:<input type="number" v-model="age">
	姓名：<input type="String" v-model="info.name">
	年龄：<input type="String" v-model="info.age">
</template>

在Vue2中并不支持整个对象的监听，只能对对象中数据进行监听，而Vue3支持对对象下的属性进行监听。Vue2中只有更改整个对象，才能被侦听到，而Vue3只有改变对象的值，才能被侦听到。

<script>
    export default {
        data:()=>({
            age:30,
            info:{
                name:'张三',
                age:20
        	}
        }),
        watch:{
            age:{
                handler(newData, oldData){
                    console.log('newData:'+newData)
                    console.log('oldData' + oldData)
            	}
        	},
            'info':{
                deep:true,
                handler(newData, oldData){
                    console.log('newData:'+newData)
                    console.log('oldData' + oldData)
                }
            }
    	}
	}
</script>

<template>
	年龄:<input type="number" v-model="age">
	姓名：<input type="String" v-model="info.name">
	年龄：<input type="String" v-model="info.age">
</template>

vue3中为watch提供了三个关键字，帮助监听工作能够更好地进行：

• deep
  • 使用此关键词可以进行对象值的监听
  • deep:true
• immediate
  • 使用此关键词可以在第一次未监听前完成一次监听动作
• flush
  • 默认情况下，用户创建的侦听回调，都会在Vue组件更新之前被调用，这意味着你在侦听回调中访问的DOM将是Vue更新之前的状态。
  • 如果想在侦听器回调中能访问被Vue更新之后的DOM，需要指定flush:'post'

通过this.$watch来进行监听

一般的格式为this.$watch(变量名，匿名函数，object)

<script>
    export default {
        data:()=>({
            age:30,
            info:{
                name:'张三',
                age:20
        	},
            stopWatch:null
        }),
        mounted:function(){
            //开始监听
            stopWatch = this.$watch('age',(newData,oldData)=>{
                console.log('newData:'+newData)
                console.log('oldData' + oldData)
            },{
                deep:true,
                immediate:true
            }
            this.$watch('info.name',(newData,oldData)=>{
                console.log('newData:'+newData)
                console.log('oldData' + oldData)
            },{
                deep:true,
                immediate:true
            })
        }
	}
</script>

<template>
	年龄:<input type="number" v-model="age">
	姓名：<input type="String" v-model="info.name">
	年龄：<input type="String" v-model="info.age">
	<button @click="stopWatch">
        停止监听
    </button>
</template>

组合式API中的侦听器

在组合式API中，我们可以使用watch函数或watchEffect函数在每次响应式状态发生变化时触发对应的回调函数。

watch()函数

创建侦听器

语法：watch(source, callback, options)

• source:需要侦听的数据源，可以使ref(包括计算属性)、一个响应式对象、一个getter函数返回的对象

• callback:回调函数

  • 侦听单个数据源：回调函数的第一个参数为新值，第二个参数为旧值
  • 侦听多个数据源组组成的数组：一个参数数组是新值，第二个参数数组是旧值

• options:配置，object类型

<script setup>
import {ref,reactive,watch} from 'vue'

const emp = reactive({
    name:'jack',
    salary:2000
})
const dpt = reactive({
    name:'jack',
    dpt:'办公室'
})
const region = reactive({
    prince :'北京',
    city:'China'
})
//侦听单个属性
watch(
	()=>emp.name,
    (newData,oldData){
    	console.log(newData);
    	console.log(oldData);
    }
)
//侦听对象,对象值改变能够输出Data但是new和old值相同
watch(
	dpt,
    (newData,oldData){
    	console.log(newData);
    	console.log(oldData);
    }
)
//值改变不能触发事件
watch(
	()=>dpt,
    (newData,oldData){
    	console.log(newData);
    	console.log(oldData);
    }
)
//值改变能够触发侦听，但是new和old相同
watch(
	()=>region,
    (newData,oldData){
    	console.log(newData);
    	console.log(oldData);
    },{
        deep:true
    }
)

</script>

侦听多个数据源组成的数组

watch(
	[account,()=>emp.salary,dept],
	([newAccount,newSalary,newDept],[oldAccount,oldSalary,oldDept]){
		console.log(newAccount);
		console.log(newSalary);
		console.log(newDept);
		console.log(oldAccount);
		console.log(oldSalary);
		console.log(oldDept);
	}
)

停止侦听

同选项式api

watchEffect()函数

watchEffect()会立即执行一遍回调函数，如果这时函数产生了副作用，Vue会自动追踪副作用的依赖关系，自动分析出响应源。

回调触发

<script setup>
	let account = ref('abc');
    let emp = reactive({
        name:'Jack',
        salary:7000
    })
    //创建成功后立即执行一遍，相当于flush的post
    watchEffect(() => {
        //此处用到了数据源，如果该数据源的值发生了变化，会重新执行该回调函数
        console.log(account.value)
        console.log(emp)
    })
</script>

停止

同watch