Vue3 的函数式编程
Posted 面条请不要欺负汉堡
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue3 的函数式编程相关的知识,希望对你有一定的参考价值。
Vue3.0 正式版已经于9月底发布,其中,Vue3 新增的composition-api 是我们讨论的大热门,甚至不少 react 开发者都对其赞不绝口。那么,究竟什么是 函数式编程 ?composition-api 又厉害在哪里捏?
注:看本文章之前,你需要了解一下 Vue3 的 composition-api
动机
逻辑的组合与复用。
组件 API 设计所面对的核心问题之一就是如何组织逻辑,以及如何在多个组件之间抽取和复用逻辑。
在此之前,Vue2.x 的 Mixins 以及 react 的高阶组件等模式都可以实现逻辑的组合与复用,但它们都存在数据来源不清晰、命名空间冲突以及性能的问题。写到这里,要向 react 致敬,因为 React Hooks 的出现是革命性的,而 Vue3 的 composition-api 提供的全新的逻辑复用方案也是受到了 React Hooks 的启发。
我们来观察一下尤雨溪给出来的“用组合函数来封装鼠标位置侦听逻辑”例子:
function useMouse()
const x = ref(0)
const y = ref(0)
const update = e =>
x.value = e.pageX
y.value = e.pageY
onMounted(() =>
window.addEventListener('mousemove', update)
)
onUnmounted(() =>
window.removeEventListener('mousemove', update)
)
return x, y
// 在组件中使用该函数
const Component =
setup()
const x, y = useMouse()
// 与其它函数配合使用
const z = useOtherLogic()
return x, y, z
,
template: `<div> x y z </div>`
从例子中可以看到 composition-api :
- 暴露给模版的属性来源清晰(从函数返回);
- 返回值可以被任意重命名,所以不存在命名空间冲突;
- 没有创建额外的组件实例所带来的性能损耗。
演示
让我们结束枯燥的解释,来感受一下 使用函数式编程的Vue3 与 使用模板语法的Vue2 究竟能有哪些区别。我们从一个简单的 todolist 的例子来对比一下
首先我们使用 Vue2 的模板语法来实现:
<template>
<div class="home">
<form>
<input type="text" v-model="stu.id" />
<input type="text" v-model="stu.name" />
<input type="text" v-model="stu.age" />
<button type="submit" @click="handleAdd">添加</button>
</form>
<ul>
<li v-for="(item, index) in students" :key="item.id">
item.name , item.age 岁,
<button @click="handleDelete(index)">删除</button>
</li>
</ul>
</div>
</template>
<script>
export default
data()
return
students: [
id: 1, name: "张三", age: 10 ,
id: 2, name: "李四", age: 11 ,
id: 3, name: "王五", age: 12 ,
],
stu: ,
;
,
methods:
handleDelete(i)
this.students = this.students.filter((item, index) => index != i);
,
handleAdd(e)
e.preventDefault();
this.students.push(this.stu);
this.stu = ;
,
,
;
</script>
以上代码使用 Vue2 的模板语法实现了 todolist 的简单的新增和删除功能。
现在我们使用 Vue3 重写一下:
<template>
<form>
<input type="text" v-model="state.stu.id" />
<input type="text" v-model="state.stu.name" />
<input type="text" v-model="state.stu.age" />
<button type="submit" @click="handleAdd">添加</button>
</form>
<ul>
<li v-for="(item, index) in state.students" :key="item.id">
item.name , item.age 岁,
<button @click="handleDelete(index)">删除</button>
</li>
</ul>
</template>
<script>
import reactive from "vue";
export default
setup()
// 创建响应式初始数据
let state = reactive(
students: [
id: 1, name: "张三", age: 10 ,
id: 2, name: "李四", age: 11 ,
id: 3, name: "王五", age: 12 ,
],
stu: ,
);
// 删除方法
function handleDelete(i)
state.students = state.students.filter((item, index) => index != i);
// 添加方法
function handleAdd(e)
e.preventDefault();
state.students.push(state.stu);
state.stu = ;
// 将数据和方法返回,暴露给模板使用
return
state,
handleDelete,
handleAdd,
;
,
;
</script>
我们来观察以下 Vue3 的代码,发现我们定义的所有数据和逻辑都放在了 setup 函数里 —— 这难道不是使代码的可读性更差了吗?
当然不是,composition-api 又叫 “组合api” ,我们来看一下当把它逻辑组合之后,我们的 js 代码是什么样子:
<script>
import reactive from "vue";
export default
setup()
// 使用抽离后的移除逻辑
let state, handleDelete = useRemoveStudent();
// 使用抽离后的新增逻辑
let handleAdd = useAddStudent(state);
// 将数据和方法返回,暴露给模板使用
return
state,
handleDelete,
handleAdd,
;
,
;
// 移除功能的逻辑-----------------------------
function useRemoveStudent()
// 创建响应式初始数据
let state = reactive(
students: [
id: 1, name: "张三", age: 10 ,
id: 2, name: "李四", age: 11 ,
id: 3, name: "王五", age: 12 ,
],
stu: ,
);
// 删除方法
function handleDelete(i)
state.students = state.students.filter((item, index) => index != i);
return
state,
handleDelete,
;
// 新增功能的逻辑------------------------------
function useAddStudent(state)
// 添加方法
function handleAdd(e)
e.preventDefault();
state.students.push(state.stu);
state.stu = ;
return
handleAdd,
;
</script>
我们主要观察一下 setup 函数,会发现它居然是如此的优雅!所有单独的功能模块全部都独立开来,最后在 setup 函数中统一暴露给模板使用。我们甚至可以把组合后的逻辑放在单独的js文件中,这样会使我们的代码逻辑更直观,可维护性更高,复用性更强,就像我们文章开头所说的那样。
让我们再直观地看一眼 composition-api 的好处:
以上是关于Vue3 的函数式编程的主要内容,如果未能解决你的问题,请参考以下文章