web前端之若依vue3不能及时获取字典值的解决方案、二次封装若依自带的获取字典方法、watchEffect、watch

本文主要是介绍web前端之若依vue3不能及时获取字典值的解决方案、二次封装若依自带的获取字典方法、watchEffect、watch，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

---

前言

因为请求字典的过程是异步
所以没能及时获取到字典数据

---

watch和watchEffect的区别

基本使用

const { a_type, b_type } = proxy.useDict("a_type", "b_type");

watch(() => a_type.value, (newVal) => {console.log('newVal: ', newVal);// Proxy(Array) {0: {…}, 1: {…}, 2: {…}}
});

watchEffect(() => {console.log('a_type: ', a_type.value);// Proxy(Array) {}// Proxy(Array) {0: {…}, 1: {…}, 2: {…}}
});

1、watch只在有值的时候触发
2、watchEffect只要值有变动就会触发

---

使用场景

watch适用于监听特定数据的变化，并在数据变化时执行回调函数。可以监视一个或多个特定的数据，并在它们变化时执行自定义的逻辑。
watchEffect则更适合于“副作用”式的场景，会自动追踪其回调函数内部用到的响应式数据，并在这些数据变化时重新运行回调函数。

---

用法
watch

watch(source, callback, options?)
source: 要监视的数据源，可以是一个函数或一个ref/reactive对象。
callback: 当source变化时执行的回调函数。
options: 可选参数，用于配置watch的行为。

---

watchEffect

watchEffect(effect, options?)
effect: 一个包含响应式数据访问的函数，Vue会追踪此函数的依赖关系。
options: 可选参数，用于配置watchEffect的行为。

---

自动追踪依赖

watch需要明确指定要监视的数据，它不会自动追踪数据的依赖。
watchEffect会自动追踪其回调函数内部使用的响应式数据，无需手动指定依赖。

---

返回值

watch的返回值是一个用于停止观察的函数。
watchEffect不直接返回一个停止观察的函数，但可以使用stop函数来停止副作用的运行。

---

演示

import { ref, watch, watchEffect } from 'vue';const data = ref(1);// watch的用法
const stopWatch = watch(data, (newValue, oldValue) => {console.log(`watch - Data changed: ${oldValue} -> ${newValue}`);
});// watchEffect的用法
const stopWatchEffect = watchEffect(() => {console.log(`watchEffect - Data value: ${data.value}`);
});// 修改数据，触发watch和watchEffect
data.value = 2;// 停止watch和watchEffect的观察
stopWatch();
stopWatchEffect();

在上面的例子中，watch显式地监视了data的变化，而watchEffect自动追踪了回调函数内部对data的访问。

---

解决若依vue3不能及时获取字典值

繁杂的dict写法

若依框架的使用方式与上面相同，此案例是个人自己封装的结果，解决了字典复用问题。

const { proxy } = getCurrentInstance();let dict = reactive({aTypeOption: [],bTypeOption: [],
});/*** 获取字典数据*/
async function handleDicts() {let obj = {aTypeOption: "a_type",bTypeOption: "b_type",};for (const key in obj) {if (Object.hasOwnProperty.call(obj, key)) {let result = proxy.useDict(obj[key]);// 第二次进入组件能及时获取到数据// 所以watch不会被触发if (result[obj[key]].value) dict[key] = result[obj[key]].value;watch(() => result[obj[key]].value, (newVal) => {dict[key] = newVal;});}}
}handleDicts();

---

dict变量的另一种实现方法

let dict = reactive({aType: {option: [],dict: 'a_type'},bType: {option: [],dict: 'b_type'},
});

这篇关于web前端之若依vue3不能及时获取字典值的解决方案、二次封装若依自带的获取字典方法、watchEffect、watch的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---