<基于vue通用表单解决方案的思考与分析
您的当前位置:首页正文

基于vue通用表单解决方案的思考与分析

2023-12-07 来源:六三科技网

前言

“那要怎么改?”,“那得改到什么时候?”,“什么时候才能支持这些功能?”。

再一次听到了这样的话,我沉默了。到底要怎样改,这也是我所思考的,最近一直忙于其他,已经有一段时间没有处理 issue 了,趁着调休,我也要好好思考下。

半年前,接触了 el-form-renderer  ,瞬间感觉减轻了大部分表单编写的工作,一个简单的JSON配置,立刻展现出一个功能完好的表单页面。然而,随着使用的频率增加,却慢慢开始暴露各种不足,该组件的作者也不再单独对该组件进行维护了。由于项目表单场景的需要,我们 fork 了一个版本,但后来发现我们更想要的是一套属于我们自己的表单渲染规则,于是在我们的 Github 组织下建立了属于我们的代码仓库 @femessage/el-form-renderer  (以下都称为 el-form-renderer ),并开始了我们自己维护之路。

3W

el-form-renderer 是什么?为什么?怎么样?通过3W分析来看看我们做了什么。

WHAT?

基于 element-ui 封装的 表单渲染器 ,但不仅仅是 element-ui ,甚至不仅仅是表单。

WHY?

这里的为什么有两层,第一层是为什么需要表单渲染器?第二次是什么是 el-form-renderer ?

借用《NoForm - 一个更好的表单解决方案》中的一句话:

做 B类业务 的同学应该深有感触,我们日常需要面对大量操作类或者表单类的场景,因此只要是能从这些重复的CRUD解放出来的方案,就是最好的方案

我们的目的也很简单,让天下没有难做的表单。

至于为什么是 el-form-renderer ,理由很简单,我们正在让没有难做的表单变成现实,至少在目前数十个项目中,解决了70%以上的表单方面的需求。

HOW?

如上文所说,如下图所见:

一个好的表单需要解决的问题:

•表单的取值、赋值、校验

•表单联动

•自定义表单项

•表单项的事件、属性、slot

•对用户足够友好

所谓”下层基础决定上层建筑“,我们没有执着于从0开始,而是“让专业的人做专业的事”。基础组件, element-ui 足够专业,也正因为它的专业性,才让 el-form-renderer 最初的版本有了用武之地。然而目前远远不够的是,我们没有很好的处理表单联动和表单项的事件、slot的问题,这也正是我所要思考的地方。

基础用法

先来看看目前我们的实现(更多请参考 文档 )

<template> <el-form-renderer label-width="100px" :content="content" /></template><script>import UploadToAli from '@femessage/upload-to-ali'export default { data () { return { content: [ { $id: 'avatar', label: '头像', component: UploadToAli }, { $id: 'username', label: '用户名', $type: 'input', $el: { placeholder: '请输入用户名' } } ] } }}</script> 

效果如下:

没有复杂的逻辑,只需进行简单配置 JSON 的方式就可实现常用表单功能

解决方案

因为不是从0开始,所以一开始作者的设计只服务于 element-ui 已有的组件。

之前的方案解决了什么

• 表单的取值 getValue ,赋值 updateValue

• 完整继承了 element 的 form 表单属性,包括校验

• 表单联动 $enableWhen

大部分简单的场景已经覆盖,但是局限于 element-ui 组件,没有处理好动态组件选项(如下拉选项)的问题,无法批量赋值,必须手动去空格...

现在的方案优化了什么

• 支持自定义组件,摆脱对 element-ui 的完全依赖(仍然依赖它的 el-form , el-form-item )

• 通过 setOptions 方法,动态的处理组件选项问题

• 添加批量更新数据方法 updateForm ,并添加 trim 来处理值

• 为了方便在其他组件中的集成和设置/获取值的需求,还添加了 inputFormat 、 outputFormat ( issue )

它本已完成了一个华丽的蜕变,甚至成为了我司组件的桥梁地位,然而,面对千奇百怪的需求,它确实还不够。

存在的问题

 

目前的7个 issue ,大致可以分为一下几类:

•表单联动

•自定义slot位置

•自定义事件

•其他优化

需求告诉我们,它还有很大的进步空间。

思考

回到开始的那些话,面对存在的问题,我们要怎么处理好它。

今天收到一个 PR ,来自公司的一位同事,处理的是 el-form-renderer 中 slot 位置的问题,默认只有 default ,显示在最后,有需求希望能显示在指定某一个表单项的前/后。该PR以表单项的 $id 为具名插槽,渲染该插槽内容到对应 $id 表单项的上方。

一个很好的思路,但是也让我思考了很多,或许它还是没有达到我的要求。

不妨再思考一个场景,表单的第一项和第三项渲染的上方需要渲染两个内容相同的 slot ,按上面的思路,我们应该写两个template,并分别定义他们要渲染到的位置的的 $id 。

上面的问题并不难解决,定义一个字符串匹配规则,或者在某一项的配置项中添加要渲染的slot,名字匹配则渲染,以达到复用的目的。

