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>
相关推荐
web守墓人40 分钟前
【前端】ikun-markdown: 纯js实现markdown到富文本html的转换库
前端·javascript·html
序属秋秋秋43 分钟前
《C++初阶之内存管理》【内存分布 + operator new/delete + 定位new】
开发语言·c++·笔记·学习
Savior`L1 小时前
CSS知识复习5
前端·css
许白掰1 小时前
Linux入门篇学习——Linux 工具之 make 工具和 makefile 文件
linux·运维·服务器·前端·学习·编辑器
ruan1145142 小时前
MySQL4种隔离级别
java·开发语言·mysql
quant_19863 小时前
R语言如何接入实时行情接口
开发语言·经验分享·笔记·python·websocket·金融·r语言
中微子5 小时前
🔥 React Context 面试必考!从源码到实战的完整攻略 | 99%的人都不知道的性能陷阱
前端·react.js
秋田君6 小时前
深入理解JavaScript设计模式之命令模式
javascript·设计模式·命令模式
中微子6 小时前
React 状态管理 源码深度解析
前端·react.js
百锦再7 小时前
详细解析 .NET 依赖注入的三种生命周期模式
java·开发语言·.net·di·注入·模式·依赖