vue2遇上composition-api

组合式API确实很爽。---- 沃兹寄-硕德

vue2代码复用的局限性

vue2中复用代码逻辑的形式有哪些

mixins
指令

对于mixins来说，会造成来源不明确，变量覆盖，重复执行，无代码提示等缺点。对于指令来说，vue2的指令理解起来还是有点费劲，而且指令其实也不是特别的好用

目前看来，在vue2中并没有很好的代码复用方式，更不利于封装成一个开源包给到用户去用。

vue3自从引入了composition-api后，正式进入了hooks时代，也多了比较多的hooks库给到用户去用，比如Vueuse等比较多的库。

composition-api就是将用户从vue2中的options-api的思想形式变成组合方法的形式中。

@vue/composition-api

为了抹平vue3和vue2的差异，同时也让vue2的用户也尝尝composition-api的便利，Vue团队提供了@vue/composition-api处理。

用法

在vue2项目安装

npm i @vue/composition-api
// or 
yarn add @vue/composition-api

接着需要在main.js中

import Vue from 'vue';
import CompositionApi from '@vue/composition-api';

Vue.use(CompositionApi);

在项目中使用

import { ref, reactive } from '@vue/composition-api';

如此即可以愉快的使用组合式api了

ref和reactive

在composition-api中，不需要再在data中声明数据，声明响应式数据统一都用ref和reactive，

import { ref, reactive } from '@vue/composition-api';

export default {
   setup() {
       // ref同时可以声明后复制给对应的dom元素的ref，就可以像vue2那样使用ref了
       const d = ref(1);
       const r = reactive({ a: 1, b: 2 });
       // 如此便可在模板中使用
       return {
         d,
         r
       }
   }
}

watch，watchEffect，computed

watch在composition-api中，新增了两种监听的方式

watch(refData, (val) => {})

watch(() => refData.value, (val) => {})

vue借鉴了react的useEffect,不同的是，vue对所需的依赖会进行自动收集处理，让使用者无需显式处理依赖

const data = ref(1);
// 此处会打印两次
watchEffect(() => {
  console.log('value', data.value);
});

data.value = 2;

computed用法改变不大

const refA = ref(1);

const computedA = computed(() => refA.value);

onMounted和onUnmounted

在composition-api中，生命周期函数被分离出去，使用者只需要在setup或者hooks中调用这两个生命周期函数即可调用到对应的生命周期回调。

onMounted(() => {
  console.log('onMounted');
});

onUnmounted(() => {
  console.log('onUnmounted');
});

defineComponent

有了defineComponent，写代码的时候就拥有了类型提示，从此写代码安全感大大提升,基本上行vue3有的语法提示它都有

一个hooks例子

export function usePagination() {
     const pageNum = ref(1); 
     const pageSize = ref(10); 
     const total = ref(0); 

     const getList = () => { } 

     return { 
         pageNum, 
         pageSize, 
         total,
         getList 
     }

}

vue从此拥有了hooks库，十分感动。

注意点

需要安装vetur，不然@vue/composition-api没有代码提示,而且vetur的代码补全没有volar做得好。
目前发现一个奇怪的问题，父组件的mounted比子组件的mounted先执行，暂时不确定是不是composition-api的影响
由于vue2只是hack了vue3的用法，所以vue2的坑点，无法对新增和删除的数据进行感知，所以还是需要用户自行手动去set和del数据来进行数据的响应式更新