彻底搞懂 Vue3 中 watch 和 watchEffect是用法

简介: 彻底搞懂 Vue3 中 watch 和 watchEffect是用法

在 Vue 3 的响应式世界里,watch 和 watchEffect 如同两位技艺高超的剑客,各自挥舞着独特的剑法,守护着数据的安宁。他们虽然目的相同——侦听数据的变化,但招式和风格却截然不同,为开发者们提供了更加灵活和精细的数据观测能力。

下面我带着大家来进入这个世界,一起学习 VUE3 这两大特性的详细用法。

watch 的用法
watch 函数允许你侦听一个或多个响应式引用(refs)或计算属性(computed properties),并在它们变化时运行一个回调函数。这个函数提供了更多的控制和灵活性,允许你明确指定要侦听哪些数据,以及获取新旧值进行比较。

基本用法
在 Vue 3 中,watch 函数通常用于 setup 函数内部,接受两个参数:要侦听的数据源和回调函数。数据源可以是响应式引用(ref)、计算属性(computed)或者是一个返回响应式值的函数。

侦听单个数据源

import { ref, watch } from 'vue';

export default {
setup() {
const count = ref(0);

watch(count, (newValue, oldValue) => {
  console.log(`count changed from ${oldValue} to ${newValue}`);
});

return { count };

},
};
侦听多个数据源

import { ref, watch } from 'vue';

export default {
setup() {
const count = ref(0);
const name = ref('Alice');

watch([count, name], ([newCount, newName], [oldCount, oldName]) => {
  console.log(`count: ${oldCount} -> ${newCount}, name: ${oldName} -> ${newName}`);
});

return { count, name };

},
};
侦听计算属性

import { ref, computed, watch } from 'vue';

export default {
setup() {
const count = ref(0);
const doubled = computed(() => count.value * 2);

watch(doubled, (newValue, oldValue) => {
  console.log(`doubled changed from ${oldValue} to ${newValue}`);
});

return { count, doubled };

},
};
侦听 getter 函数

import { ref, watch } from 'vue';

export default {
setup() {
const count = ref(0);
const name = ref('Alice');

watch(() => count.value + name.value, (newValue, oldValue) => {
  console.log(`combined value changed from ${oldValue} to ${newValue}`);
});

return { count, name };

},
};
选项参数
除了数据源和回调函数外,watch 还接受一个可选的选项对象,用于配置侦听器的行为。

deep:是否深度侦听对象内部的变化。默认为 false。
immediate:是否在侦听器创建时立即执行一次回调函数。默认为 false。
flush:何时触发回调。可以是 'pre'(在组件更新之前)、'post'(在组件更新之后)或 'sync'(同步触发)。默认为 'post'。
onTrack 和 onTrigger:用于调试,它们分别会在响应式依赖被追踪和触发时调用。
watch(count, (newValue, oldValue) => {
// ...
}, {
deep: true, // 深度侦听
immediate: true, // 立即执行
flush: 'pre' // 在组件更新之前触发
});
停止侦听
watch 函数会返回一个停止侦听的函数,你可以调用这个函数来取消对数据源的侦听。这在组件卸载或某些条件下需要停止侦听时非常有用。

const stopWatch = watch(count, (newValue, oldValue) => {
// ...
});

// 停止侦听
stopWatch();
侦听器的响应式依赖
watch 函数创建的侦听器是响应式的,这意味着它们可以依赖于其他响应式引用或计算属性。当这些依赖项发生变化时,侦听器会自动重新评估其回调函数是否需要执行。

watchEffect 的用法
与 watch 不同,watchEffect 会自动收集其执行函数中的响应式依赖,并在依赖变化时重新运行该函数。它不需要你明确指定要侦听哪些数据,而是自动追踪。这使得 watchEffect 在某些场景下更加简洁和方便。

基本用法
watchEffect 接受一个回调函数作为参数,这个回调函数会在其首次执行时立即运行,并自动收集其内部所依赖的所有响应式数据。当这些依赖的数据发生变化时,watchEffect 会重新运行该回调函数。

import { ref, watchEffect } from 'vue';

export default {
setup() {
const count = ref(0);

watchEffect(() => {
  console.log(`count is: ${count.value}`);
});

// 每当 count 发生变化时,上面的回调函数都会重新执行

// 例如,在模板中或 setup 函数的其他地方修改 count
// count.value++

return { count };

},
};
清除副作用
watchEffect 的回调函数可以返回一个清理函数(cleanup function),该函数会在下次重新运行回调之前被调用,用于清除之前的副作用(如事件监听器、计时器等)。

import { ref, watchEffect } from 'vue';

