详解vue3.x页面功能拆分方式
更新时间：2022年05月31日 09:02:08 作者：XZ探长
本文主要介绍了vue3.x页面功能拆分方式，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
vue3.x相对比vue2.x主要的应用区别在于setup的使用，这个也是vue3.x的特色，所有的功能都得通过vue钩子引入使用，因为 setup 语法糖环境是不支持 this 的，这种开发方式有点回到原始的感觉，针对小项目还好，但如果页面模块功能复杂，如果都放到一个文件里堆叠，不仅会造成可读性差，而且时间长了难以维护，所以这就需要进行按功能拆分了，方式同vue2.x一样，一个是按照组件拆分，一个是混入处理，还有就是通过vuex或api分离功能
一、 组件
可以把一些新增/编辑、配置、日志及公共操作等写到组件里，然后引入使用，组件拆分是主要的减少页面代码量的解决方式，也是vue推荐的方式
PS：组件拆分的方向，一是公共组件，在项目其他模块也能使用到，二是页面级私有组件
二、混入
混入的场景主要是针对不需要模块且应用功能点过多，像这种可以通过混入的方式，把一些功能点拆分出来，引入使用，示例：
mixins/instuctLog.ts：
export default function() {
const a = 123
function foo() {
console.log('foo')
}
return {
a,
foo
}
}页面：
<script lang="ts" setup>
import instructLogMixin from './mixins/instructLog'
const { a, foo } = instructLogMixin()
</script>三、api
把页面模块中的一些api请求放到api目录里引入使用
四、vuex
按页面模块划分，把一些页面配置、枚举数据及数据改变多组件响应更新的逻辑放到vuex中处理
到此这篇关于详解vue3.x页面功能拆分方式的文章就介绍到这了,更多相关vue3.x页面拆分内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
vuex里面有四个map方法，他们分别可以针对不同的元素进行不同的代码生成，本文就来详细的介绍一下vuex中的四个map方法，具有一定的参考价值，感兴趣的可以了解一下2023-05-05
Vue3 defineExpose要在方法声明定义以后使用的教程
这篇文章主要介绍了Vue3 defineExpose要在方法声明定义以后使用的教程,本文结合实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-02-02
这篇文章主要介绍了优雅的将ElementUI表格变身成树形表格的方法步骤，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-04-04
这篇文章主要介绍了解析vue路由异步组件和懒加载案例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-06-06
这篇文章主要介绍了vue自定义移动端touch事件之点击、滑动、长按事件的实例代码,需要的朋友可以参考下2018-07-07
最近遇到一个需求,在 Vue3 的一个 H5 页面当中点击拖拽图标上下拖动 tab 子项,然后点击保存可以保存最新的 tab 项顺序,同事说可以用 vue-draggable-plus 这个库来实现拖拽,所以本文给大家介绍了如何使用vue-draggable-plus实现拖拽排序,需要的朋友可以参考下2024-01-01
vue 添加和编辑用同一个表单,el-form表单提交后清空表单数据操作
这篇文章主要介绍了vue 添加和编辑用同一个表单,el-form表单提交后清空表单数据操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-08-08
这篇文章主要介绍了vue + element ui实现播放器功能，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2021-04-04
Vue报错:TypeError:Cannot create property '
这篇文章主要介绍了Vue报错:TypeError:Cannot create property 'xxx' on string 'xxxx'问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-08-08
使用v-bind：class或者v-bind:style或者直接通过操作dom来对其样式进行更改；接下来通过本文给大家分享Vue.js中对css的操作（修改）具体方式，感兴趣的朋友跟随小编一起看看吧2018-10-10
最新评论