vue3 文档总结 -高阶指南-组合式 API

组合式 API

什么是 composition API?

• 将业务的逻辑关注点从不同 options，迁移到了同一个 option - setup
• 组件具有更好的聚合性。同时组件很大时，也能减少组件维护的心智负担
• 组合式 API 实际使用的地方在 setup 中。setup 中没有 this.除了 props 之外，无法访问组件声明的任何属性-本地状态、计算属性或者方法
• setup 接受 props 和 context 参数

setup

props 参数

• setup 接受第一个参数是 props。这个 props 是响应式的
• setup 是响应式的，所以不能直接解构。这样会丢失响应性
• 可以借助 toRefs 来将 props 安全的转化为 ref 然后再进行解构(最好都用 toRfs 转化一下)

  props: {
   
    msg: Number,
  },
  setup(props) {
   
    const {
   msg} = toRefs(props)
    return {
    msg };
  },

context 参数

• context 参数是一个普通的 Javascript 对象,可以直接解构
• {attrs, slots, emit} = context, emit 是子组件向外触发事件的方法

生命周期

• 可以在 setup 中使用声明周期函数
• 写法与 options API 略有不同
• setup 中没有 与 created 和 beforeCreated 对应的钩子。其他的对应关系大部分都是在在原来的基础上加上了 on: on + lifeCycles

提供、注入

• vue3 的写法，将全部写在 setup 中，不再是 vue2 的那种选项式的声明
• provide 接受连个参数： 1.注入属性的名子<String> 2. 值
• inject 同样接受两个参数： 1. 要接受/注入的属性名字<String> 2.第一个参数的默认值（可选）。
  父组件中：

<template>
  <h1>{
  { val }}</h1>
  <HelloWorld />
</template>

<script>
  import {
     ref, computed, provide } from "vue";
  import HelloWorld