Vue3--Watch、Watcheffect、Computed的使用和区别

Vue3–Watch、Watcheffect、Computed的使用和区别

一、watch

1.功能

watch 用于监听响应式数据的变化，并在数据变化时执行特定的回调函数。适合在响应式数据变化时执行异步操作或复杂逻辑。

2.主要特点

1. 指定数据监听：可以精确地监听一个或多个响应式数据。
2. 回调函数：数据变化时调用指定的回调函数，并传入新值和旧值。
3. 配置项：支持 immediate（是否立即执行回调）和 deep（是否深度监听）配置。

3.典型应用场景

• 需要执行异步操作（如 API 请求）。
• 需要执行复杂的副作用操作。
• 需要监听深层次的对象变化。

import { ref, watch } from 'vue';
const count = ref(0);
watch(count, (newValue, oldValue) => {console.log(`依赖值改变${oldValue} -- ${newValue}`);
}, { immediate: true, deep: false });

4.参数介绍

• 第一个参数：需要监听的响应式数据或 getter 函数。
• 第二个参数：回调函数，接受新值和旧值作为参数。
• 第三个参数（可选）：配置项，包括 immediate 和 deep。

5.基本使用示例(父子组件结合ElementUI)

父组件

<template><div><!-- 使用 ElementUI 的 el-input 组件输入内容 --><el-input v-model="parentInput" placeholder="Enter something"></el-input><!-- 将输入内容传递给子组件 --><ChildComponent :inputValue="parentInput" /></div>
</template>
<script setup>
import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue';
// 创建一个响应式变量 parentInput，用于存储输入内容
const parentInput = ref('');
</script>

子组件

<template><div><!-- 显示父组件传递的输入内容 --><p>父组件输入: {{ inputValue }}</p></div>
</template>
<script setup>
import { watch, toRefs } from 'vue';
// 定义 props 接收父组件传递的数据
const props = defineProps({inputValue: String,
});
// 解构 props
const { inputValue } = toRefs(props);
// 监听 inputValue 的变化，并在变化时执行回调
watch(inputValue, (newValue) => {console.log(`父组件输入改变: ${newValue}`);
});
</script>

6.常见用法

1. 监听单个响应式数据

import { ref, watch } from 'vue';
const count = ref(0);
watch(count, (newValue, oldValue) => {console.log(`count值改变 ${oldValue} -- ${newValue}`);
});

2. 监听多个响应式数据

import { ref, watch } from 'vue';const count1 = ref(0);
const count2 = ref(0);watch([count1, count2], ([newCount1, newCount2], [oldCount1, oldCount2]) => {console.log(`count1值改变 ${oldCount1} -- ${newCount1}`);console.log(`count2值改变 ${oldCount2} -- ${newCount2}`);
});

3. 深度监听对象{ deep: true }

import { ref, watch } from 'vue';
const person = ref({ name: 'John', age: 30 });
watch(person, (newPerson, oldPerson) => {console.log(`Person改变 ${oldPerson.name} -- ${newPerson.name}`);
}, { deep: true });

4. 立即执行回调{ immediate: true }

import { ref, watch } from 'vue';
const count = ref(0);
watch(count, (newValue, oldValue) => {console.log(`count值改变 ${oldValue} -- ${newValue}`);
}, { immediate: true });

5. 监听 getter 函数

import { ref, watch } from 'vue';
const count = ref(0);
// 使用 watch 监听一个 getter 函数
watch(// 第一个参数是一个 getter 函数，该函数返回我们要监听的计算值() => count.value + 1,// 第二个参数是回调函数，当 getter 函数的返回值发生变化时，该回调函数会被调用(newValue, oldValue) => {// 打印旧值和新值console.log(`Computed值改变 ${oldValue} -- ${newValue}`);}
);

二、watchEffect

1.功能

watchEffect 用于自动运行一个副作用函数，并追踪其依赖。任何依赖变化时都会重新运行该函数。适合用来执行副作用，但不需要明确指定依赖。

2.主要特点

1. 自动依赖追踪：自动追踪副作用函数中的响应式数据依赖。
2. 立即执行：函数会立即执行一次，并在依赖变化时重新执行。
3. 简洁性：不需要手动指定依赖，代码更简洁。

3.典型应用场景

