vue6el表单 el-form 和 el-input 都有model属性，但两者负责的事情完全不同 el-form 的

el表单

el-form 和 el-input 都有model属性，但两者负责的事情完全不同

el-form 的 model是整个表单的数据对象（全局），当表单提交时，它从这个model里拿值，触发校验时，也是检查这个model，它不会主动更新内部字段，只会接收数据
el-input的v-model是单个输入框如何修改model（局部），负责把输入框的内容写入到表单model中

这句话的作用是：

用户输入时，把内容写进ruleForm.username
从ruleForm.username读取初始值并显示

所以重点在于：

`el-form model`：

只负责 收集最终值
触发规则校验（依赖 model）
整体表单对象

`el-input v-model`：

负责 把输入写进 model
负责控制该字段的显示值

ref

el-form 的 ref 是用来在脚本中拿到整个表单实例的，目的是为了调用ElementPlus提供的表单方法，例如：

校验整个表单 → validate()
校验某个字段 → validateField()
重置表单 → resetFields()
清除校验 → clearValidate()

这些功能必须通过 ref 才能用。

为什么 el-form 需要ref？

因为表单校验不是自动的，你需要手动触发表单行为：

然后在`` 中：

const ruleFormRef = ref()

这样才能调用：

ruleFormRef.value.validate()
ruleFormRef.value.resetFields()

没有 ref → 你根本拿不到表单组件 → 无法调用方法。

ref 是“操作表单组件本身”，model 是“表单的数据”

el-form-item => prop

用来绑定校验规则，prop = "usernmae"，此表单的校验规则来自：

rules: {
  username: [ ... ]
}

如果没有prop，这个表单项不会被校验

示例：

const rules = {
  username: [
    { required: true, message: &#34;请输入用户名&#34;, trigger: &#34;blur&#34; }
  ]
}

让el-form能定位到model对应字段

当调用：

`ruleFormRef.value.validateField(&#34;username&#34;)`

Element Plus 就需要根据 prop 找到：

`ruleForm.username`

当整个表单 validate 时，它也是根据 prop 去遍历对应校验项。

prop其实就是“字段名”

prop和v-model的关系：

prop：负责关联校验规则，错误提示，验证状态，是校验规则绑定点
v-model：负责更新数据，是输入框和数据绑定点

一个负责校验，一个负责数据

autocomplete

autocomplete 是一个 HTML 输入框属性，决定浏览器要不要为用户 自动填充 输入内容。

当autocomplete为 on 时，浏览器会记住你之前输过的内容，下次输入时自动帮你填

展开运算符

dbUtils.set('userInfo', {
    ...userData.data
})

作用：把userData.data这个对象里的每个键值对都“展开”

userData.data = {
  name: &#34;叶椰椰&#34;,
  age: 20,
  role: &#34;admin&#34;
}

那么：

  ...userData.data

就等价于：

{
  name: &#34;叶椰椰&#34;,
  age: 20,
  role: &#34;admin&#34;
}

也就是说，它只是把对象里的内容摊开。

为什么要展开

为了生成一个新的对象，比如下面2个代码是不一样的：

const a = { x: 1 }
const b = a        // b 和 a 是同一个对象

但：

const b = { ...a } // b 是一个全新的对象

对象解构

const { userInfo } = loginInfo.data;

从 loginInfo.data 这个对象里，把名为 userInfo 的字段取出来，赋值到一个新的变量 userInfo 中。

等价于：

const userInfo = loginInfo.data.userInfo;

localStorage

clear() {

        const prefix = `${t}-${v}-`;
        const regex = new RegExp(`^${prefix}`);
        const keysToRemove = [];


        for (let i = 0; i < localStorage.length; i++) {
            const storageKey = localStorage.key(i);
            if (regex.test(storageKey)) {
                keysToRemove.push(storageKey);
            }
        }

 
        keysToRemove.forEach((key) => {
            localStorage.removeItem(key);
        });

}

方法	作用
`localStorage.setItem(key, value)`	存数据
`localStorage.getItem(key)`	取数据
`localStorage.removeItem(key)`	删除某条
`localStorage.clear()`	清空所有
`localStorage.length`	当前总键数
`localStorage.key(index)`	获取第 index 个键名

vue6