可以用 reset 把分支重置到之前的某个点，再 force commit 覆盖 history ，缺点是这种做法有风险，建议开干之前先 checkout -b 一个备用分支以便恢复代码

后端应用写起来还不错，测试一跑就知道行不行，前端应用写起来是真费劲

示例：

<script setup lang="ts">
const form = Provide(FormModel<TData>);
form.mode = FormMode.edit;
form.items = [
describeControl({
type: controlWrap('t-input'),
label: 'xxx：',
prop: 'yyy',
value: '',
validator: [FormValidator.required, FormValidator.max(50)],
options: {
placeholder: '请输入 xxx'
}
}),
];
form.resetData();
function onConfirm() {
form
.validate()
.then(() => {
return service.save(form.data);
})
.then(() => {
MessagePlugin.success('操作成功');
})
.catch((err) => {
MessagePlugin.error(err?.message || err);
});
};
</script>

<template>
<div v-if="form.data" v-grid.form="2" class="ph-20 gr-24 gc-12 mb-24">
<q-form-item prop="aaa"></q-form-item>
<q-form-item prop="bbb"></q-form-item>
<q-form-item v-if="form.data.bbb === '???'" prop="ccc"></q-form-item>
<q-form-item prop="ddd"></q-form-item>
</div>
</template>

<style scoped lang="less"></style>

表单设计不建议使用 vuex 或 pinia ，这两个都是用来管理全局变量的，管理局部模块化数据的话就有点吃力，我是使用 vue 自带的 providers ，再根据自己的想法封装了一套依赖注入来实现的，整体表单通过 FormModel 管理数据和表单项配置，并共享给整个组件树，每个表单项也都有专门的 FormControl 来对接表单的各种操作，但是从 0 到 1 的成本有点高，你要有心理准备

经验上讲，必须产品和设计配合第三方 UI 库，否则还是自己做适配来的方便

class Dep {
constructor(value) {
this._value = value;
}

_value
get value() {
return this._value;
}

set value(newValue) {
this._value = newValue;
}
}

不要锁不要队列，只看最终一致性的话，数据库的压力最小

computed 本身就是为了扩展 data ，设计成 property 是最合适的，跟 method 没什么关系；而且要是调方法也有缓存，你 debugger 的时候岂不是心里一万个草泥马么？

哎，仿佛几年前的 ie，我遇到的问题是输入完成后键盘消失但是页面底部出现一块有时候白色有时候灰色的背景，头疼

实践中发现 rem 单位用处不大，使用 px 单位再加上 media 就可以同时适配不同尺寸的页面，当然设计也要根据页面尺寸来

get 和 set 无法跟 template 双向绑定，使用$watch 来模拟 computed 和 watch

前端目前的市场是 react 最流行，同时也支持 ts ；
vue 缺点是 ts 入场太晚，angular 缺点是用的人少；
实际上看你自己的想法，如果是后端搞，那就建议多花点时间上 angular，如果是找前端合作，那就看对方的喜好

遇到问题 --> document --> google --> v2ex，不过通常来说只能获得一些思路，最后要解决还得靠自己

可能你同事一时间没想起来 test 这个单词，建议你选择原谅:D

@kirigaya 就是用的人少

// export type JsType = 'Array' | 'String' | 'Symbol' | 'Number' | 'Null' | 'Undefined' | 'Object' | 'RegExp' | 'Date' | 'Boolean' | 'HTMLAnchorElement' | string;
export function GetJsType(val) {
return Object.prototype.toString.apply(val).match(/\[object\s([a-zA-Z]+)\]/)[1];
}

export function CreateKeepAliveRouter(cacheRouters, noCacheRouters = []) {
if(GetJsType(cacheRouters) !== 'Array') {
cacheRouters = [cacheRouters]
}
if(GetJsType(noCacheRouters) !== 'Array') {
noCacheRouters = [noCacheRouters]
}
return {
path: '',
component: {
render(h) {
return h('keep-alive', {}, [
h('router-view')
])
}
},
children: [
...cacheRouters,
{
path: '',
component: {
data() {
return {
show: null
}
},
activated() {
this.show = false
this.$nextTick(() => {
if (this.show === false) {
this.show = true
}
})
},
deactivated() {
this.show = null
},
render(h) {
if (this.show) {
return h('router-view')
} else {
return ''
}
}
},
children: [
...noCacheRouters
]
}
]
}
}



// 用法
routers = [
{...}, // 路由 1
CreateKeepAliveRouter([
{...}, // 路由 2
], [
{...}, // 路由 3
])
]

效果：
1 、只有路由 2 有缓存效果
2 、路由 2 --> 路由 1 --> 路由 2，缓存消失
3 、路由 2 --> 路由 3 --> 路由 2，缓存不消失

你卖的不是插件，是用户吧