vue3 - composition api

Vue3中提出的一个新概念, 作用: 聚合代码 & 逻辑重用

Vue的组件化做的相当出色, 帮助我们更好的拆分代码和约束代码, 增加可读性, 但是2.x有几个问题也是开发者们时刻在关注的

代码逻辑不够聚合, 比较分散, 如果我们的组件代码量一多, 找相同的代码逻辑会显得比较困难

上面的图我把相同逻辑代码用同样的颜色框在了一起, 抛出方法本身的调用以外, 我们依旧可以很清晰的发现这些逻辑是分散的, 非聚合的, 跟react不同, vue只能拆分功能组件却很难拆分逻辑, 所以当我们逻辑一多, 一个组件里存在十多个方法十多种状态, 四五六七八种逻辑的话框会更加多, 找寻起来会比较麻烦, 特别是这个组件不是你自己写的情况下, 在找寻不同逻辑代码会比较困难
逻辑重用困难, 我们知道在vue中逻辑和模板是强绑定的状态, 也就是说如果你想要复用一段逻辑, 你必须复用这个组件, 这对拆分关注点又是一种伤害, 有的时候我并不是很想要UI, 只想要这段逻辑, 这就很难处理了, 而vue2中只给我们提供了mixin来混入逻辑, 但是mixin的致命缺陷就是让你更难屡清楚逻辑, 毕竟人家的语法一句话就搞定, 发生了什么你都不知道, 可读性非常的差

我本人曾经就有在表单中多个地方使用mixin的场景, 因为每个表格显示的东西和数据结构都不太一样, 但是最后的操作增删改查和分页操作逻辑都一样, 所以必须使用mixin, 然后导致到后期代码比较难理解, 特别是交给同事的时候, 他们是很难一瞬间清晰的去理清楚这些逻辑的, 顺带一提对于react来说由于hoc和hook, renderprops的存在这些都不是问题,所以这算是vue的弊端了
vue的侵入性太强, 导致对typescript这类高阶技术的用法不够自然

基于上面的种种问题, vue推出了composition api的概念

composition api(组合式api)本质上就是vue抽离了一系列方法可以供我们自由引入组合使用, 这里抛出一个问题

在不改变vue模板语法的情况下, vue提供了一个新的函数书写在模板的script标签中, 该函数名叫做 setup

不讨论具体的文档, 我们直接用composition api来写一个小demo, 该case分别用vue2和vue3咱们都来一次对比一下, 来看看vue3到底是怎么处理之前我提到的三个问题的

需求: 计数器组件

vue2的写法如下

// Count.vue
<template><div class="composition-test">{{ count }}<button @click="inc">+</button></div>
</template><script>
export default {data() {return {count: 0}},methods: {inc() {this.count ++;}}
}
</script><style></style>

vue3使用composition api如下

// useCount.ts
import { ref } from 'vue'/*** 你可能不太明白ref是干嘛的, 他并不是vue2中的获取真实dom引用那么简单, * 如上方这样引入的ref叫做响应式api, 我们如果想实现vue的响应式功能, * 在vue2中我们直接写在data中就好了, 然后视图和数据就会产生映射, * 而在vue3的composition api中我们想要达到映射的效果必须手动调用vue给我们提供的响应式api才可以达到目的, * 这也很正常, 相较于那些魔法(你不知道怎么的就成为响应式了), 这种显示的转换让人更加的清晰和放心*/export default function useCount(defaultValue: number ):[any, Function]  {let count = ref(defaultValue || 0);function inc() {return count.value++;}return [count, inc]
}

// Count.vue
<template><div class="composition-test">{{ count }}<button @click="inc">+</button></div>
</template><script lang="ts">
/*eslint-disable*/
import { ref } from 'vue';
import useCount from '../hooks/useCount';
export default {setup( props, context ) {const [count, setCount] = useCount();return {count,setCount}}
}
</script><style></style>

将两组写法进行对比, 我们发现vue3好像可以单独将同一逻辑的状态和方法都抽离出去聚合成一个js文件（比如count和inc都是跟计数器相关的逻辑）, 这使得单个Vue文件如果代码量一多, 我们是不是可以做到更好的拆分成一个一个的js文件, 然后在vue组件里导入并且可以一目了然的知道我们当前用到了哪些逻辑, 根据逻辑去追溯相关的状态和方法, 代码逻辑一旦不分散, 就好维护的多

