Composition API
- setup
Tips
- Vue3支持多个标签Vue2不支持
- Vue3通过createApp函数初始化，Vue2通过对象new Vue({template:'',render(){}})初始化
- 使用ts时.vue文件报错解决，根目录添加shims-vue.ts
- router初始化
- 配置vite alias路径别名,在vite.config.js中加入(vite2+)
- script文件中当lang=ts时引入没有script的组件会报错如下
- ref相当于一个响应式的盒子，盒子里的value属性才是我们需要的值
- ref用法">当 ref 作为渲染上下文 (从 setup() 中返回的对象) 上的 property 返回并可以在模板中被访问时，它将自动展开为内部值。不需要在模板中追加 .value ref用法
- 在setup函数中使用router
- setup中第二个参数为context，可以解构出 attrs,slots,emit,
- 父组件可以通过$event直接拿到事件携带的参数
- 自定义组件使用v-modal的方式,注意3.x和2.x有明显的不同，已经习惯2.x开发的同学需要格外注意
- v-bind.sync的使用方式，参见第12条，v-modal某种意义上可以替代.sync方案，其形式几乎相同
- v-on监听事件名称会全部转为小写，所以任何时候，事件推荐使用短横线连接的方式
- 2.x版本中的$listener在3.X中移除，事件监听是$attrs中的一部分
- 非Props的Attribute。这种情况经常发生在有外部包裹结构的组件上。此时">由于上一条，所有的非声明的组件的属性和事件，将会默认绑定到子组件的根元素上，则可能造成事件和样式不是我们想要的，此时，使用inheritAttrs:false来更改默认的行为非Props的Attribute。这种情况经常发生在有外部包裹结构的组件上。此时
- 继续上一条，总结一波props vs attrs

Composition API

setup

执行时机

  - `setup`在`beforeCreate`钩子前执行**一次**，此时并**没有组件**也就没有指向组件本身的`this`

返回值

  - setup是一个函数，如果这个函数返回了对象，则对象中的属性或方法，**可以在模版中直接使用**
  - setup返回的对象中的**方法**和**属性**，会和组件options中定义的data、methods中返回的对象和方法**合并**，

注意：虽然setup返回的对象可以和options中的合并，但是，setup中并不能访问当前组件实例的this，也就是说，setup函数中，不能访问
options中的data和methods。所以请不要混合使用setup和methods

  - setup不能是一个async函数，因为如果是async函数，其返回的是promise对象，而不是一个普通对象。

参数

  - 两个参数 `props`、`context`，[说明](https://v3.cn.vuejs.org/guide/composition-api-setup.html#props)

props

     - props是响应式的，包括了所有组件上定义的props中包含的属性
     - 由于props是响应式的，所以不能直接使用解构赋值，因为会消除他的响应性
     - 如果想使用解构赋值，使用`toRefs`为源目标对象[创建响应式链接](https://v3.cn.vuejs.org/api/refs-api.html#torefs)，然后可以使用解构赋值。

//child.vue
import { toRefs } from 'vue'
...
setup() {
    const { age } = toRefs(props.person)
}

注意：props中存在可选props，这时候需要单独为这个props创建toRef的单独的响应式链接。

//childe.vue
import { toRef } 'vue'
...
setup() {
    const career = toRef(props.person, 'career')
}

context

context是一个普通的对象，所以可以使用解构赋值，这里要注意的是，attrs和slots是有状态的对象，这里不应该使用解构，而通过.点记法引用属性，attrs.xxx、slots.xxx

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

attrs
任何不在props对象上定义的属性，都会放在attrs对象上，注意这里和vue2.x有明显的区别，vue2.x中attrs中不包含事件回调，也就是on，vue3.0中，如果子组件没有显示的定义emits数组或对象，则会抛出警告。正确的做法是，添加emits属性在实例上，并使用
slots
emit
相当于vue2.x中的this.$emit，不同的是，在setup中使用，需显式的定义emits，这样可以将emits分发的事件，从attrs上移除。
新增的emitsOption，这里我们建议定义所有的分发事件，并且对分发事件进行适当的校验