用 Vue Function-based API 重写你的组件的业务逻辑

用 Vue Function-based API 重写你的组件的业务逻辑

_令人激动的 Vue Function-based API _

_Vue 的作者尤雨溪最近公布了 3.0 版本最重要的 RFC Vue Function-based API。建议仔细阅读这篇文章再来看这篇文章。本文主要讲述如何使用该 API 重新组织我们的组件与业务逻辑代码，去除那令人讨厌的 mixin 。

1. 使用 Vue Function-based API 写计数组件

计数组件视图与数据部分

计数组件业务逻辑部分

cout.js

/* eslint-disable */
import {
  value,
  computed,
  watch,
  onMounted
} from "vue-function-api";

// 后端分页逻辑
function useCout() {
  // reactive state
  const count = value(0);
  // computed state
  const plusOne = computed(() => count.value + 1);
  // method
  const increment = () => {
    count.value++;
  };
  // watch
  watch(
    () => count.value * 2,
    val => {
      console.log(`count * 2 is ${val}`);
    }
  );
  // lifecycle
  onMounted(() => {
    console.log(`mounted`);
  });
  return {
    count,
    plusOne,
    increment
  };
}

export default useCout

我们看到计数逻辑相关业务逻辑封装在一个独立的模块中，与视图层分离。避免了 vue 2.0 的 mixin 导致的属性名或方法名命名冲突，模版中的数据来源不清晰等问题，独立而又显示的展示业务逻辑。

2. 分页组件

分页组件视图与数据部分

计数组件业务逻辑部分

pagination.js

/* eslint-disable */
import { value, watch, onMounted } from 'vue-function-api'
// 后端分页逻辑
function usePagination(changeCallback) {
  const currentPage = value(1);
  const total = value(0);
  const pageSize = value(10);
  const handleCurrentChange = (val) => {
    console.log(`当前页: ${val}`);
    currentPage.value = val;
    changeCallback()
  }

  const handleSizeChange = (val) => {
    console.log(`每页 ${val} 条`);
    pageSize.value = val;
    changeCallback()
  }

  const setTotal = (val) => {
    total.value = val;
  }

  return {
    currentPage,
    pageSize,
    total,
    handleCurrentChange,
    handleSizeChange,
    setTotal
  }

}

export default usePagination

代码 demo 地址：GitHub链接

让我们可以使用 vue function API 的插件：Vue Function-based API
本文同步发表于语雀文档：用 Vue Function-based API 重写你的组件的业务逻辑