vue3的逻辑复用抽离

介绍：

在vue中，为了实现项目可维护性与复用的功能，会将代码单独分离出一个功能组件，但是vue2和vue3分离方式并不相同

vue2：

vue2不支持逻辑的抽离，如果想实现抽离必须要将所有html代码与逻辑代码全部抽离，会增加父子组件的通信成本，如果数据过多维护起来会比较头疼

vue3：

vue3支持逻辑的抽离，可以更好的增加项目的可维护性，由于抽离的只是逻辑代码，所以没有增加通信成本，就算数据再多，维护起来也非常方便

而且vue3中的 setup 这个函数里面不应该出现大量的逻辑代码，不仅看起来不优美，而且维护起来也有些不方便

在vue3中，一般会将抽离的逻辑代码放进service的文件夹中，然后在父组件中导入使用

未分离写法：

  <ul class="goods-list">// 直接使用即可<li v-for="item in newData" :key="item.id"><RouterLink to="/"><img :src="item.picture" alt="" /><p class="name">{{ item.title }}</p><p class="desc">{{ item.alt }}</p></RouterLink></li></ul>
......// 导入 api 接口
import { findNew } from '@/api/home'
import { ref } from 'vue'
export default {setup () {// 获取的数据const newData = ref([])async function loadNewData () {const res = await findNew()newData.value = res.data.result}loadNewData()// 不要忘记 returnreturn {newData}

分离写法：

功能组件：src/views/Home/service/useHot.js

// 功能组件
import { ref } from 'vue'
// 导入 api 接口
import { findHot } from '@/api/home'
export function useHot () {const hotData = ref([])async function loadhotData () {const res = await findHot()hotData.value = res.data.result}loadhotData()// 注意要 returnreturn {hotData}
}

父组件：src/views/Home/index.vue

  <ul class="goods-list">// 直接使用即可<li v-for="item in hotData" :key="item.id"><RouterLink to="/"><img :src="item.picture" alt="" /><p class="name">{{ item.title }}</p><p class="desc">{{ item.alt }}</p></RouterLink></li></ul>
......// 先导入
import { useHot } from './service/useHot'
export default {setup () {// 固定写法const { hotData } = useHot()// 记得 returnreturn {hotData}}

vue3的逻辑复用抽离相关推荐

onmounted vue3_基于项目时间阐述vue3.0新型状态管理和逻辑复用方式
作者:Mingle 转发链接:https://mp.weixin.qq.com/s/iOq-eeyToDXJ6lvwnC12DQ 前言背景:2019年2月6号,React 发布「16.8.0」版 ...
感想3-对于业务逻辑复用、模板复用的一些思考(未完)
内容概览: 业务逻辑复用的目的基于现有场景,如何抽象出初步可复用逻辑复用业务逻辑会不会产生过度设计的问题业务逻辑复用的目的我对于业务逻辑复用的理解是忽略实际业务内容,从交互流程.交互逻辑的角度 ...
研究partner determination的逻辑能否抽出来，以API的形式被我们Odata service implementation code里调用？
研究partner determination的逻辑能否抽出来,以API的形式被我们Odata service implementation code里调用? 研究partner determinat ...
利用React 自定义Hooks实现业务逻辑复用实例
目录简介适用读者请求数据的例子需求定义 States 加载 Posts 加载 Todos 展示数据问题用自定义 Hooks 改造 useRequest 加载 Posts 和 Todos ...
vue核心面试题：Vue中相同逻辑如何抽离？
一.mixin 使用vue中的Vue.mixin,给组件每个生命周期.函数等混入一些公共的逻辑,另外混入对象的钩子将在组件自身钩子之前调用..mixin可以放在全局使用,也可以放在组件中使用. vue ...
Vue3 购物车逻辑
添加购物车了逻辑 state: {//购物车列表的数据shopcar: []}, mutations: {add(state, value) {// 声明一个变量flag=false 如果是这个变量的 ...
前端学习（2651）：逻辑复用方式
Vue3比Vue2有什么优势/区别
优势性能更好体积更小更好的ts支持更好的代码组织更好的逻辑抽离更多新功能 Vue3生命周期 Options API 生命周期 Composition API 生命周期 Options AP ...
Sciter 结合 PReact 实现组件公共逻辑抽离
Sciter 结合 PReact 实现组件公共逻辑抽离下面例子是获取鼠标移动位置,将这部分逻辑进行抽离一.使用高阶组件抽离公共逻辑 import { Component } from './pre ...
简明扼要聊聊 Vue3.0 的 Composition API 是啥东东！
对于没太了解 Vue3.0 的同学,在看到 Composition API 时,除了看起来会有一个"高大上"的感觉,可能更多的是有点懵逼,心中不免泛起一堆疑惑,这到底是何方神圣?干 ...

vue3的逻辑复用抽离

介绍：

未分离写法：

分离写法：

vue3的逻辑复用抽离相关推荐

最新文章

热门文章