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

这篇具有很好参考价值的文章主要介绍了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版本的。我一开始写了个表单，数据是这样式定义的

<template>
    <a-input v-model="obj.k1" placeholder="请填写测试" />
    <input v-model="obj.k2" placeholder="请填写测试值" />
</template>
<script setup>
    //表单数据
    let obj = reactive({ k1: undefined, k2: undefined });
    //本地记录或后台获取的表单数据
    const text = { k1: '测试', k2: 'abcd' };
    /*
     * 第一次解决视图不更新
     * const text = reactive({ k1: '测试', k2: 'abcd' });
    */
    //获取到表单数据后赋值给表单
    obj = text;
</script>

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

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

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

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

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

<template>
    <a-input v-model="obj.k1" placeholder="请填写测试" />
    <input v-model="obj.k2" placeholder="请填写测试值" />
    <a-button type="primary" status="danger" @click="a">清空数据</a-button>
</template>
<script setup>
    //表单数据
    let obj = reactive({ k1: undefined, k2: undefined });
    //本地记录或后台获取的表单数据
     const text = reactive({ k1: '测试', k2: 'abcd' });
    //获取到表单数据后赋值给表单
    obj = text;
    //清空表单
    const a = () => {
        /*
        * 好使
        * 如果对象key值较多可以遍历对象，如采用for..in等循环
        */
        obj.k1 = undefined;
        obj.k2 = undefined;
        //不好使
        obj = {};
        //不好使
        obj = reactive({});
        //不好使
        obj = reactive({ k1: undefined, k2: undefined });
  };
</script>

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

于是，我就又写了一遍。

<template>
    <a-input v-model="obj2.val.k1" placeholder="请填写测试" />
    <input v-model="obj2.val.k2" placeholder="请填写测试值" />
    <a-button type="primary" status="danger" @click="a">清空数据</a-button>
</template>
<script setup>
    const obj2 = reactive({
        val: {
            k1: undefined,
            k2: undefined,
        },
    });
    const text2 = { k1: '测试', k2: 'abcd' };
    obj2.val = text2;
    const a = () => {
        obj2.val = {};
    };
</script>

或

<template>
    <a-input v-model="obj2.k1" placeholder="请填写测试" />
    <input v-model="obj2.k2" placeholder="请填写测试值" />
    <a-button type="primary" status="danger" @click="a">清空数据</a-button>
</template>
<script setup>
  const obj2 = ref({
    k1: undefined,
    k2: undefined,
  });
  const text2 = { k1: '测试', k2: 'abcd' };
  obj2.value = text2;
  const a = () => {
    obj2.value = {};
  };
</script>

嗯嗯，很快就完成了。文章来源地址https://www.toymoban.com/news/detail-526722.html

到了这里，关于vue3 使用UI框架reactive数据更新，视图不更新问题的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！