问题似乎是解决了, issue 可以关闭了,但是我们回过头来想想,我们为什么要自定义 slot 位置?

因为有issue,有用户有这个需求。

那他为什么会有这个需求?

我们不得而知,场景很多,但我们可以大胆的猜测,缺乏一个组件可以满足他的渲染需求,他需要 slot 来自定义展示内容。

所以,似乎我们需要的并不是 slot ,而是我们缺乏了那些组件,或者我们需要一个更通用的渲染方式来渲染我们的内容。很容易,我们想到了 render ,如果我们返回的是一个 render ,那似乎大部分 issue 可以关闭了。然而事实是,我们从开始就不希望出现 render ,因为它一点都不友好,甚至对部分人来说,它不简单,这不是我们的目的。 我们的目的是为了更好用,更好理解,就向我们的文档一样,它很简单,但很实用 。

许多PR,或者打算提PR的人忽略了一个问题,我们的组件没有支持事件,它很难实现?不,至少已经实现了绑定属性,绑定事件并不会多难,但是没有去支持它,因为我们 思考的是它的必要性 ,表单项是否真的需要绑定事件。

从一开始就说过,不只是 element-ui ,甚至不只是表单。我们的目的不纯粹,我们寻找的是通用的方案,如果支持了事件,表单项与业务代码的关联性绝对会更强,这不是我们希望看到的,至少在我们目前可以看得到的通过可视化的界面生成表单的前提下,我们不希望出现自定义事件的需求,它让我们通过可视化的界面生成表单变得不那么通用了。

那么,在目前的情况下,真的没办法解决这些问题了吗?答案是否定的。

已知我们可以通过自定义组件的方式拓展我们的表单项,那么我们也可以通过自定义组件解决我们遇到的 issue

import CustomComponent from './custom-component'export default { data () { return { content: [ { label: '用户名', component: CustomComponent, $id: 'username', $el: { placeholder: '请设置您的登陆用户名' } } ] } }}

或者在一些更简单的场景

import UploadToAli from './UploadToAli'export default { data () { return { content: [ { $id: 'avatar', label: '图片', component: { data () { return { imgUrl: '' } }, render: function (h) { return h(UploadToAli, { props: { value: this.imgUrl }, on: { input: (val) => { this.imgUrl = val this.$emit('input', val) } } }, [ h('p', { slot: 'spinner' }, '开始上传中...') ]) } } } ] } }}

如果从这个层面来说,我们早已经解决问题了,但是那些 issue 依然在那儿。还记得之前提过的对用户足够友好和 render 的事吗,目前来看,它能解决问题,但不是一个好的方案,解决问题并没有那么难,难的是解决了还能足够友好,足够简单,这也是我们一直在努力的方向。

结语

不知不觉写了好长...

通过配置的方式实现一个表单似乎是一个不错的思路,目前已经在公司中后台有过数十个页面的尝试。然而业务场景千变万化,我们没有办法解决100%的需求,但希望我们的方式为配置性表单能带来更多的思考。

抛砖引玉,最后贴一次仓库地址: https://github.com/FEMessage/el-form-renderer ,希望更多的方案和实现浮出水面,解放生产力。再次感谢 原作者

总结

小编还为您整理了以下内容,可能对您也有帮助:

基于 Vue3 和 TypeScript 项目大量实践后的思考

Vue3出来已经有一段时间了,在团队中,也进行了大量的业务实践,也有了一些自己的思考。

总的来说,Vue3无论是在底层的原理上,还是在业务的实际开发中,都有了长足的进步。

使用 proxy 代替之前的 Object.defineProperty 的API,性能更加优异,也解决了之前vue在处理对象、数组上的缺陷;在diff算法上,使用了静态标记的方式,大大提升了Vue的执行效率。

在使用的层面,我们从options Api,变成了composition Api,慢慢的在实际的业务中,我们抛弃了原本的data、methods、computed那种隔离式的写法。compositon Api,它更加聚焦,它讲究的是相关业务的聚合性。

完全良好的支持了TypeScript,类型校验也成为了以后Vue3进行大型项目开发的质量保障,同时这也是面向了趋势 -- 前端的未来就是TypeScript!

compositon Api的本质,体现在代码里面,也就是一个setup函数,在这个setup函数中,返回的数据,会用到该组件的模板中。return的这个对象,一定程度上,代表了之前vue2中的data属性。

这时候,对于大多数初学者来说,可能存在的疑惑就是,那么我能不能定义options Api的写法,比如data、computed、watch、methods等等。

这里我需要明确的是,Vue3是完全兼容Vue2的这种options Api的写法,但是从理念上来说,更加推荐setup的方式,来写我们的组件。

原因如下:Vue3的存在,本身是为了解决Vue2的问题的,Vue2的问题就是在于,聚合性不足,会导致代码越来越臃肿!setup的方式,能够让data、方法逻辑、依赖关系等聚合在一块,更方便维护。

也就是说,以后我们尽量不要写单独的data、computed、watch、methods等等,不是Vue3不支持,而是和Vue3的理念违背。

