vue 中这种模式一般是怎么处理的?

watch(
  () => {return props.value}, 
  async () => { 
   const rect = await getRect()  
    // 其他操作
    onther(rect )
  },
 {
    immediate: true,
  }
)

上面的代码是有一点问题,getRect() 会在 props.value 发生改变时执行,props.value 会频繁改变,而 getRect() 只需要全局执行一次就可以了,以上的代码会导致 getRect() 多次执行。

并且需要要求 onther(rect) 在首次执行时必须被执行,不能被跳过。

const rect = ref()
getRect(() => {
  rect.value = rect 
}) 
watch(
  () => {return props.value}, 
  async () => { 
   if(!rect.value) return
    // 其他操作
    onther(rect )
  },
 {
    immediate: true,
  }
)

这样也不是不行的
除了在 getRect() 内使用缓存外,有没有比较好的模式来解决这个问题？

阅读 1k

回答

在 Vue 中处理类似的情况，你可以使用 onMounted 或 watchEffect 来确保 getRect() 只被调用一次，并存储结果，然后在 watch 中使用这个存储的结果。这样可以避免 getRect() 在 props.value 频繁变化时被多次调用。

以下是一个更好的模式来解决这个问题：

<script setup>
import { ref, onMounted, watch } from 'vue';

const props = defineProps({
  value: ... // 定义你的 prop 类型
});

const rect = ref(null);

// 定义一个异步函数来获取 rect，只调用一次
const fetchRect = async () => {
  rect.value = await getRect();
};

// 在组件挂载时调用 fetchRect
onMounted(fetchRect);

// 监听 props.value 的变化
watch(
  () => props.value,
  async () => {
    if (!rect.value) {
      // 如果 rect.value 还未被赋值（理论上不应该发生，因为已经在 onMounted 中赋值），则重新获取
      await fetchRect();
    }
    // 其他操作
    onther(rect.value);
  },
  {
    immediate: true, // 确保在监听开始时立即执行一次回调函数
  }
);
</script>

解释

定义 rect 引用：使用 ref 来存储 getRect() 的结果。
定义 fetchRect 异步函数：这个函数只负责调用 getRect() 并存储结果到 rect 中。
在 onMounted 中调用 fetchRect：确保组件挂载时 getRect() 只被调用一次。
使用 watch 监听 props.value：在 watch 的回调函数中，首先检查 rect.value 是否存在，如果存在则继续使用，否则理论上应该已经在 onMounted 中赋值，但如果出于某种原因未赋值，则重新调用 fetchRect()。
设置 immediate: true：确保 watch 的回调函数在监听开始时立即执行一次。

这种方法确保了 getRect() 只会在组件首次挂载时被调用一次，并且无论 props.value 如何变化，onther(rect.value) 都会使用到缓存的 rect 值，从而避免了不必要的多次调用。

vue 中这种模式一般是怎么处理的?

回答

解释

你尚未登录，登录后可以

扁平化数组转换成树形?

js 如何将Key属性相同的放在同一个数组？

省市区街道数据在哪里可以下载？

在Electron中，我们想要创建特定的BrowserWindow，想要使用react组件作为BrowserWindow的内容，请问如何实现呢？

怎么识别手机号的主人变更了？

Vue项目一个报错无法找到原因?

前端页面脚本更新时，如何让用户端，使用最新脚本？