vue3的setup的认识

setup是什么？

认识setup
1.理解：vue3.0出现中的一个配置 值为一个函数
2.是所有CompositionAPI（组合API）表演舞台
3.组建中所用到的：数据、方法、均要在setup中配置
4.set的函数2种返回值：

1.若返回一个对象，则对想中的属性、方法、在模板中均可以直接使用
2.若返回一个渲染函数：则可以自定义渲染内容

5.注意事项：

1.尽量不与2.X配置混用
 vue2中的data methods computed 可以访问setup中的属性、方法
 但在setup中不能访问到vue2.Xpe配置
 如果有重名，setup优先

2.set不能是一个async函数，因为返回值不再是return对象，而是一个promise对象，模板看不到return对象的属性

在官方文档中使用 setup 函数时，它将接收两个参数：

1. props
2. context

(1)、setup 函数中的 props 是响应式的，当传入新的 prop 时，它将被更新

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

(2)、注意：
(1.因为 props 是响应式的，你不能使用 ES6 解构，它会消除 prop 的响应性
(2.如果需要解构 prop，可以在 setup 函数中使用 toRefs 函数来完成此操作

示例：

setup(props) {
  const { title } = toRefs(props)
}

(3)、如果 title 是可选的 prop，则传入的 props 中可能没有 title 。在这种情况下，toRefs 将不会为 title 创建一个 ref 。你需要使用 toRef 替代它

示例：

// MyBook.vueimport { toRef } from 'vue'setup(props) {
  const title = toRef(props, 'title')
  console.log(title.value)}

二、Context

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

export default {
  setup(props, context) {
    // Attribute (非响应式对象)
    console.log(context.attrs)

    // 插槽 (非响应式对象)
    console.log(context.slots)

    // 触发事件 (方法)
    console.log(context.emit)
  }}

(2)、context 是一个普通的 JavaScript 对象，也就是说，它不是响应式的，这意味着你可以安全地对 context 使用 ES6 解构

attrs 和 slots 是有状态的对象，它们总是会随组件本身的更新而更新。这意味着你应该避免对它们进行解构，并始终以 attrs.x 或 slots.x 的方式引用 property。请注意，与 props 不同，attrs 和 slots 是非响应式的。如果你打算根据 attrs 或 slots 更改应用副作用，那么应该在 onUpdated 生命周期钩子中执行此操作

setup的细节点

回顾vue2的props以及slot

vue2：
1.不使用props接收的值可以在实例vm身上的$attrs对象里访问到
2.使用props接收,在$attrs对象里访问不到
3.使用props接收父组件传递的值可以限制数据类型,而直接使用$attrs对象获取则无法限制类型,不符规范


父组件中直接在子组件里面添加标签节点,如果子组件接未接收,vm实例上的$slot会有默认的default数组,数组里面是所添加未接收的节点

vue3的setup的props以及slot

vue3的setup注意点：
1.setup的执行时机
  在beforeCreate之前执行一次,this是undefined
2.setup的参数
  props：值为对象,包含：组件外部传递过来，而且组件内部声明接收了的属性
  context:上下文对象
    attrs:值为对象,包含：组件外部传递过来,但没有在props配置中声明的属性，相当于$attrs
    slots:收到的插槽内容：相当于thisthis.$slots
    emit:分发自定义事件的函数,相当于this.$emit