components属性,也就是一个组件的子组件,这个配置在Vue2和3的差异不大,Vue2怎么用,Vue3依然那么用。

在功能方面,ref 和 reactive,都是可以实现响应式数据!

在语法层面,两个有差异。ref定义的响应式数据需要用[data].value的方式进行更改数据;reactive定义的数据需要[data].[prpoerty]的方式更改数据。

但是在应用的层面,还是有差异的,通常来说:单个的普通类型的数据,我们使用ref来定义响应式。表单场景中,描述一个表单的key:value这种对象的场景,使用reactive;在一些场景下,某一个模块的一组数据,通常也使用reactive的方式,定义数据。

那么,对象是不是非要使用reactive来定义呢?其实不是的,都可以,根据自己的业务场景,具体问题具体分析!ref他强调的是一个数据的value的更改,reactive强调的是定义的对象的某一个属性的更改。

周期函数,在Vue3中,是被单独使用的,使用方式如下:

在Vue2中,其实可以直接通过this.$store进行获取,但是在Vue3中,其实没有this这个概念,使用方式如下:

在Vue2中,是通过this.$router的方式,进行路由的函数式编程,但是Vue3中,是这么使用的:

merchant.ts

这一部分内容,准确的来说,是TS的内容,不过它与Vue3项目开发,息息相关,所以真的想用Vue3,我们还是得了解TS的使用。

不过这一部分,我不会介绍TS的基础语法,主要是在业务场景中,如何组织TS。

在一个常见的接口请求中,我们一般使用TS这么定义一个数据请求,数据请求的req类型,数据请求的res类型。

Vue多标签页应用解决方案

应用系统中需要运用到多标签页,跟浏览器一样的效果,在新打开页面后,动态追加一个页签,点击页签可以切换系统主页面区域的内容,且保持内容不刷新,如果关闭页签再通过菜单打开,重新加载。jQuery年代的解决方案就是ifream,但是在Vue.js的单页面应用中,都是组件化开发了,实现多标签页解决的问题就聚焦在关于组件实例的缓存和销毁,下边讲述两种实现多标签页系统的技术实现方案。

Vue Router是官方的路由管理器,跟Vue.js深度集成,确实很强,更多的功能不意义阐述,详情请参考 Vue Router 官方文档

当我们跳转一个新的路由时,可能是点击菜单,也可能是点击发生跳转,这时候路由会发生切换,我们都希望打开一个新的页签,并且这个页签并处于激活状态,当打开多个时,可以切换页签的激活状态,同时路由组件区域(页面内容)发生变化,始终展示激活页签对应的内容。

一个组件展示所有的标签页,并标识出来哪个是激活状态,标签页数据需要在菜单等地方实现追加,我们优先选择数据存在Vuex中,由标签页组件实现切换激活标签和删除标签,添加标签页也可以在该组件内实现,需要对路由进行监听,路由发生调用Vuex中的增加函数,函数对路由数据进行过滤,这样就可以实现路由变化时,标签页数据的变化。

在<router-view/> 外层包裹 <keep-alive>具体原理参考 在动态组件上使用 keep-alive

这个时候,在你切换渲染不同路由的时候,确实好使,组件的状态数据、表单填写的内容等也会被缓存,好像这么简单都直接解决了,当然不可能,这么简单就没必要写这篇文章。

当你更改路由参数的时候,你会发现参数变化的时候,不太好使了,会把之前缓存的这个组件销毁重新加载, 一个组件只能被缓存一个 ,我们希望的肯定是参数不一样时,应该分开都缓存,比如一些明细页面,我们需要看多个客户、多个工单,不应该每次切换都是在重新加载。

关闭页签时,我们更换路由,实现跳转,当再次访问这个路由时,组件未重新加载,这个就不符合正常的使用习惯,关闭页签就应该啥都没了,所以缓存啥的应该都没了。

组件有没有缓存可以通过DevTools调试查看

这样看起来,好像才是真的解决了所有的问题,但是还是有bug,有瑕疵, 解决方案2 中提到的一大堆过程的前提是 destroy ,只有组件进入 destroy 才满足 解决方案2 的方法,但是如果页签没有激活,keep-alive中就已经是停用了这个组件,关闭页签时,路由是没有变化的,keep-alive对各个组件也并没有发生启用和停用,只是改变了Vuex中 visitedViews 的数据,所以关键问题是只要 visitedViews 发生变化,需要把减少的那个组件给卸载掉。

至此,卸载这个活儿终于完成了,无论是怎么关闭页签,都可以完成组件的卸载,切换页签不卸载。感觉完美无瑕,可现实总是那么残酷,关闭页签后,再打开,切换页签时,这个组件 居然刷新了 ,明明关闭前,切换是不刷新的,关闭再打开后,就会刷新了,难道不会缓存了?看一下DevTools调试,懵了。。。

<keep-alive> 添加 include ,Vuex获取当前打开页签的组件名(如:visitedName),include=visitedName;针对传参数的页面,添加 watch ,监听Vuex中标签页的变化,当有变化时判断是否包含当前组件,没有时卸载当前组件,当组件不需要传参时可以不添加watch,include不缓存时组件将会被卸载。

