Vue3中Composition API总结

setup

    WARNING

由于在执行 setup 时尚未创建组件实例，因此在 setup 选项中没有 this。这意味着，除了 props 之外，你将无法访问组件中声明的任何属性——本地状态、计算属性或方法。

1. 在创建组件之前执行，所有的组合API函数都在此使用, 只在初始化时执行一次

2. 函数如果返回对象, 对象中的属性或方法, 模板中可以直接使用

import { ref, reactive } from 'vue'
export default {
  props: {
    user: { type: String }
  },
  setup(props, context) {
    console.log(props) // { user: '' }

    //context=={attrs, slots, emit}
    attrs: 包含了再props中没有声明的属性对象，相当于this.$attrs
    slots: 包含了所有传入的插槽对象，相当于this.$solts
    emit：用来分发自定义事件的函数，相当于this.$emit

    return {} // 这里返回的任何内容都可以用于组件的其余部分
  }
  // 组件的“其余部分”
}

ref () 深度 一般用来定义一个基本类型的响应式数据

1. 传入一个基本数据类型===》返回一个Ref对象（用count.value=***来修改值）

2. 传入一个对象{},会被转成 proxy对象，响应式转换是“深层”的——它影响所有嵌套 property，相当于reactive

reactive()传入一个对象，返回响应式数据

1. 响应式转换是“深层”的——它影响所有嵌套 property

unref

如果参数为 ref，则返回内部值，否则返回参数本身。这是 val = isRef(val) ? val.value : val。

function useFoo(x: number | Ref<number>) {
  const unwrapped = unref(x) // unwrapped 确保现在是数字类型
}

toRef

可以用来为源响应式对象上的 property 性创建一个 ref。然后可以将 ref 传递出去，从而保持对其源 property 的响应式连接。

const state = reactive({
  foo: 1,
  bar: 2
})

const fooRef = toRef(state, 'foo')

fooRef.value++
console.log(state.foo) // 2

state.foo++
console.log(fooRef.value) // 3

当您要将 prop 的 ref 传递给复合函数时，toRef 很有用：

export default {
  setup(props) {
    useSomeFeature(toRef(props, 'foo'))
  }
}

#toRefs

将响应式对象转换为普通对象，其中结果对象的每个 property 都是指向原始对象相应 property 的ref。

const state = reactive({
  foo: 1,
  bar: 2
})

const stateAsRefs = toRefs(state)
/*
Type of stateAsRefs:

{
  foo: Ref<number>,
  bar: Ref<number>
}
*/

// ref 和 原始property “链接”
state.foo++
console.log(stateAsRefs.foo.value) // 2

stateAsRefs.foo.value++
console.log(state.foo) // 3