组合式API（setup）

1. 作用：将同一逻辑关注点代码收集

2. 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