vue3里的watch与 watchEffect

watchEffect特点:

  1. 回调函数立即调用

  2. 回调函数依赖的数据都会被监控

  3. 深度监控

watch与 watchEffect

  1. 相同点 都可以对数据进行侦听

  2. 不同点 watchEffect回调函数立即调用、对回调函数依赖的数据隐式监控、默认深度监控

  3. watch 和 watchEffect 都能监听响应式数据的变化,不同的是它们监听数据变化的方式不同。

  4. watch 会明确监听某一个响应数据,而 watchEffect 则是隐式的监听回调函数中响应数据。

  5. watch 在响应数据初始化时是不会执行回调函数的,watchEffect 在响应数据初始化时就会立即执行回调函数。

javascript 复制代码
<template>
  <div>
    <!-- 情况一:监视ref定义基本数据类型的响应式数据 -->
    <h2 ref="qyz">{{ sum }}</h2>
    <button @click="sumadd">sum++</button>
  </div>
</template>
<script setup>
import { ref, reactive, computed, watch, watchEffect,watchPostEffect } from 'vue'
let sum = ref(0)
let qyz = ref(null)
const sumadd = () => {
  sum.value++
}
watchEffect(
  (onInvalidate) => {//watch是在第三个函数,而watchEffect是在第一个
    console.log('DOM节点:', qyz.value.innerHTML)
    console.log(sum.value)
    console.log('青阳子')
    onInvalidate(() => {
      console.log(2222)
    })
  },
  { flush: 'post' }
)
    </script>
相关推荐
前端小小王9 分钟前
React Hooks
前端·javascript·react.js
迷途小码农零零发18 分钟前
react中使用ResizeObserver来观察元素的size变化
前端·javascript·react.js
晓纪同学29 分钟前
QT-简单视觉框架代码
开发语言·qt
威桑30 分钟前
Qt SizePolicy详解:minimum 与 minimumExpanding 的区别
开发语言·qt·扩张策略
飞飞-躺着更舒服33 分钟前
【QT】实现电子飞行显示器(简易版)
开发语言·qt
明月看潮生39 分钟前
青少年编程与数学 02-004 Go语言Web编程 16课题、并发编程
开发语言·青少年编程·并发编程·编程与数学·goweb
娃哈哈哈哈呀40 分钟前
vue中的css深度选择器v-deep 配合!important
前端·css·vue.js
明月看潮生42 分钟前
青少年编程与数学 02-004 Go语言Web编程 17课题、静态文件
开发语言·青少年编程·编程与数学·goweb
Java Fans44 分钟前
C# 中串口读取问题及解决方案
开发语言·c#
盛派网络小助手1 小时前
微信 SDK 更新 Sample,NCF 文档和模板更新,更多更新日志,欢迎解锁
开发语言·人工智能·后端·架构·c#