Vue3 watch 监听器

概念

Vue3 的 watch 监听器与Vue2的watch配置功能一致，提供了基于观察状态的变化来执行副作用的能力。

功能

• 监视指定的一个或多个响应式数据， 一旦数据变化，就自动执行监视回调
• 默认初始时不执行回调，但可以通过配置immediate为true，来指定初始时立即执行第一次
• 通过配置deep为true，来指定深度监视

实例

<template>
  <div>
    <h1>Example Page</h1>
    <div>
      <p>count is: {
   {
    count }}</p>
      <a-button @click="addHandle">修改</a-button>
    </div>
  </div>
</template>
<script lang="ts">
import {
    watch, ref, reactive } from 'vue'

export default {
   
  setup() {
   
    // 定义响应式数据count
    const count = ref(2)
    const addHandle = () => {
   
      count.value++
      num.count++
    }
    // 直接侦听一个 ref
    watch(count, (newValue, oldValue) => {
   
      // 监听count
      conso