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'
	},
});