0
点赞
收藏
分享

微信扫一扫

vue3 script setup 的代码的管理方式

options API

vue2 采用的是 options API,按照代码自己的类型进行分类管理和存放,数据放data里面,事件放xxx里面,这样呢,对于简单的组件,或者原子级别的组件,确实挺简洁和规范的。

但是组件再原子级别,也是需要一个大的组件进行整合,那么整合的组件里面的代码要如何管理呢?还有代码复用的问题。

composition API

vue3 提出了 composition API 的方式,其特点就是可以把vue的特性(reactive、ref、computer、生命周期的钩子等)拿出来放在单独的js文件里面,这样我们就可以按照业务需求来管理代码了,也就是可以借用面对对象的思路,或者MVC的control(控制)的思路来管理代码。

这个时候就需要一个思维方式的转换。如果没有转过来这个弯的话,就会觉得compositionAPI是非常麻烦的,代码会写乱,也就是传说中的“心智陷阱”。

script setup

这个大概是 composition API 的另一种表现形式吧,它做的更“过分”。
一般的情况,composition API 还可以分成属性部分、代码部分(setup)、其他属性,还可以兼容optionsAPI。

但是如果采用script setup 的话,那么真的是“全部”的代码都写在一起了。一点自带的区分都没有。

所以,如果用不好的话,代码会更乱。

尝试着写了一些代码体验了一下各种用法,先看一个例子吧。

  • 列表页面,分成四个组件:
<template>
  <div>
    <!--查询-->
    <find :moduleId="moduleId"/>
    <!--按钮-->
    <mybutton :moduleId="moduleId"/>

    <!--列表-->
    <elGridList
      v-bind="girdMeta"
      :data-list="dataList"
      :selection="dataListState.choice"
    />
    <!--分页-->
    <pager/>
  </div>
</template>
  • 引用一些需要的 js 函数。
<script>
import { defineProps, reactive, watch } from 'vue'
// 加载json
import loadJson from './control/loadjson.js'
// 状态
import VueDS from 'vue-data-state'
// 控制函数
import dataListManage from './control/data-list.js'

</script>

  • setup 部分
<script setup>
  // 查询组件
  import find from './find.vue'
  // 按钮组件
  import mybutton from './buttons.vue'
  // 列表控件
  import elGridList from '/ctrl/nf-el-grid/nf-el-grid-list.vue'
  // 分页组件
  import pager from './pager.vue'

  // 属性:模块ID
  const props = defineProps({
    moduleId:  [Number, String]
  })

  // 列表用的 meta
  const girdMeta = reactive({})
  // 依据模块ID,加载meta
  loadJson(props.moduleId, 'grid', girdMeta)

  // 列表的状态管理类
  const {
    regDataListState, // 注册列表状态
    dataList, // 数据列表
    setHotkey // 设置快捷键
  } = dataListManage(props.moduleId)

  // 注册列表状态
  const dataListState = regDataListState()
  // 设置快捷键
  setHotkey(dataListState)

</script>

为啥要分成两个 script 标签?

因为可以。
好吧,我是想把代码尽量分离出去,不想 setup 部分的代码太多,否则看着乱。
另一个原因,真的是因为可以这么做,否则我也就不得不都放在一起了。

这样写是否可以清晰一些?

这是管理后台的列表页面,里面有查询、数据列表、分页、按钮(通过按钮打开表单)。

setup 里面没有具体的实现代码,而是一些调用代码,把需要的数据传递进去。这个,自我感觉良好吧,目前还想不出来更好的优化方式。

最后,现在为啥没有个讨论环境呢???

举报

相关推荐

0 条评论