注意: 页面组件必须写name,声明组件名称

动态表单的设计与实现(基于Vue ElementUI)

在xxx信息管理这种业务场景中我认为最常见的操作就是对字段的处理(例如查询、编辑等区域的表单、图表的列名、表格的列名),而字段恰恰是最为 '规范的',它有自己的名称、类型

用对象或者说map这种结构而不用数组是为了可以精准对某个字段进行设置 而数组需要先遍历查找到这个字段再进行设置

可通过 formData 这个外部传入的对象来对数据进行统一的设置与读取

例如有的字段可以查询但不能编辑,我们可以引入一个场景的概念就可以轻易解决这个问题

名称既可以显示又可以编辑与查询而性别只能编辑与查询但不能显示,useScene是使用场景如果字段不支持这个场景那么字段不予显示(可自行实现禁用场景)

重点就在于m_canUse的实现,它用eval取巧的实现了一个场景逻辑字符串转布尔值的一个操作

看到这里可能有的朋友会很不解,为什么我要构造一个如此复杂的useScene,直接定义 canUpdate canQuery 这种布尔值变量来指定场景不就行了吗?

实际上需求是非常复杂多变的,场景可以说是无限的甚至是相互交织关联的、我们可能会根据用户的操作动态显示字段的显示隐藏,例如提交后显示提交人、提交时间等字段、撤销了就不予显示

我们可以在用户做某些操作时来动态设置sceneMap的状态来达到控制表单的显示、隐藏、禁用,当状态越复杂时你就越能感觉到它的威力

可以在动态表单内部监听表单的事件(可查阅相关UI库文档)、当表单事件触发时对外传递事件(携带当前操作的字段信息、$event信息或arguments)

有时我们想在任意两个字段之间插入一个非通用的ui组件,我们可以通过具名插槽来实现

这是一个动态表单的简易实现,需要大家结合自身的业务场景去填充各种各样的表单和相关的参数、事件

关于jQuery和Vue两者技术架构的比较分析报告

在过去的前端开发中,jQuery几乎会出现在任何大大小小的项目中,不论是类MS,还是电商,还是各类门户网站,都少不了jQuery的身影,可以说在之前的前端开发中,jQuery更是一种“标准”。

2008年,V8 引擎随 Chrome 浏览器横空出世,JavaScript 这门通用的 Web 脚本语言的执行效率得到质的提升。 V8 引擎的出现,注定是 JavaScript 发展史上一个光辉的里程碑。它的出现,让当时研究高性能服务器开发、长时间一筹莫展的 Ryan Dahl 有了新的、合适的选择,不久,在2009年的柏林的 JSConf 大会上,基于 JavaScript 的服务端项目 Node.js 正式对外发布。Node.js 的发布,不仅为开发者带来了一个高性能的服务器,还很大程度上推动了前端的工程化,带来了前端的大繁荣。与此同时,因为 JavaScript 执行效率的巨大提升,越来越多的业务逻辑开始在浏览器端实现,前端逻辑越来越重,前端架构随之提上日程。于是,我们谈论的主角,MVVM 模式,走进了 Web 前端的架构设计中。

MVVM 模式,顾名思义即 Model-View-ViewModel 模式。它萌芽于2005年微软推出的基于 Windows 的用户界面框架 WPF ,前端最早的 MVVM 框架 knockout在2010年发布。当前最流行了MVVM 框架 Vue 的2.0版本在2016年5月发布。

一句话总结 Web 前端 MVVM:操作数据,就是操作视图,就是操作 DOM(所以无须操作 DOM )。

无须操作 DOM !借助 MVVM 框架,开发者只需完成包含 声明绑定的视图模板,编写 ViewModel 中业务数据变更逻辑,View 层则完全实现了自动化。这将极大的降低前端应用的操作复杂度、极大提升应用的开发效率。MVVM 最标志性的特性就是 数据绑定,MVVM 的核心理念就是通过 声明式的数据绑定来实现 View 层和其他层的分离。完全解耦 View 层这种理念,也使得 Web 前端的单元测试用例编写变得更容易。

MVVM,说到底还是一种分层架构。它的分层如下:

Model 层,对应数据层的域模型,它主要做 域模型的同步 。通过 Ajax/fetch 等 API 完成客户端和服务端业务 Model 的同步。在层间关系里,它主要用于抽象出 ViewModel 中视图的 Model。

View 层,作为视图模板存在,在 MVVM 里,整个 View 是一个动态模板。除了定义结构、布局外,它展示的是 ViewModel 层的数据和状态。View 层不负责处理状态,View 层做的是 数据绑定的声明指令的声明事件绑定的声明

ViewModel 层把 View 需要的层数据暴露,并对 View 层的 数据绑定声明指令声明事件绑定声明负责,也就是处理 View 层的具体业务逻辑。ViewModel 底层会做好绑定属性的监听。当 ViewModel 中数据变化,View 层会得到更新;而当 View 中声明了数据的双向绑定(通常是表单元素),框架也会监听 View 层(表单)值的变化。一旦值变化,View 层绑定的 ViewModel 中的数据也会得到自动更新。

