vue3 的基础使用

1 setup

• 函数中的第一个参数 是 props 函数 props 内部 setup 是响应式的，并且会传入新的props 时更新

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

• 请注意 如果你对 props 对象进行解构， 则被解构的变量将失去 反应性(v-model）因此建议始终以 props.xxx
• 如果你确实需要解构 props 或需要将 props 传递给外部函数同时保持反应性，您可以使用 toRefs() 和 toRef() 实用程序 API 执行此操作

import { toRefs, toRef } from "vue"
export default {
  props: {
    title: String
  },
  setup(props) {
    const { title } = toRefs(props)
    console.log(title.value)

    // OR, turn a single property on `props` into a ref （将单个属性“props”转换为ref）
    const propsTitle = toRef(props, "title")
    console.log("propsTitle", propsTitle.value)
  }
}

ref

• 接受一个内部值并返回一个反应性和可变的 ref 对象，它有一个.value指向内部值的属性

细节
ref 对象是可变的 - 即您可以将新值分配给.value. 它也是反应式的——即任何读取操作.value都会被跟踪，而写入操作将触发相关的效果。

reactivce

• 返回对象的反应式代理。

细节
反应式转换是“深度”的：它影响所有嵌套属性。反应式对象还可以在保持反应性的同时深入解开任何作为refs的属性。