一、为什么选择CompositionAPI

📺  VueMastery原版

📺  然叔与杨村长的深度解读

1. Vue2的局限性

• 组件逻辑膨胀导致的可读性变差

• 无法跨组件重用代码

• Vue2对TS的支持有限

想象一下如果我们编写一个组件包含🔍搜索和排序另两个功能

在传统的OptionsAPI中我们需要将逻辑分散到以下六个部分

OptionsAPI

• components

• props

• data

• computed

• methods

• lifecycle methods

这样会是我们编辑一个逻辑不得不在代码中反复横跳

2. 如何使用CompositionAPI解决问题

最佳的解决方法是将逻辑聚合就可以很好的代码可读性。

这就是我们的CompositionAPI语法能够实现的功能。CompositionAPI是一个完全可选的语法与原来的OptionAPI并没有冲突之处。他可以让我们将相同功能的代码组织在一起，而不需要散落到optionsAPI的各个角落。

当然可以使用符合API并不是代表我们整个页面只需要使用一个组件完全用复合API进行组装。

我们还是需要通过组件将页面进行合理的分拆。

3. 代码重用方法PK

Vue2中的跨组件重用代码，我们大概会有四个选择。

3.1 Mixin - 混入

代码混入其实就是设计模式中的混合模式，缺点也非常明显。

可以理解为多重继承，简单的说就是一个人如何有两个父亲

❌无法避免属性名冲突 - 长鼻子随谁

❌继承关系不清晰

3.2 Mixin Factory - 混入工厂

返回一个

✅代码重用方便

✅继承关系清洗

3.3 ScopeSlots - 作用域插槽

• ❌可读性不高

• ❌配置复杂 - 需要再模板中进行配置

• ❌性能低 - 每个插槽相当于一个实例

3.4 CompositionApi - 复合API

• ✅代码量少

• ✅没有引入新的语法，只是单纯函数

• ✅异常灵活

• ✅工具语法提示友好 - 因为是单纯函数所以 很容易实现语法提示、自动补偿

二、 setup & ref

📺  VueMastery原版

📺  然叔与杨村长的深度解读

1. 使用CompositionAPI理由

• ✅更好的Typescript支持

• ✅在复杂功能组件中可以实现根据特性组织代码 - 代码内聚性👍 比如： 排序和搜索逻辑内聚

• ✅组件间代码复用

2. setup是什么

• 在以下方法前执行：

• Components

• Props

• Data

• Methods

• Computed Properties

• Lifecycle methods

• 可以不在使用难于理解的this

• 有两个可选参数

• props - 属性 (响应式对象 且 可以监听(watch))

import {watch} from "vue"
export defalut {
  props: {
    name: String
  },
  setup(props) {
    watch(() => {
      console.log(props.name)
    })
  }
}

• context 上下文对象 - 用于代替以前的this方法可以访问的属性

setup (props,context) {
  const {attrs,slots,parent,root,emit} = context
}

3. ref是什么

This wraps our primitive in an object allowing up to track。

对基本数据类型数据进行装箱操作使得成为一个响应式对象，可以跟踪数据变化。

4. 总结

可维护性明显提高

• 可以控制哪些变量暴露

• 可以跟中哪些属性被定义 （属性继承与引用透明）

三、Methods

📺  VueMastery原版

📺  然叔与杨村长的深度解读

1. 基础用法

添加方法如下：

2. 自动拆装箱总结

• JS ：需要通过.value访问包装对象

• 模板:   自动拆箱

四、 Computed - 计算属性

📺  VueMastery原版

📺  然叔与杨村长的深度解读

这个地方实在没什么好讲的，和Vue2没变化

<template>
  <div>
    <div>Capacity： {{ capacity }}</div>
    <p>Spases Left: {{ sapcesLeft }} out of {{ capacity }}</p>
    <button @click="increaseCapacity()">Increase Capacity</button>
  </div>
</template>
<script>
import { ref, computed, watch } from "vue";
export default {
  setup(props, context) {
    const capacity = ref(3);
    const attending = ref(["Tim", "Bob", "Joe"]);
    function increaseCapacity() {
      capacity.value++;
    }
    const sapcesLeft = computed(() => {
      return capacity.value - attending.value.length;
    });
    return { capacity, increaseCapacity, attending, sapcesLeft };
  },
};
</script>