如图所示,在前端 MVVM 框架中,往往没有清晰、独立的 Model 层。在实际业务开发中,我们通常按 Web Component规范来组件化的开发应用,Model 层的域模型往往分散在在一个或几个 Component 的 ViewModel 层,而 ViewModel 层也会引入一些 View 层相关的中间状态,目的就是为了更好的为 View 层服务。

开发者在 View 层的视图模板中声明 数据绑定事件绑定后,在 ViewModel 中进行业务逻辑的 数据处理。事件触发后,ViewModel 中 数据变更, View 层自动更新。因为 MVVM 框架的引入,开发者只需关注业务逻辑、完成数据抽象、聚焦数据,MVVM 的视图引擎会帮你搞定 View。因为数据驱动,一切变得更加简单。

不可置否,MVVM 框架极大的提升了应用的开发效率。It's amazing!But,MVVM 框架到底做了什么?

视图引擎:我是视图引擎,我为 View 层作为视图模板提供强力支持,开发者,你们不需要操作 DOM ,丢给我来做!

数据存取器:我是数据存取器,我可以通过 Object.defineProperty() API 轻松定义,或通过自行封装存取函数的方式曲线完成。我的内部往往封装了 发布/订阅模式,以此来完成对数据的监听、数据变更时通知更新。我是 数据绑定实现的基础。

组件机制:我是组件机制。有追求的开发者往往希望按照面向未来的组件标准 - Web Components的方式开发,我是为了满足你的追求而生。MVVM 框架提供组件的定义、继承、生命周期、组件间通信机制,为开发者面向未来开发点亮明灯。

MVVM架构型模式的兴起,实现了前后端真正的职责分离,在提高开发效率的同时,也存在一些不足之处。

可以说前后端分离随着趋势已经形成一种标准,MVVM设计模式的开发框架(Vue)适用任何场景的开发(低版本IE除外)。

jQuery是直接来操作DOM的,凭借简化后的API直接和DOM对话(优异的兼容性);
Vue是直接来操作数据的,拿数据说话。

关于jQuery和Vue两者技术架构的比较分析报告

在过去的前端开发中,jQuery几乎会出现在任何大大小小的项目中,不论是类MS,还是电商,还是各类门户网站,都少不了jQuery的身影,可以说在之前的前端开发中,jQuery更是一种“标准”。

2008年,V8 引擎随 Chrome 浏览器横空出世,JavaScript 这门通用的 Web 脚本语言的执行效率得到质的提升。 V8 引擎的出现,注定是 JavaScript 发展史上一个光辉的里程碑。它的出现,让当时研究高性能服务器开发、长时间一筹莫展的 Ryan Dahl 有了新的、合适的选择,不久,在2009年的柏林的 JSConf 大会上,基于 JavaScript 的服务端项目 Node.js 正式对外发布。Node.js 的发布,不仅为开发者带来了一个高性能的服务器,还很大程度上推动了前端的工程化,带来了前端的大繁荣。与此同时,因为 JavaScript 执行效率的巨大提升,越来越多的业务逻辑开始在浏览器端实现,前端逻辑越来越重,前端架构随之提上日程。于是,我们谈论的主角,MVVM 模式,走进了 Web 前端的架构设计中。

MVVM 模式,顾名思义即 Model-View-ViewModel 模式。它萌芽于2005年微软推出的基于 Windows 的用户界面框架 WPF ,前端最早的 MVVM 框架 knockout在2010年发布。当前最流行了MVVM 框架 Vue 的2.0版本在2016年5月发布。

一句话总结 Web 前端 MVVM:操作数据,就是操作视图,就是操作 DOM(所以无须操作 DOM )。

无须操作 DOM !借助 MVVM 框架,开发者只需完成包含 声明绑定的视图模板,编写 ViewModel 中业务数据变更逻辑,View 层则完全实现了自动化。这将极大的降低前端应用的操作复杂度、极大提升应用的开发效率。MVVM 最标志性的特性就是 数据绑定,MVVM 的核心理念就是通过 声明式的数据绑定来实现 View 层和其他层的分离。完全解耦 View 层这种理念,也使得 Web 前端的单元测试用例编写变得更容易。

MVVM,说到底还是一种分层架构。它的分层如下:

Model 层,对应数据层的域模型,它主要做 域模型的同步 。通过 Ajax/fetch 等 API 完成客户端和服务端业务 Model 的同步。在层间关系里,它主要用于抽象出 ViewModel 中视图的 Model。

View 层,作为视图模板存在,在 MVVM 里,整个 View 是一个动态模板。除了定义结构、布局外,它展示的是 ViewModel 层的数据和状态。View 层不负责处理状态,View 层做的是 数据绑定的声明指令的声明事件绑定的声明

