Property xxx was accessed during render but is not defined on instance

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 绑定的值不一样，就不会出现这个问题了

效果