vue3踩坑记（1）ref、reactive

踩坑用的是vite2 + vue3 + element-plus + ts + setup语法糖

在我理解，ref绑定普通数据类型（number，string，boolean），对象类的需要reactive。

这里写了个登录页，一度让我怀疑。在vue2.x里面最基本简单的表单组件，这里完全失败。代码如下。

<template>
  <el-form ref="loginForm" :model="loginForm" label-width="80px">
    <el-form-item label="帐号" prop="username">
      <el-input v-model="loginForm.username"></el-input>
    </el-form-item>
    <el-form-item label="密码">
      <el-input v-model="loginForm.password"></el-input>
    </el-form-item>
  </el-form>
</template>

<script lang="ts" setup>
import { reactive  } from 'vue'
const loginForm = reactive({
  username: '',
  password: '',
})
</script>

问题：loginForm死活没办法动态显示。

解决过程：

        1.使用原生input，loginForm是可以动态显示的。

        2.使用ref代替reactive也是可以的。

上面两个方法是没有问题的，但是没有根本解决问题，反而让我觉得哪里出了问题。

所以在html中，我打印了各个值，包括loginForm。

这里才发现问题，loginForm在打印时，居然发现了ref的属性，里面包含了el-form表单的属性。瞬间让我想到了是不是loginForm是不是绑定的不是reactive，而是虚拟dom的ref。想到去做，修改代码

<template>
  <el-form ref="loginRef" :model="loginForm" label-width="80px">
    <el-form-item label="帐号" prop="username">
      <el-input v-model="loginForm.username"></el-input>
    </el-form-item>
    <el-form-item label="密码">
      <el-input v-model="loginForm.password"></el-input>
    </el-form-item>
  </el-form>
</template>

<script lang="ts" setup>
import { reactive, ref  } from 'vue'
const loginRef = ref(null) // ref
const loginForm = reactive({
  username: '',
  password: '',
})
</script>

最终解决：html中ref使用了与loginForm不同名的loginRef，新增了一行代码，定义ref元素。执行，完全没有问题。

理解之后，发现loginForm虽然是注册的reactive，但是实际上被渲染成了虚拟dom元素。