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