ViewModel 层把 View 需要的层数据暴露,并对 View 层的 数据绑定声明指令声明事件绑定声明负责,也就是处理 View 层的具体业务逻辑。ViewModel 底层会做好绑定属性的监听。当 ViewModel 中数据变化,View 层会得到更新;而当 View 中声明了数据的双向绑定(通常是表单元素),框架也会监听 View 层(表单)值的变化。一旦值变化,View 层绑定的 ViewModel 中的数据也会得到自动更新。

如图所示,在前端 MVVM 框架中,往往没有清晰、独立的 Model 层。在实际业务开发中,我们通常按 Web Component规范来组件化的开发应用,Model 层的域模型往往分散在在一个或几个 Component 的 ViewModel 层,而 ViewModel 层也会引入一些 View 层相关的中间状态,目的就是为了更好的为 View 层服务。

开发者在 View 层的视图模板中声明 数据绑定事件绑定后,在 ViewModel 中进行业务逻辑的 数据处理。事件触发后,ViewModel 中 数据变更, View 层自动更新。因为 MVVM 框架的引入,开发者只需关注业务逻辑、完成数据抽象、聚焦数据,MVVM 的视图引擎会帮你搞定 View。因为数据驱动,一切变得更加简单。

不可置否,MVVM 框架极大的提升了应用的开发效率。It's amazing!But,MVVM 框架到底做了什么?

视图引擎:我是视图引擎,我为 View 层作为视图模板提供强力支持,开发者,你们不需要操作 DOM ,丢给我来做!

数据存取器:我是数据存取器,我可以通过 Object.defineProperty() API 轻松定义,或通过自行封装存取函数的方式曲线完成。我的内部往往封装了 发布/订阅模式,以此来完成对数据的监听、数据变更时通知更新。我是 数据绑定实现的基础。

组件机制:我是组件机制。有追求的开发者往往希望按照面向未来的组件标准 - Web Components的方式开发,我是为了满足你的追求而生。MVVM 框架提供组件的定义、继承、生命周期、组件间通信机制,为开发者面向未来开发点亮明灯。

MVVM架构型模式的兴起,实现了前后端真正的职责分离,在提高开发效率的同时,也存在一些不足之处。

可以说前后端分离随着趋势已经形成一种标准,MVVM设计模式的开发框架(Vue)适用任何场景的开发(低版本IE除外)。

jQuery是直接来操作DOM的,凭借简化后的API直接和DOM对话(优异的兼容性);
Vue是直接来操作数据的,拿数据说话。

vue3源码分析-实现props,emit,事件处理等


>

本期来实现, setup里面使用props,父子组件通信props和emit等 ,所有的源码请查看

在render函数中, 可以通过this,来访问setup返回的内容,还可以访问this.$el等

由于是测试dom,jest需要提前注入下面的内容,让document里面有app节点,下面测试用例类似在html中定义一个app节点哦

本功能的测试用例正式开始

上面的测试用例

解决这两个需求:

针对上面的分析,需要在setupStatefulComponent中来创建proxy并且绑定到instance当中,并且setup的执行结果如果是对象,也已经存在instance中了,可以通过instance.setupState来进行获取

通过上面的操作,从render中this.xxx获取setup返回对象的内容就ok了,接下来处理el

需要在mountElement中,创建节点的时候,在vnode中绑定下,el,并且在setupStatefulComponent 中的代理对象中判断当前的key

看似没有问题吧,但是实际上是有问题的,请仔细思考一下, mountElement是不是比setupStatefulComponent 后执行,setupStatefulComponent执行的时候,vnode.el不存在,后续mountelement的时候,vnode就会有值,那么上面的测试用例肯定是报错的,$el为null

解决这个问题的关键,mountElement的加载顺序是 render patch mountElement,并且render函数返回的subtree是一个vnode,改vnode中上面是mount的时候,已经赋值好了el,所以在patch后执行下操作

在vue中,可以使用onEvent来写事件,那么这个功能是怎么实现的呢,咋们一起来看看

在本功能的测试用例中,可以分析以下内容:

解决问题:

这个功能比较简单,在处理prop中做个判断, 属性是否满足 /^on[A-Z]/i这个格式,如果是这个格式,则进行事件注册,但是vue3会做事件缓存,这个是怎么做到?

缓存也好实现,在传入当前的el中增加一个属性 el._vei || (el._vei = {}) 存在这里,则直接使用,不能存在则创建并且存入缓存

事件处理就ok啦

父子组件通信,在vue中是非常常见的,这里主要实现props与emit

根据上面的测试用例,分析props的以下内容:

解决问题:

问题1: 想要在子组件的setup函数中第一个参数, 使用props,那么在setup函数调用的时候,把当前组件的props传入到setup函数中即可 问题2: render中this想要问题,则在上面的那个代理中,在 加入一个判断,key是否在当前instance的props中 问题3: 修改报错,那就是只能读,可以使用以前实现的 api shallowReadonly来包裹一下 既可

做完之后,可以发现咋们的测试用例是运行没有毛病的

上面实现了props,那么emit也是少不了的,那么接下来就来实现下emit

根据上面的测试用例,可以分析出:

