首页>>前端>>Vue->vue3.x页面功能拆分方式

vue3.x页面功能拆分方式

时间:2023-11-30 本站 点击:1

vue3.x相对比vue2.x主要的应用区别在于setup的使用,这个也是vue3.x的特色,所有的功能都得通过vue钩子引入使用,因为 setup 语法糖环境是不支持 this 的,这种开发方式有点回到原始的感觉,针对小项目还好,但如果页面模块功能复杂,如果都放到一个文件里堆叠,不仅会造成可读性差,而且时间长了难以维护,所以这就需要进行按功能拆分了,方式同vue2.x一样,一个是按照组件拆分,一个是混入处理,还有就是通过vuex或api分离功能

一、 组件

可以把一些新增/编辑、配置、日志及公共操作等写到组件里,然后引入使用,组件拆分是主要的减少页面代码量的解决方式,也是vue推荐的方式

[success] 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中处理

更多前端知识,请关注小程序,不定期有惊喜!

原文:https://juejin.cn/post/7099272228730044429


本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若转载,请注明出处:/Vue/3802.html