Vue3 watch 监听器

最新推荐文章于 2024-09-19 07:42:43 发布

＊且听风吟

最新推荐文章于 2024-09-19 07:42:43 发布

阅读量954

点赞数 1

分类专栏： # Vue 3 文章标签：前端

本文链接：https://blog.csdn.net/HH18700418030/article/details/124022818

版权

本文详细介绍了Vue3中watch监听器的概念和功能，包括如何设置初始执行、深度监听以及同时监听多个数据。通过实例展示了如何配置watch进行深度监视以及在数据变化时执行副作用。

摘要由CSDN通过智能技术生成

概念

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) => {