watch和watchEffect

我就是我 2023-01-20 09:45 12阅读 0赞

学习笔记记录（内容来源于官网）

## watch ##

vue3watch用法和vue变化也不是特别大，vue3支持侦听多个数据源

用法没太大变化：wach是一个钩子函数，支持传入三个参数（个人理解）

1、监听对象

2、回调函数（可以拿到当前值，和上一次的值）

3、对象：是否深度监控属性变化等\{deep:true\}

// 侦听一个 getter
    const state = reactive({ count: 0 })
    watch(
      () => state.count,
      (count, prevCount) => {
        /* ... */
      }
    )
    
    // 直接侦听ref
    const count = ref(0)
    watch(count, (count, prevCount) => {
      /* ... */
    }，{
      deep:true
    })

侦听多个源（用法和单个没什么太大区别，只是改为数组的方式）

watch([fooRef, barRef], ([foo, bar], [prevFoo, prevBar]) => {
      /* ... */
    })

## watchEffect ##

> 官方：为了根据响应式状态*自动应用*和*重新应用*副作用，我们可以使用 `watchEffect` 方法。它立即执行传入的一个函数，同时响应式追踪其依赖，并在其依赖变更时重新运行该函数

const count = ref(0)
    
    watchEffect(() => console.log(count.value))
    // -> logs 0
    
    setTimeout(() => {
      count.value++
      // -> logs 1
    }, 100)

停止侦听

显示调用返回值停止监听

const stop = watchEffect(() => {
      /* ... */
    })
    
    // later
    stop()

总结：

1、不需要手动传入依赖，每次初始化时会执行一次回调函数来自动获取依赖（`watchEffect` 不须要指定监听的属性，他会自动的收集依赖， 只要回调中引用到了 响应式的属性， 那么当这些属性变动的时候，这个回调都会执行，而 `watch` 只能监听指定的属性而作出变动）

2、无法获取到原值，只能得到变化后的值

发表评论取消回复

表情：

评论列表（有 0 条评论，12人围观）

还没有评论，来说两句吧...

相关阅读

相关【Vue3】035-Composition API：watch和watchEffect的使用和差异性

文章目录 6、watch和watchEffect的使用和差异性写法预览 watch基本使用运行结果

╰+哭是因爲堅強的太久メ/ 2023年10月03日 09:48/ 0 赞/ 1 阅读

相关在 Vue 3 中 watch vs watchEffect

watch 和 watchEffect 的区别 watch 基本使用 `watch`监听响应式状态发生变化的，当响应式状态发生变化时，都会触发一个回调函数。

冷不防/ 2023年09月27日 21:53/ 0 赞/ 111 阅读

相关 vue3 watch 和 watchEffect 的使用和差异性

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <

红太狼/ 2023年01月22日 12:49/ 0 赞/ 7 阅读

相关 watch和watchEffect

学习笔记记录（内容来源于官网） watch vue3watch用法和vue变化也不是特别大，vue3支持侦听多个数据源用法没太大变化：wach是一个钩子函数，支持传

我就是我/ 2023年01月20日 09:45/ 0 赞/ 13 阅读

相关 VUE 3.0源码之watch和watchEffect

1.watch和watchEffect 这两都是直接调用doWatch方法，唯一区别就是第二个参数不同。 export function watchEffect

た入场券/ 2022年12月20日 03:27/ 0 赞/ 159 阅读

相关 vue3-watchEffect源码

function watchEffect(effect, options) { return doWatch(effect, null, options

逃离我推掉我的手/ 2022年10月30日 15:26/ 0 赞/ 231 阅读

相关 vue3的计算属性和监听及watch和watchEffect区别

三者区别： computed函数: 与computed配置功能一致内部只有一个方法的时候是getter 有gett

谁借莪１个温暖的怀抱￠/ 2022年09月05日 12:57/ 0 赞/ 206 阅读

相关 watch和computed的区别

![70][] 页面中的数据改变的时候用watch的,实时计算的用computed [70]: /images/20220523/b9310840db104b3e85e8

ゝ一纸荒年。/ 2022年05月23日 12:29/ 0 赞/ 359 阅读

相关 Vue之watch和computed

watch用于监控自身属性变化和监控路由对象计算属性computed的特点计算属性会依赖于他使用的data中的属性，只要是依赖的属性值有改变，则自动重新调用一下计

淩亂°似流年/ 2022年04月18日 01:30/ 0 赞/ 333 阅读

相关 vue3.0 watchEffect

立即执行传入的一个函数，并响应式追踪其依赖，并在其依赖变更时重新运行该函数。用法: import { watchEffect } from

超、凢脫俗/ 2021年07月24日 11:42/ 0 赞/ 328 阅读