watch和watchEffect

我就是我 2023-01-20 09:45 5阅读 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 条评论，5人围观）

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

相关阅读

相关 watch和watchEffect

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

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

相关 VUE 3.0源码之watch和watchEffect

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

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

相关 vue3-watchEffect源码

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

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

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

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

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

相关 watch和computed的区别

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

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

相关 vue computed和watch详解

1.概念 computed(计算属性)和watch(监听器)都是以vue的依赖追踪机制为基础的，当依赖数据发生变化时，依赖此数据的相关数据会自动变化 2.应用场景

我不是女神ヾ/ 2022年05月20日 08:19/ 0 赞/ 276 阅读

相关 Vue之watch和computed

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

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

相关 redis的事务和watch

redis的事务严格意义来讲,redis的事务和我们理解的传统数据库(如mysql)的事务是不一样的。 redis中的事务定义 Redis中的事务（transa

傷城~/ 2022年01月22日 00:55/ 0 赞/ 218 阅读

相关 Redis的事务和watch

redis的事务严格意义来讲,redis的事务和我们理解的传统数据库(如mysql)的事务是不一样的。 redis中的事务定义 Redis中的事务（transa

深碍√TFBOYSˉ_/ 2021年11月02日 07:16/ 0 赞/ 285 阅读

相关 vue3.0 watchEffect

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

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