watch onMounted 问题
来源：4-11 useClickOutside 第一个自定义函数
慕九州4321812
2021-12-28
老师您好，
确认一下，本届视频中，您说需要使用watch, 因为useClickoutside()只能执行一次。
我的问题是，虽然useClickoutside()是写在在setup()中的，但是useClickoutside.ts中已经写了如下，应该是可以执行多次的：
onMounted(() => {
document.addEventListener(‘click’, handler)
})
onUnmounted(() => {
document.removeEventListener(‘click’, handler)
})
之前vue3基础知识讲解的时候，有一节讲鼠标点击页面获得坐标信息的实现，也是没有用watch, 是可以执行多次的。
请帮忙解答一下，谢谢：）
写回答
1回答
-
同学你好 谢谢你的问题
两个生命周期是可以执行多次的这个没错，也就是是说 isClickOutside 在点击的时候可以被设置为正确的值，如果你直接展示在页面上也能发现它可以自动变成对应的值。
但是现在我们的逻辑是除了这个值，还要顾及 isOpen，它们两个要联合的发生作用，所以我们需要一个表达式来设置正确的值，
但是这段逻辑在 setup 中是执行一次的，所以你就会发现它只能在组件渲染的时候，执行了一次。后面虽然响应式值在变化，但是具体的逻辑不会处罚了。
所以这就是我们需要使用 watch 的原因，我们要感知变化以后，再次重新执行对应的逻辑。
112021-12-29
相似问题