介绍

Vue前端开发，除了处理静态资源（样式、UI），动态数据方面，抛开后面会讲到的路由、组件间数据传递、状态管理这些，大部分日常工作，都是在处理页面的动态数据，那么前文讲到的响应式数据，计算属性，以及本节要讲的侦听器watch，就是最常用到的知识点。

侦听器涉及的知识点比较多，会分几篇文章讲。

单向绑定，解决了data向页面传递的问题，双向绑定，解决了页面向data传递的问题。

而在实际业务中，有很多数据发生了改变后，需要做一些逻辑处理的情况。

例如AutoComplate，用户输入姓氏，页面调用接口模糊匹配，并在前端呈现，供用户选择。

当然，上面的情况也可以通过@input、@change来实现，本文只介绍watch。

watch能监听4种数据源，下面是Vue官方文档两处对于数据源的描述：

它可以是一个 ref (包括计算属性)、一个响应式对象、一个 getter 函数、或多个数据源组成的数组。

一个函数，返回一个值；一个 ref；一个响应式对象；...或是由以上类型的值组成的数组。

watch()是懒侦听的，只有被侦听的数据源发生变化了，才会执行回调函数——当然，也可以通过配置，让其在创建时立刻执行一次。

watch结合前文介绍的计算属性，比较经典的用法就是购物车，优惠价格、总价的实时计算。

侦听Ref的基本写法

watch函数共3个参数：

1. 侦听源。必填项。前一节说的4种数据源。
2. 数据源发生变化时的回调函数。必填项。回调函数有3个参数，依次分别为：新值、旧值、用于注册副作用清理的回调函数（通常命名为onInvalidate）。清理副作用的函数还是很重要的，后文会专门说一下。
3. 侦听器的配置对象。选填项。例如immediate，watch创建时立刻触发；deep，侦听对象时，深层级变更时依然能触发回调；once，触发一次，等等，详情可参考官方文档。

<template>
    <div class="watchDemo">
        <h1>A：侦听Ref基本类型</h1>
        用户名：<input type="text" v-model="userName">
    </div>
</template>
<script lang='ts' setup name='WatchDemo'>
import { ref, watch } from 'vue'
let userName = ref("")

//写法一
watch(userName, (newVal, oldVal) => {
    console.log('userName新值：', newVal, '原值：', oldVal);
}, { immediate: true })

// 写法二。如果回调函数过于复杂，可以用此写法
// watch(userName,watchUserName)

// function watchUserName(newVal:string,oldVal:string){
//     console.log('userName新值：',newVal,'原值：',oldVal);
// }
</script>
<style>
.watchDemo {
    background-color: darkkhaki;
}
</style>

• 侦听的ref对象，直接写userName，不用也不能写userName.value。
• 源码中的两种写法都可以。
• 副作用清理的回调函数后文有介绍，本节不赘述。
• 配置了immediate:true，页面刷新后，回调函数就会执行，只是oldVla是undefined。

停止watch

<template>
    <div class="watchDemo">
        <h1>A：侦听Ref基本类型</h1>
        用户名：<input type="text" v-model="userName"><br>
        <button @click="pauseUserNameWatch">暂停侦听UserName</button>
        <button @click="resumeUserNameWatch">恢复侦听UserName</button>
        <button @click="stopUserNameWatch">停止侦听UserName</button>
    </div>
</template>
<script lang='ts' setup name='WatchDemo'>
import { ref, watch } from 'vue'
let userName = ref("")

let userNameWatchHandle = watch(userName, (newVal, oldVal) => {
    console.log('userName新值：', newVal, '原值：', oldVal);
    //可以在这里根据输入的数据做判断，是否停止侦听
    if (newVal === '停止') {
        userNameWatchHandle()
        //这种写法等同userNameWatchHandle.stop()
    }
})
// 暂停
function pauseUserNameWatch() {
    userNameWatchHandle.pause()
}
// 恢复
function resumeUserNameWatch() {
    userNameWatchHandle.resume()
}
// 停止侦听
function stopUserNameWatch() {
    userNameWatchHandle.stop()
}
</script>
<style>
.watchDemo {
    background-color: darkkhaki;
}
</style>