同时你要知道, composition api的写法帮助你把视图和逻辑完全分离, 这意味着你可以不用引入这个组件也可以用到count及其派生方法, 完全更加直观的实现了mixin的功能

当composition api你基本了解以后, 我们来写个伪代码来看看他恐怖的逻辑抽离性

vue2

...
<script>export default {data() {count: 0,goods: [],userInfo: {},isVip: false}methods: {fetchData() {...},clickHandler() {...}setCount() {...},setGoods() {...},setUserInfo() {...},setIsVip() {...}}}
</script>
...

Vue3

...
<script>import {onMounted} from 'vue';import useCount from '../hooks/useCount';import useGoods from '../hooks/useGoods';import useUserInfo from '../hooks/useUserInfo';import useIsVip from '../hooks/useIsVip';import fetchData from '../fetchData';export default {setup() {// 既然useCount是一个函数, 我们可以给他传递参数来更灵活处理数据const [count, setCount] = useCount(0);const [goods, setGoods] = useGoods([]);const [userInfo, setUserInfo] = useUserInfo({});const [isVip, setIsVip] = useIsVip(false);  onMounted() {fetchData();}// 除去上方强依赖状态的方法, 其他方法都可以写到最下面handlerClick = () {..}return {count, setCount,goods, setGoods,userInfo, setUserInfoisVip, setIsVip,handlerClick}},}
</script>
...

确实跟react越来越像了, 但是人确实要拥抱变化不是吗？而是人家也没有强制你用setup, 你想用options方式来定义data, methods都随便你, vue3只是提供了一个新的方式来书写代码, react的hook确实是大型项目中开发的优势, vue这么做我个人认为是非常nice的

vue3 - composition api相关推荐

Vue3 Composition API（一）——setup、reactive、ref、readonly
一.Options API的弊端在Vue2中,我们编写组件的方式是Options API: Options API的一大特点就是在对应的属性中编写对应的功能模块: 比如data定义数据.method ...
Vue3 Composition API（三）——生命周期钩子、Provide函数和 Inject函数、封装Hook案例、setup顶层编写方式
一.生命周期钩子我们前面说过 setup 可以用来替代 data . methods . computed .watch 等等这些选项,也可以替代生命周期钩子. 那么setup中如何使用生命周期函 ...
Vue3 Composition API（二）——computed、watchEffect、setup中使用ref
一.computed 在前面我们讲解过计算属性computed:当我们的某些属性是依赖其他状态时,我们可以使用计算属性来处理在前面的Options API中,我们是使用computed选项来完成的: ...
Vue3 Composition API如何替换Vue Mixins
想在你的Vue组件之间共享代码?如果你熟悉Vue 2 则可能知道使用mixin,但是新的Composition API 提供了更好的解决方案. 在本文中,我们将研究mixins的缺点,并了解Compo ...
vue3 Composition ApI总结
1.setup setup中不能用this,因为setup是在实例被完全初始化之前的执行的,而在实例被初始化之前是没有this的, 它不能调用实例上的方法,但是实例上的方法可以调用它 2.响应式处理r ...
Vue3.0 Composition API与Vue2.x 使用的 Options API
Vue3.0 所采用的 Composition API 与 Vue2.x 使用的 Options API 有什么不同开始之前 Composition API 可以说是Vue3最大的特点,那么为什么要 ...
js 表单设计器_准备迎接Vue3，使用Vue Composition API生成干净可扩展的表单
表单是前端开发中最棘手的部分之一,您可能会在其中发现很多混乱的代码. Vue.js 2之类的基于组件的框架在提高前端代码的可伸缩性方面做了很多工作,但是形式问题仍然存在. 在本教程中,我将向您展示新的 ...
谈谈vue3组合式api的优势
vue2: options API 配置式使用传统Options API(配置式API)中,新增或者修改一个需求,就需要分别在data,methods,computed里修改 . vue3: com ...
vue3学习笔记 Composition API setup
一.Composition API优势相对于vue2的option API Vue3的Composition API设计更有优势 Composition(组合式)Api 功能分组 Compositi ...
Vue3笔记_02setup与常用的Composition API(组合式API)
目录 setup setup的执行时机 [1]定义数据和方法 vue2中定义数据和方法 vue3中定义数据和方法语法示例-返回值为一个对象示例-返回值为一个渲染函数注意点数据-响应式数据 r ...

vue3 - composition api

需求: 计数器组件

vue3 - composition api相关推荐

最新文章

热门文章