解决办法: 问题1: emit 是setup的第二个参数, 那么可以在setup函数调用的时候,传入第二个参数 问题2: 关于emit的第一个参数, 可以做条件判断,把xxx-xxx的形式转成xxxXxx的形式,然后加入on,最后在props中取找,存在则调用,不存在则不调用 问题3:emit的第二个参数, 则使用剩余参数即可

到此就*成功啦!

vue3源码分析-实现props,emit,事件处理等


>

本期来实现, setup里面使用props,父子组件通信props和emit等 ,所有的源码请查看

在render函数中, 可以通过this,来访问setup返回的内容,还可以访问this.$el等

由于是测试dom,jest需要提前注入下面的内容,让document里面有app节点,下面测试用例类似在html中定义一个app节点哦

本功能的测试用例正式开始

上面的测试用例

解决这两个需求:

针对上面的分析,需要在setupStatefulComponent中来创建proxy并且绑定到instance当中,并且setup的执行结果如果是对象,也已经存在instance中了,可以通过instance.setupState来进行获取

通过上面的操作,从render中this.xxx获取setup返回对象的内容就ok了,接下来处理el

需要在mountElement中,创建节点的时候,在vnode中绑定下,el,并且在setupStatefulComponent 中的代理对象中判断当前的key

看似没有问题吧,但是实际上是有问题的,请仔细思考一下, mountElement是不是比setupStatefulComponent 后执行,setupStatefulComponent执行的时候,vnode.el不存在,后续mountelement的时候,vnode就会有值,那么上面的测试用例肯定是报错的,$el为null

解决这个问题的关键,mountElement的加载顺序是 render patch mountElement,并且render函数返回的subtree是一个vnode,改vnode中上面是mount的时候,已经赋值好了el,所以在patch后执行下操作

在vue中,可以使用onEvent来写事件,那么这个功能是怎么实现的呢,咋们一起来看看

在本功能的测试用例中,可以分析以下内容:

解决问题:

这个功能比较简单,在处理prop中做个判断, 属性是否满足 /^on[A-Z]/i这个格式,如果是这个格式,则进行事件注册,但是vue3会做事件缓存,这个是怎么做到?

缓存也好实现,在传入当前的el中增加一个属性 el._vei || (el._vei = {}) 存在这里,则直接使用,不能存在则创建并且存入缓存

事件处理就ok啦

父子组件通信,在vue中是非常常见的,这里主要实现props与emit

根据上面的测试用例,分析props的以下内容:

解决问题:

问题1: 想要在子组件的setup函数中第一个参数, 使用props,那么在setup函数调用的时候,把当前组件的props传入到setup函数中即可 问题2: render中this想要问题,则在上面的那个代理中,在 加入一个判断,key是否在当前instance的props中 问题3: 修改报错,那就是只能读,可以使用以前实现的 api shallowReadonly来包裹一下 既可

做完之后,可以发现咋们的测试用例是运行没有毛病的

上面实现了props,那么emit也是少不了的,那么接下来就来实现下emit

根据上面的测试用例,可以分析出:

解决办法: 问题1: emit 是setup的第二个参数, 那么可以在setup函数调用的时候,传入第二个参数 问题2: 关于emit的第一个参数, 可以做条件判断,把xxx-xxx的形式转成xxxXxx的形式,然后加入on,最后在props中取找,存在则调用,不存在则不调用 问题3:emit的第二个参数, 则使用剩余参数即可

到此就*成功啦!

jsonschema-form-vue基于JSON Schema表单自动生成方案

作为一名前端开发,「表单开发」是我们的家常便饭,一般我们需要做以下重复性工作:

同时,后台服务也需要编写校验规则,随着业务变动或者沟通不及时,前后端校验规则可能会存在不一致问题。所以「前后端共用校验规则逻辑」也应该纳入考虑。

综上,我们希望能减少重复性工作: 通过配置自动生成表单模板,同时这个配置最好还能描述表单校验相关 ( 因为表单元素部分属性如min、max、required、pattern这些都会控制表单输入,保障校验 )

先通过一个简单的例子看下效果: Demo 、 Code

渲染结果

更多Demo

文档

然后,现在表单经常会通过JSON异步提交到服务端,所以技术选型如下:

最后,JSONSchema在表单描述上并非无所不能:

所以,我们参考了 angular schema form ,增加了 Form Definition 描述,用来补充扩展JSON Schema,它可以:

即使没定义Form Definition,内部在表单渲染部分,也会将JSONSchema转换成Form Definition,因为其结构更适合循环表单渲染

所以,整体架构如图

目前已经提供了 基础组件11个 (包含图片上传、编辑器等扩展组件)和 容器组件3个 ,未来还会根据情况继续增加,同时也支持自己扩展组件和规则。

Vue中element-ui的resetFields()方法重置表单无效问题及解决办法

1.当新增和编辑都同用一个弹窗实现的时候,此时无法达到清除表单的效果。
查看 官网地址 介绍,注意:resetField()方法不是将表单重置为空,而是重置为初始值
而这个初始值是如何定义的呢?
我尝试了一下,初始值的定义应该为第一次打开弹窗的值。换句话说,如果是打开新建的表单,那么初始值就都为空,如果打开是编辑的弹窗表单,那么初始值就为编辑的。(具体没有看源码深层次确定)