• 需要自动运行副作用函数，并自动管理依赖。
• 界面更新或 DOM 操作。

import { ref, watchEffect } from 'vue';
const count = ref(0);
watchEffect(() => {console.log(`count: ${count.value}`);
}, { flush: 'pre' });

4.参数介绍

• 第一个参数：副作用函数。
• 第二个参数（可选）：配置项，包括 flush。

watchEffect 的 flush 选项用于控制副作用函数的触发时机。flush 选项有三种可能的值：

1. pre：在组件更新前触发（这是默认值）。
2. post：在组件更新后触发。
3. sync：同步地触发。

flush: ‘pre’

默认情况下，watchEffect 会在组件更新之前运行副作用函数。这意味着当响应式数据变化时，副作用会在 DOM 更新前执行。

flush: ‘post’

将 flush 设置为 'post' 可以在组件更新后触发副作用函数。这对于那些需要访问更新后的 DOM 元素的副作用来说很有用。

flush: ‘sync’

将 flush 设置为 'sync' 可以使副作用同步触发，而不是等到下一个微任务队列。这意味着副作用会立即在响应式数据变化时执行。

import { ref, watchEffect } from 'vue';const count = ref(0);// 默认 flush: 'pre'
watchEffect(() => {console.log(`count (pre): ${count.value}`);
});// flush: 'post'
watchEffect(() => {console.log(`count (post): ${count.value}`);
}, { flush: 'post' });// flush: 'sync'
watchEffect(() => {console.log(`count (sync): ${count.value}`);
}, { flush: 'sync' });count.value++;

三个 watchEffect 会在不同的时机记录 count 的值：

1. flush: 'pre' 会在 DOM 更新前执行。
2. flush: 'post' 会在 DOM 更新后执行。
3. flush: 'sync' 会同步执行。

5.基本使用示例(父子组件结合ElementUI)

父组件

<template><div><!-- 使用 ElementUI 的 el-slider 组件输入数值 --><el-slider v-model="sliderValue"></el-slider><!-- 将滑动条的值传递给子组件 --><ChildComponent :sliderValue="sliderValue" /></div>
</template><script setup>
import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue';
// 创建一个响应式变量 sliderValue，用于存储滑动条的值
const sliderValue = ref(50);
</script>

子组件

<template><div><!-- 显示父组件传递的滑动条的值 --><p>Slider value: {{ sliderValue }}</p></div>
</template>
<script setup>
import { watchEffect, toRefs } from 'vue';
// 定义 props 接收父组件传递的数据
const props = defineProps({sliderValue: Number,
});
// 解构 props
const { sliderValue } = toRefs(props);
// 监听 sliderValue 的变化，并在变化时执行副作用函数
watchEffect(() => {console.log(`Slider: ${sliderValue.value}`);
});
</script>

6.常见用法

1. 基本用法

import { ref, watchEffect } from 'vue';
const count = ref(0);
watchEffect(() => {console.log(`count: ${count.value}`);
});

2. 取消副作用

import { ref, watchEffect } from 'vue';
const count = ref(0);
const stop = watchEffect(() => {console.log(`count: ${count.value}`);
});
// 停止副作用
stop();

3. 延迟执行{ flush: ‘post’ }

import { ref, watchEffect } from 'vue';
const count = ref(0);
watchEffect(() => {console.log(`count: ${count.value}`);
}, { flush: 'post' });

4. 自定义调度

