React Hooks 和 Vue3的一些比对

1、props的使用

hooks

父组件使用props给子组件传值，在子组件中可以解构props,解构出的变量不会丢失响应性

const Child = (props: any) => {
    const {name, age} = props
    return (
          <div>{name}-{age}</div>
    )
}

组合式API

setup 函数的 props 是响应式的，并且会在传入新的 props 时同步更新；如果你解构了 props 对象，解构出的变量将会丢失响应性。因此我们推荐通过 props.xxx 的形式来使用其中的 props。

export default {
  props: {
    title: String
  },
  setup(props) {
    console.log(props.title)
  }
}

如果你确实需要解构 props 对象，或者需要将某个 prop 传到一个外部函数中并保持响应性，那么你可以使用 toRefs() 和 toRef() 这两个工具函数：

import { toRefs, toRef } from 'vue'

export default {
  setup(props) {
    // 将 `props` 转为一个其中全是 ref 的对象，然后解构
    const { title } = toRefs(props)
    // `title` 是一个追踪着 `props.title` 的 ref
    console.log(title.value)

    // 或者，将 `props` 的单个属性转为一个 ref
    const title = toRef(props, 'title')
  }
}