vue3中的setup

组合式API（setup）
作用：将同一逻辑关注点代码收集

setup

使用 setup 函数时，它将接受两个参数

props
context
Props

props 是 setup 函数中的第一个参数，props 是用 Proxy 包裹的一个响应式数据，当传入新的 props时，它将被更新。

需要注意的是：因为 props 是响应式的，不能使用 ES6 结构，因为解构会消除 props 的响应性。

如果需要解构 props，可以在 setup 函数中使用 toRef 函数来完成此操作：
 

import { toRefs } from 'vue';

setup(props){
    const { title } = toRefs(props);
    console.log(title.value);
}

如果 title 是可选的 props, 则传入的 props 中可能没有 title，这种情况下就需要 toRef 来代替它

import { toRef } from 'vue';
setup(props){
    const title = toRef(props, 'title');
    console.log(title.value);
}

Context

传递给 setup 函数的第二个参数是 context。context 是一个普通的 javascript 对象，它暴露给组件三个 property：

export default {
    setup(props, context){
        // Attribute (非响应式对象)
        console.log(context.attrs);
        // 插槽 (非响应式对象)
        console.log(context.slots)
        // 出发事件（方法）
        console.log(context.emit);
    }
}

context 是一个普通的javascript对象，也就是说，它不是响应式的，可以使用 ES6 进行结构。

export default {
    setup(props, { attrs, slots, emit }){}
}

attrs 和 slots 是有状态的对象，他们总会随着组件本身的更新而更新。应该避免对其进行解构，以 attrs.x 或者 slots.x来引用属性，与 props 不同，attrs 和 slots 是非响应式的，如果打算根据 attrs 或者 slots 更改应用的副作用，那么应该在 onUpdated 声明周期钩子中执行此操作。
执行 setup时，组件实例尚未被创建，因此，只能访问到以下属性：

• props
• attrs
• slots
• emit
• this 返回为 undefined