import { ref, watchEffect } from 'vue';
const count = ref(0);
// 使用 watchEffect 自动追踪副作用
watchEffect(() => {// 这个函数在 count 发生变化时会被调用console.log(`count: ${count.value}`);},{// 配置项：onTrack 和 onTrigger 是调试钩子// onTrack 会在副作用追踪依赖时调用onTrack(e) {console.log('tracked', e);},// onTrigger 会在依赖变化导致副作用重新执行时调用onTrigger(e) {console.log('triggered', e);}}
);

三、computed

1.功能

computed 用于声明计算属性，计算属性会根据其依赖的响应式数据自动更新，并且具有缓存特性。适合计算派生状态或数据。

2.主要特点

1. 依赖管理：计算属性根据依赖的响应式数据自动更新。
2. 缓存：只有当依赖的数据变化时，计算属性才会重新计算。
3. 简洁性：声明式地定义派生数据，代码简洁且易于维护。

3.典型应用场景

• 需要根据其他响应式数据派生出新的数据。
• 需要高效的、缓存的计算属性。

import { ref, computed } from 'vue';
const count = ref(0);
const doubleCount = computed(() => count.value * 2);

4.参数介绍

• 第一个参数：getter 函数，返回计算属性的值。
• 第二个参数（可选）：setter 函数，用于设置计算属性的值（可写计算属性）。

5.基本使用示例(父子组件结合ElementUI)

父组件

<template><div><!-- 使用 ElementUI 的 el-input 组件输入数值 --><el-input v-model="inputValue" placeholder="Enter a number"></el-input><!-- 将输入的数值传递给子组件 --><ChildComponent :number="inputValue" /></div>
</template><script setup>
import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue';
// 创建一个响应式变量 inputValue，用于存储输入的数值
const inputValue = ref(0);
</script>

子组件

<template><div><!-- 显示父组件传递的数值的平方 --><p>Squared value: {{ squaredNumber }}</p></div>
</template><script setup>
import { computed, toRefs } from 'vue';
// 定义 props 接收父组件传递的数据
const props = defineProps({number: Number,
});
// 解构 props
const { number } = toRefs(props);
// 创建一个计算属性 squaredNumber，计算 number 的平方
const squaredNumber = computed(() => number.value * number.value);
</script>

6.常见用法

1. 基本用法

import { ref, computed } from 'vue';
const count = ref(0);
const doubleCount = computed(() => count.value * 2);

2. 可写计算属性 (get set)

import { ref, computed } from 'vue';
const firstName = ref('John');
const lastName = ref('Doe');
const fullName = computed({get: () => `${firstName.value} ${lastName.value}`,set: (newValue) => {const names = newValue.split(' ');firstName.value = names[0];lastName.value = names[1];},
});

3. 依赖其他计算属性

import { ref, computed } from 'vue';
const count = ref(0);
const doubleCount = computed(() => count.value * 2);
const tripleCount = computed(() => doubleCount.value * 1.5);

4. 使用在模板中

<template><div>{{ doubleCount }}</div>
</template>
<script setup>
import { ref, computed } from 'vue';
const count = ref(0);
const doubleCount = computed(() => count.value * 2);
</script>

5. 配合 watch 使用

import { ref, computed, watch } from 'vue';
const count = ref(0);
const doubleCount = computed(() => count.value * 2);
watch(doubleCount, (newValue) => {console.log(`doubleCount: ${newValue}`);
});

6. 配合 watchEffect 使用

import { ref, computed, watchEffect } from 'vue';
const count = ref(0);
const doubleCount = computed(() => count.value * 2);
watchEffect(() => {console.log(`doubleCount: ${doubleCount.value}`);
});

四、总结与区别

watch 的多种用法

• 监听单个响应式数据。
• 监听多个响应式数据。
• 深度监听对象。{ deep: true }
• 立即执行回调。{ immediate: true }
• 监听 getter 函数。

watchEffect 的多种用法

• 基本用法。
• 取消副作用。
• 延迟执行。{ flush: ‘post’ }
• 自定义调度。

computed 的多种用法

• 基本用法。
• 可写计算属性。 (get set)
• 依赖其他计算属性。
• 使用在模板中。
• 配合 watch 使用。
• 配合 watchEffect 使用。

区别

特性	watch	watchEffect	computed
功能	监听响应式数据变化并执行回调	自动运行副作用函数并追踪依赖	声明计算属性，根据依赖自动更新并缓存
依赖管理	手动指定	自动追踪	自动管理
缓存	无	无	有
适用场景	异步操作、复杂副作用、深度监听	界面更新、副作用函数	派生状态、数据计算
优点	精确控制、支持异步操作	自动依赖追踪、代码简洁	声明式、自动更新、缓存
缺点	需要手动指定依赖、代码相对复杂	每次依赖变化时都会重新执行副作用函数	需要在创建时指定依赖，无法动态改变计算逻辑

Watch、Watcheffect、Computed三种方法各有优劣，选择使用哪种方法主要取决于具体的应用场景和需求。watch 适合复杂的副作用操作，watchEffect 适合简单的自动副作用管理，而 computed 适合声明式的派生状态计算。