vue3快速入门-watch与watchEffect

本系列文章合集click me

本系列文章源码click me



watch

侦听一个或多个响应式数据源,并在数据源变化时调用所给的回调函数。
watch() 默认是懒侦听的,即仅在侦听源发生变化时才执行回调函数。

watch参数

watch(watchSource, callback, options?)

watchSource:

侦听源,这个参数可以为以下几种:

  1. 一个ref
  2. 一个响应式对象
  3. 一个有返回值的函数
  4. 以上类型值组成的数组
callback:

侦听源发生变化时调用的回调函数, 这个回调函数接收三个参数:新值旧值
以及一个用于注册副作用清理的回调函数。该回调函数会在副作用下一次重新执行前调用,可以用来清除无效的副作用,例如等待中的异步请求。
当侦听多个来源时,回调函数接受两个数组,分别对应侦听源数组中的新值和旧值。

options

这个可选参数是一个对象,支持以下选项:

  1. immediate: 在侦听器创建时立即触发回调, 第一次调用时旧值是 undefined
  2. deep: 如果侦听源是对象,强制深度遍历,以便在深层级变更时启动回调
  3. flush: 调整回调函数的刷新时机
  4. onTrack / onTrigger: 调试侦听器的依赖

watch示例

<template>
  <div id="app">
    <h2>监听一个ref:</h2>
    <input type="text" v-model="name" />
    <h2>监听一个reactive:</h2>
    名称:<input type="text" v-model="info.name" /> 
    品牌:<input type="text" v-model="info.brand" /> 
    尺寸:<input type="text" v-model="info.size" />
    <h2>监听一个getter函数</h2>
    <input type="text" v-model="getter.num">
    <h2>监听以上类型值组成的数组</h2>
    ref: <input type="text" v-model="age">
    reactive: <input type="text" v-model="user.name">
  </div>
</template>
<script lang="ts">
import { defineComponent, reactive, ref, watch } from "vue";

export default defineComponent({
  setup() {
    // 监听一个ref
    const name = ref("温情");
    watch(name, (newV, oldV) => {
      console.log(`ref发生变化新值为${newV}, 老值为${oldV}`);
    });

    // 监听一个reactive对象  当直接侦听一个响应式对象时,侦听器自动处于深层级模式:
    const info = reactive({
      name: "笔记本电脑",
      brand: "Dell",
      size: 7,
    });
    watch(info, (newV, oldV) => {
      console.log(`reactive对象发生变化`);
    });

    // 监听一个getter函数
    const getter = reactive({ num: 1 });
    watch(
      () => getter.num,
      (newV, oldV) => {
        console.log(`getter函数发生变化新值为${newV}, 老值为${oldV}`);
      }
    );

    // 监听以上类型值组成的数组
    const age = ref(22)
    const user = reactive({
        name: '兰陵王',
        tel: '12345'
    })
    watch([age, user], (newV, oldV) => {
        console.log('监听的数组发生变化');
        console.log('newV', newV);
        console.log('oldV', oldV);
    }, { immediate: true })

    return { name, info, getter, age, user };
  },
});
</script>

在这里插入图片描述

watchEffect

立即执行传入的一个函数,同时响应式追踪其依赖,并在其依赖变更时重新运行该函数。

watchEffect参数

watchEffect(callback)

callback:

页面加载后立即运行这个回调函数,同时响应式地追踪其依赖,并在依赖更改时重新执行

watchEffect 与 watch 区别

  1. watchEffect只需传递一个回调,不需要传递需要侦听的数据,它默认主动执行一次收集依赖;
    watch至少需要传递两个参数,需要侦听的数据和回调函数
  2. watchEffect是立即执行的,在页面初始化时会默认执行一次回调函数来收集依赖;
    watch是惰性的,不会立即执行回调,但可以通过配置immediate让它默认执行一次
  3. watchEffect获取不到更改前的值; 而watch可以获取到更改前后的值

watchEffect示例

// 只要count发生变化就会执行一次回调
const count = ref(0);
watchEffect((newV) => {
    console.log('watchEffect回调触发', count.value);
})
count.value++;

watchEffect停止侦听

// 只要count发生变化就会执行一次回调
const count = ref(0);
const countWatch = watchEffect((newV) => {
  console.log("watchEffect回调触发", count.value);
});
count.value++;
onMounted(() => {
  countWatch();  // 停止侦听
});
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

温情key

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值