2.表单项el-form-item没有添加prop属性,prop属性需要与input框绑定的属性一致

针对一
我手动清空了一下formData的数据。
注意点,清空不可以直接等于{}。我采取的方法为写一个公共的方法,递归将其属性都赋值为null 或者 ""。如下方式不可取

那何时清空这个数据最合理呢?
我选择在弹窗关闭的事件回调中清空。原因为点击取消关闭弹框要清空,点击确定完成操作要清空,点击关闭要关闭并清空,点击空白也是关闭弹窗并清空。所以选择弹框的closed回调中清空数据。

针对二
检查属性对应的。确保书写没问题。

Vue中element-ui的resetFields()方法重置表单无效问题及解决办法

1.当新增和编辑都同用一个弹窗实现的时候,此时无法达到清除表单的效果。
查看 官网地址 介绍,注意:resetField()方法不是将表单重置为空,而是重置为初始值
而这个初始值是如何定义的呢?
我尝试了一下,初始值的定义应该为第一次打开弹窗的值。换句话说,如果是打开新建的表单,那么初始值就都为空,如果打开是编辑的弹窗表单,那么初始值就为编辑的。(具体没有看源码深层次确定)

2.表单项el-form-item没有添加prop属性,prop属性需要与input框绑定的属性一致

针对一
我手动清空了一下formData的数据。
注意点,清空不可以直接等于{}。我采取的方法为写一个公共的方法,递归将其属性都赋值为null 或者 ""。如下方式不可取

那何时清空这个数据最合理呢?
我选择在弹窗关闭的事件回调中清空。原因为点击取消关闭弹框要清空,点击确定完成操作要清空,点击关闭要关闭并清空,点击空白也是关闭弹窗并清空。所以选择弹框的closed回调中清空数据。

针对二
检查属性对应的。确保书写没问题。

vue前端页面表单显隐后校验错位的问题

vue表单页面,有些字段会根据操作条件显示和隐藏,然后就出现了验证bug,验证位置就会发生错位
解决方法: 在表单项添加唯一的key,例如 key="userName"

vue前端页面表单显隐后校验错位的问题

vue表单页面,有些字段会根据操作条件显示和隐藏,然后就出现了验证bug,验证位置就会发生错位
解决方法: 在表单项添加唯一的key,例如 key="userName"

Vue处理表单校验

1、vue使用element-ui的form表单验证

问题描述:第一次点击新增时正常,第二次新增打开弹窗后由于表单内容为空,出现验证这种情况。

解决 : this.$refs.staffForm.resetFields();//等弹窗里的form表单的dom渲染完在执行this.$refs.staffForm.resetFields(),去除验证(clearValidate),(resetField表单重置)

//打开弹窗的新增方法

addStaff() {

      this.staffVisible = true;//弹窗打开

      this.$nextTick(()=>{

         this.$refs.staffForm.resetFields()

        this.$refs.staffForm.clearValidate()

      });

},

element-ui 表单编辑之后再新增表单数据无法清空问题(已解决)

问题场景:
vue element ui在做编辑和添加时候使用同一个组件页面,先点击编辑然后在点击新增,此时表单数据不清空,使用this.$refs[dataForm].resetFields()也无效。

问题原因:
点击编辑 再点击添加,这时候数据已经赋值了,this.$refs['dataForm'].resetFields()这个做法其实是重置表单到初始值,不是清空表单,当表单第一次在页面中渲染时所用的数据就是初始数据,表单渲染时就会将这个修改对象作为初始值,所以出现无效了。

解决方法:
(1)用 nextTick(() => {
this.$refs['dataForm'].resetFields();
});

(2)如果(1)不行的话就直接在页面初始的时候将表单数据重置:
this. refs['dataForm'].clearValidate() //移除表单项的校验结果
});
for(let key in this.dataForm){
this.dataForm[key]=""
}

以上over~

element-ui 表单编辑之后再新增表单数据无法清空问题(已解决)

问题场景:
vue element ui在做编辑和添加时候使用同一个组件页面,先点击编辑然后在点击新增,此时表单数据不清空,使用this.$refs[dataForm].resetFields()也无效。

问题原因:
点击编辑 再点击添加,这时候数据已经赋值了,this.$refs['dataForm'].resetFields()这个做法其实是重置表单到初始值,不是清空表单,当表单第一次在页面中渲染时所用的数据就是初始数据,表单渲染时就会将这个修改对象作为初始值,所以出现无效了。

解决方法:
(1)用 nextTick(() => {
this.$refs['dataForm'].resetFields();
});

(2)如果(1)不行的话就直接在页面初始的时候将表单数据重置:
this. refs['dataForm'].clearValidate() //移除表单项的校验结果
});
for(let key in this.dataForm){
this.dataForm[key]=""
}

以上over~

本文如未解决您的问题请添加抖音号:51dongshi(抖音搜索懂视),直接咨询即可。

Top