element-plus form ref 和 model值的关系
感悟的记录
elementui 是一个优秀的前端ui, 现在vue3 出来了，本人也想抓紧时间，赶紧给自己充电加油。现在的element-plus 是一个beta版本，我安装的element-plus 是 "^1.0.1-beta.24",遇到这个问题的时候是 "^1.0.1-beta.18" 这个版本，反正都是beta版本，只是解决了一些问题。我在element-plus 的 issue 里面看到了form表单中 ref 和 model 里面的值相同的时候，form表单时不能够修改的。有小伙伴回答到，当然不可以修改，去看vue的官方文档关于ref,所以个人觉得官方时不会修复这个问题了，在此记录一下，自己学习的心得。
问题
当使用element-plus的form表单的时候，ref 里面和 model 里面的绑定的值都时由setup函数返回的，页面里面的form表单无法添加值，并且控制台也报出警告，说form里面的表单的属性渲染通过，但是实例里面没有定义 Property xxx was accessed during render but is not defined on instance
页面上打印from，里面却含有一些奇怪的值。
setup 里面导出的是一个对象，页面上却发生了大变化？
setup() { const formRef = ref({ text: '', margin: 0, size: 100, mainColor: '#000', subColor: '#fff' }); return { form: formRef, }; },
如果看到该文章的同学比较急，可以直接往下面看解决办法，中间的原理可以跳过
知识分解
element-plus 中 form表单的model作用
作用：配合表单验证
- 目前el-form的model主要用表单验证的，也就是配合el-form的rules和el-form-item的prop来使用的。不信的话，你可以增加一个rules和prop(为了调用验证方法，也el-form也加一个ref属性，相当于id或者class选择器的意思)，但是不写model，然后验证的话，会提示缺少model，导致无法验证成功。
- 里面的逻辑大概是，在el-form-item上写一个prop，这个prop左手对应着数据源（即用model.prop找到对应的数据源），右手对应着验证规则（即用rules.prop找到对应的规则）。然后就快乐地验证去了。
- 至于为什么不能将el-form的model+el-form-tem的prop这样的组合和表单中的v-model的用法合二为一，最直观的原因就是：作用于不同的标签，一种是针对表单的双向绑定，一种是针对el-form和el-form-item的验证（虽然这个验证的数据源最终就是表单那边双向绑定得来的）；其次，你感觉一下，一边是利用双向绑定提供数据，另一边是拿到数据和规则进行验证，这两边没有很死板地捆绑在一起啊，类似于耦合度不高，未来自定义或者修改的话会方便很多
- 源码中使用model 的地方，我们也可以看到，model就是用于表单验证的，如下图：
vue中ref的作用
vue2 ：通过 vm.$refs来获取ref的指定的元素和dom实列
vue3中：和vue2的用法一样
如果vue3中不使用setup函数，里面的ref是一样的，但是如果使用setup的话，并且如果ref绑定的值是setup返回的话，就会产生后面的结果。作为模板使用的引用与任何其他引用的行为一样:它们是响应式的，可以传递给(或从)composition 函数中返回，我们可以很简单的理解，就是ref可以直接绑定 setup中返回的值，在虚拟DOM修补算法,如果VNode ref的键对应一个裁判在渲染上下文,VNode的相应元素或组件实例的值将分配给裁判。这是虚拟DOM挂载/补丁过程中执行,所以参模板后只会分配值初始渲染. 原文
回到我们的代码中，我们可以发现，我们from对象在dom编译挂载的时候，已经被改变了，所以页面上才会出现model 和那些属性不存在的问题。
import {ref,onMounted} from "vue"; export default { setup() { // 连接的地址，或者文件 const formRef = ref({ text: '', margin: 0, size: 100, mainColor: '#000', subColor: '#fff' }); onMounted(() => { // the DOM element will be assigned to the ref after initial render console.log(formRef.value,'===------') // 打印的是一个dom对象 }) console.log(formRef.value) // 这行代码会先打印，打印我们的form对象，原因是 js的事件循环机制 return { form: formRef, }; },
解决办法
- 如果不需要做表单验证，可以不需要使用model，可以不使用这个属性
- 如果需要做表单验证，ref 和 model 绑定的值不一样，就不会出现这个问题了
效果
