vue3里的watch与 watchEffect

本文主要是介绍vue3里的watch与 watchEffect，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

watchEffect特点：

1. 回调函数立即调用

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

3. 深度监控

watch与 watchEffect

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

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

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

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

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

 

<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>

 

这篇关于vue3里的watch与 watchEffect的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---