【Vue3】vue3 中 watch 和 watchEffect 的区别

监听路由变化

切换分类的时候，商品的数据不会发生变化

原因：setup的代码只会执行一次，因此需要监听路由的变化。

（1）监听数据变化-发送请求获取数据

const {
    
     category } = useStore()
const route = useRoute()
watch(
  () => route.params.id,
  (value) => {
    
    
    category.findTopCategory(value as string)
  },
  {
    
    
    immediate: true,
  }
)

（2）问题，如果监听了路由变化之后，从分类页跳转到首页，也会报错，因此需要判断路由地址

watch(
  () => route.params.id,
  (value) => {
    
    
    if (route.fullPath === `/category/${
      
      value}`)
      category.findTopCategory(value as string)
  },
  {
    
    
    immediate: true,
  }
)

watchEffect的使用

使用watchEffect监听路由的变化

参考文档：https://staging-cn.vuejs.org/guide/essentials/watchers.html#watcheffectopen in new window

watchEffect(() => {
    
    
  // 只有是一级分类的情况下，才发送这个请求
  // console.log(route.fullPath)
  const id = route.params.id as string
  // console.log(route.fullPath, '=====', `/category/${id}`)
  if (route.fullPath === `/category/${
      
      id}`) {
    
    
    category.getTopCategory(id)
  }
})

watch vs. watchEffecthttps://staging-cn.vuejs.org/guide/essentials/watchers.html#watch-vs-watcheffect

watch 和 watchEffect 都给我们提供了创建副作用的能力。它们之间的主要区别是追踪响应式依赖的方式：

• watch 只跟踪明确监视的源。它不会跟踪任何在回调中访问到的东西。另外，回调仅会在源确实改变了才会被触发，watch 将依赖追踪和副作用区分开，这让我们对如何触发回调有更多的控制权。
• 而 watchEffect 则将依赖追踪和副作用耦合，会自动追踪其同步执行过程中访问到的所有响应式属性。这更方便，一般来说代码也会更简洁，但其响应性依赖关系则不那么显式。