vue3 使用UI框架reactive数据更新，视图不更新问题

本篇主要记录两个问题，然而这两个问题又都可以对应同一种解法。废话少说，解决方法在最上面。推荐格式如下：

const form = reactive({
    formData: {//为了保证响应性，一定一定要多包这一层
      key1: value,
      key2: value,
    },
  });
//或 个人比较喜欢第一种,大家各自取用吧
const form = ref({
   key1: value,
   key2: value,
});

一定一定要再多包一层，不然就会遇到一些问题。(⊙﹏⊙)虽然这是一句废话。下面的内容过于基础且本篇只记录bug和解法，想要探求为什么的呢，还请自己去查API。不愿浪费时间的，看到这里就结束了。

做项目一般都用个UI框架，我这次用的是字节的Arco Design，vue是3.2版本的。我一开始写了个表单，数据是这样式定义的

然后，第一次出现数据编辑，视图不更新。

这个我想那就强制刷新下视图吧，然后我就"$forceUpdate()",然后就出乎意料的失败了，那我再想想吧，后来我尝试这在获取的数据前加了个reactive，然后我就沿着错误的道路，继续往下走，直到遇到了第二个bug。

再说第二个bug前，插句话，此时原生的input还可以视图响应数据。因此，我标题加上了UI框架。

第二个视图不更新是在清空表单的时候遇到的。就是一旦给定初始值，我在清空表单时将对象置空，就又不好使了。

这次我的解决方法更直接了。直接点属性赋值。

虽然表单这样也算完成了。但是都写成这样了，还不知道自己写的有问题，那才有鬼了。

于是，我就又写了一遍。

或

嗯嗯，很快就完成了。