为什么 Vue 3 的 `setup(props) { props.id }` 返回 undefined

Question

为什么setup(props) { props.id } 从watchEffect(() => fetch(getUrl()) 回调返回undefined，（Vue 3 watchEffect 函数）？

使用函数useFetch(() => url)的示例

即
const { data, error, isPending } = useFetch(() => https://jsonplaceholder.typicode.com/todos/${props.id})

结果到https://jsonplaceholder.typicode.com/todos/undefined

预期：https://jsonplaceholder.typicode.com/todos/1 // id++ { 2, 3, ... }

见下面的代码sn-p；

<script src="https://unpkg.com/vue@next"></script>

<div id="app"></div>

<script>
  const { createApp, ref, watchEffect } = Vue; 

  useFetch(getUrl => {  
    const data = ref(null)          
    const error = ref(null)           
    const isPending = ref(true)

    watchEffect(() => fetch(getUrl())
      isPending.value = true
      data.value = null
      error.value = null

    return { data, error, isPending }
  })

  const Post = {
    template: `...`,
    setup(props) {
      console.log("setup props.id: ", props.id)  // returns undefined
      
      const { data, error, isPending } = useFetch(() => `https://jsonplaceholder.typicode.com/todos/${props.id}`) // jsonplaceholder.typicode.com/todos/undefined
    }
  }
  
  const App = {
    components: { Post },
    data() {
      return {
        id: 1
      }
    },
    template: `
    <button @click="id++">change ID</button>
    <Post :id="id"/>
    `   
  }

  createApp(App).mount("#app");
</script>

Answer 1

使用组合 API (setup(props))，您仍然需要定义组件的 props 是什么。

这可能看起来像。

const Post = {
  template: `...`,
  props: {
    id: {
      type: Number,
      required: true
    }
  },
  setup(props) {
    console.log("setup props.id: ", props.id) // now works?
    // etc...
  }
}