|
前言
虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的侦听器。这就是为什么 Vue 通过watch选项提供了一个更通用的方法，来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。
侦听器和计算属性的区别计算属性里不可以做异步操作，侦听器可以做异步操作，相当于计算属性的升级版 
vue3如何使用watch呢？
基本使用<template> <h1>watch侦听器页面</h1> <p>普通侦听数据:{{ num }}</p> <button @click="butFn">点击</button></template>script import { ref, watch } from 'vue'// 记得用到什么就要导入什么vue3的新特性，按需调用 setup() { const num = ref(0) // watch(要侦听的数据,回调函数) watch(num, (v1, v2) => { // v1 是改变以后的新值 // v2 是改变前的值 console.log(v1, v2) // 要点：侦听普通函数可以获取修改前后的值，被侦听的数据必须是响应式的 }) // 单机事件 const butFn = () => { num.value++ } return { butFn, num }}
监听多个响应式数据 const num = ref(0) const num2 = ref(20) watch([num, num2], (v1, v2) => { // 存入的结果是一个数组，结果返回的也是一个已数组格式的结果 // v1是最新结果的数组 // v2是旧数据的数组 console.log('v1', v1, 'v2', v2) // 总结：可以得到更新前后的值，侦听的结果也是数组数据顺序一致 })
侦听reactive定义的响应式数据
const obj = reactive({ msg: '奇奇怪怪可可爱爱' }) watch(obj, () => { // 只能获取到最新的值 console.log(obj.msg) })总结：如果侦听对象，那么侦听器的回调函数的两个参数是一样的结果，表示最新的对象数据，此时也可以直接读取被侦听的对象，那么得到的值也是最新的。
监听reactive定义的响应式数据的某一个属性 const obj = reactive({ msg: '奇奇怪怪可可爱爱' }) watch(() => obj.msg,(v1, v2) => { // v1 就是被监听数据的最新值 // v2 就是被监听数据的原有值 console.log(v1, v2) // 总结：如果侦听对象中当个属性，需要使用箭头函数的方式 // 侦听更少的数据有利于提高性能 } )
配置选项用法 const obj = reactive({ msg: { info: 'ooo' } }) watch(() => obj.msg,(v1, v2) => { console.log(v1, v2) }, { // 首次渲染组件就触发一次 immediate: true, // 开启深度监听,对象里面的数据如果发生变化也会被侦听到 // 如果监听的数据是一个比较长的表达式，那么需要用一个函数的方式 // 但是写成函数形式之后，里层的数据变化不到，所以需要添加deep选项 deep: true } )
总结到此这篇关于vue3.0中watch侦听器实例详解的文章就介绍到这了,更多相关vue3.0 watch侦听器内容请搜索51zixue.net以前的文章或继续浏览下面的相关文章希望大家以后多多支持51zixue.net！
下载地址:
JavaScript中5个常用的对象
javascript实现全屏页面滚动效果 |
