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

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

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

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

<a name="SdXLZ"></a>

计数组件视图与数据部分

<template>
  <div style="margin-top: 20px;">
    <span>count is <span class="emphasis">{{ count }}</span></span>
    <span>plusOne is <span class="emphasis">{{ plusOne }}</span></span>
    <el-button @click="increment">count++</el-button>
  </div>
</template>

<script>
import Vue from "vue";
import { value, computed, watch, onMounted } from "vue-function-api";
import useCout from "./cout.js";
export default {
  setup() {

    

    const { count, plusOne, increment } = useCout();
    // expose bindings on render context
    return {
      count,
      plusOne,
      increment
    };
  }
};
</script>

<a name="fhfox"></a>

计数组件业务逻辑部分

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 导致的属性名或方法名命名冲突，模版中的数据来源不清晰等问题，独立而又显示的展示业务逻辑。
<a name="fvGXJ"></a>

2. 分页组件

<a name="QYTJr"></a>

分页组件视图与数据部分

<template>
  <div>
    <div style="margin-top: 20px;">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
      <div style="margin-top: 20px;">
        <el-button @click="getDataList">取得数据</el-button>
      </div>
    </div>
  </div>
</template>

<script>
/* eslint-disable */
import Vue from "vue";
import { value, computed, watch, onMounted } from "vue-function-api";
import usePagination from "./pagination.js";
export default {
  setup() {
    // 请求数据
    const getDataList = () => {
      // setTotal(parseInt(Math.random() * 100));
      setTotal(68);
    };

    // pagination
    const {
      currentPage,
      pageSize,
      total,
      handleCurrentChange,
      handleSizeChange,
      setTotal
    } = usePagination(getDataList);
    
    // expose bindings on render context
    return {
      currentPage,
      pageSize,
      total,
      handleCurrentChange,
      handleSizeChange,
      setTotal,
      getDataList
    };
  }
};
</script>

<a name="t1yLW"></a>

计数组件业务逻辑部分

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 重写你的组件的业务逻辑