Vue3官网示例 watch 的疑问

Question

在官网 Vue3官网响应式监听示例 中，代码如下：

// src/components/UserRepositories.vue `setup` function
import { fetchUserRepositories } from '@/api/repositories'
import { ref, onMounted, watch, toRefs } from 'vue'

// 在我们组件中
setup (props) {
  // 使用 `toRefs` 创建对 `props` 中的 `user` property 的响应式引用
  const { user } = toRefs(props)

  const repositories = ref([])
  const getUserRepositories = async () => {
    // 更新 `prop.user` 到 `user.value` 访问引用值
    repositories.value = await fetchUserRepositories(user.value)
  }

  onMounted(getUserRepositories)

  // 在 user prop 的响应式引用上设置一个侦听器
  watch(user, getUserRepositories)

  return {
    repositories,
    getUserRepositories
  }
}

其中为什么不能直接监听 props.user，即 watch(props.user, getUserRepositories) ，而需要 const { user } = toRefs(props) 这一步？

Answer 1

因为watch函数是用effect函数实现的，为了能触发trigger函数，必须是响应式数据，所以要走一遍toRefs,应为你不能保证user一定是响应式的，他可能是一个字符串，是一个数字，为了代码能够在所有情况下都能正常工作，toRefs是必要的

推荐你看下《Vue设计与实现》 这本书，也感谢jsdeferred对我答案的完善😂

Answer 2

当然可以，这里使用const { user } = toRefs(props)只是单纯的为了解构。
setup逻辑中会多次使用到props.user，解构后直接使用user即可，方便取值。
而props是响应式对象，直接解构不能得到user，因此得使用toRefs先转换成普通js对象，并保留了user的响应性。

---

另外，监听 props.user的话，你得这样写：
watch(()=>props.user,callback)