export default {
setup() {
const count = ref(0);
let intervalId;

watchEffect(() => {
  console.log(`开始监听 count`);

  // 设置一个定时器
  intervalId = setInterval(() => {
    console.log(`count 的当前值是: ${count.value}`);
  }, 1000);

  // 返回一个清理函数
  return () => {
    console.log(`停止监听 count`);
    clearInterval(intervalId);
  };
});

// 当 count 发生变化时,会停止之前的定时器并设置新的定时器

return { count };

},
};
停止侦听
与 watch 类似,watchEffect 也返回一个停止侦听的函数。但通常,我们不需要显式调用这个停止函数,因为 Vue 会自动管理这些侦听器的生命周期。然而,在某些特殊情况下,你可能需要手动停止侦听。

import { ref, watchEffect } from 'vue';

export default {
setup() {
const count = ref(0);
const stopEffect = watchEffect(() => {
console.log(count is: ${count.value});
});

// 在某个条件下停止侦听
// if (someCondition) {
//   stopEffect();
// }

return { count };

},
};
立即运行与延迟运行
默认情况下,watchEffect 在其创建时会立即执行一次回调函数。但你也可以通过传入一个选项对象来配置这个行为。

watchEffect(() => {
// ...
}, {
immediate: false // 默认为 true,设置为 false 可阻止立即执行
});
刷新时机
watchEffect 的刷新时机默认为 'post',即在组件更新后执行。但你也可以通过 flush 选项来更改这个行为。

watchEffect(() => {
// ...
}, {
flush: 'pre' // 在组件更新前执行
});
总结
总的来说,watch 和 watchEffect 都是 Vue 3 中非常有用的工具,它们在不同的场景下有不同的用途。总的来说,它们的区别主要在于以下几点:

触发方式:watch 需要你明确指定要侦听哪些数据,而 watchEffect 则会自动收集其执行函数中的响应式依赖。
灵活性:watch 提供了更多的选项,如深度侦听、立即执行等,允许你更精细地控制侦听行为。而 watchEffect 则更加简洁和自动化。
用途:watch 更适合在需要精确控制侦听哪些数据源,或者需要比较新旧值的情况下使用。而 watchEffect 则在不需要明确指定依赖,或者需要自动追踪依赖变化时更加适用。
性能:由于 watchEffect 会自动收集依赖,在某些复杂的应用中可能会比 watch 稍微慢一些。但在大多数情况下,这种差异是可以忽略不计的。
看完这篇文章,对于 Vue 3 中 watch 和 watchEffect 的用法,你学废了吗。

相关文章
|
10天前
|
JavaScript
在vue3中(vite)引入unocss,安装配置unocss
在vue3中(vite)引入unocss,安装配置unocss
|
2天前
|
JavaScript
vue3- antd design vue 引入iconfont
vue3- antd design vue 引入iconfont
|
1天前
|
JavaScript 数据格式
vue3 + Ant design vue formItem 无法使用嵌套的form表单校验
vue3 + Ant design vue formItem 无法使用嵌套的form表单校验
14 1
|
1天前
|
JavaScript 前端开发
vue尚品汇商城项目-day01【4.完成非路由组件Header与Footer业务】
vue尚品汇商城项目-day01【4.完成非路由组件Header与Footer业务】
8 2
|
1天前
|
JavaScript 前端开发
vue尚品汇商城项目-day01【3.项目路由的分析】
vue尚品汇商城项目-day01【3.项目路由的分析】
6 1
|
2天前
|
JavaScript
vue尚品汇商城项目-day03【23.把首页当中的轮播图拆分为一个共用的全局组件】
vue尚品汇商城项目-day03【23.把首页当中的轮播图拆分为一个共用的全局组件】
10 2
|
1天前
|
JavaScript 前端开发 数据安全/隐私保护
vue尚品汇商城项目-day01【5.路由组件的搭建】
vue尚品汇商城项目-day01【5.路由组件的搭建】
5 0
vue尚品汇商城项目-day01【5.路由组件的搭建】
|
2天前
|
JavaScript 索引
vue尚品汇商城项目-day04【25.面包屑处理关键字】
vue尚品汇商城项目-day04【25.面包屑处理关键字】
11 1
|
2天前
|
JavaScript 前端开发 API
vue尚品汇商城项目-day04【28.详情页面Detail】
vue尚品汇商城项目-day04【28.详情页面Detail】
9 1
|
2天前
|
JavaScript 索引
vue尚品汇商城项目-day04【27.分页器静态组件(难点)】
vue尚品汇商城项目-day04【27.分页器静态组件(难点)】
9 1