本篇主要記錄兩個問題，然而這兩個問題又都可以對應(yīng)同一種解法。廢話少說，解決方法在最上面。推薦格式如下：

const form = reactive({
    formData: {//為了保證響應(yīng)性，一定一定要多包這一層
      key1: value,
      key2: value,
    },
  });
//或 個人比較喜歡第一種,大家各自取用吧
const form = ref({
   key1: value,
   key2: value,
});

一定一定要再多包一層，不然就會遇到一些問題。(⊙﹏⊙)雖然這是一句廢話。下面的內(nèi)容過于基礎(chǔ)且本篇只記錄bug和解法，想要探求為什么的呢，還請自己去查API。不愿浪費時間的，看到這里就結(jié)束了。

做項目一般都用個UI框架，我這次用的是字節(jié)的Arco Design，vue是3.2版本的。我一開始寫了個表單，數(shù)據(jù)是這樣式定義的

<template>
    <a-input v-model="obj.k1" placeholder="請?zhí)顚憸y試" />
    <input v-model="obj.k2" placeholder="請?zhí)顚憸y試值" />
</template>
<script setup>
    //表單數(shù)據(jù)
    let obj = reactive({ k1: undefined, k2: undefined });
    //本地記錄或后臺獲取的表單數(shù)據(jù)
    const text = { k1: '測試', k2: 'abcd' };
    /*
     * 第一次解決視圖不更新
     * const text = reactive({ k1: '測試', k2: 'abcd' });
    */
    //獲取到表單數(shù)據(jù)后賦值給表單
    obj = text;
</script>

然后，第一次出現(xiàn)數(shù)據(jù)編輯，視圖不更新。

這個我想那就強(qiáng)制刷新下視圖吧，然后我就"$forceUpdate()",然后就出乎意料的失敗了，那我再想想吧，后來我嘗試這在獲取的數(shù)據(jù)前加了個reactive，然后我就沿著錯誤的道路，繼續(xù)往下走，直到遇到了第二個bug。

再說第二個bug前，插句話，此時原生的input還可以視圖響應(yīng)數(shù)據(jù)。因此，我標(biāo)題加上了UI框架。

第二個視圖不更新是在清空表單的時候遇到的。就是一旦給定初始值，我在清空表單時將對象置空，就又不好使了。

這次我的解決方法更直接了。直接點屬性賦值。

<template>
    <a-input v-model="obj.k1" placeholder="請?zhí)顚憸y試" />
    <input v-model="obj.k2" placeholder="請?zhí)顚憸y試值" />
    <a-button type="primary" status="danger" @click="a">清空數(shù)據(jù)</a-button>
</template>
<script setup>
    //表單數(shù)據(jù)
    let obj = reactive({ k1: undefined, k2: undefined });
    //本地記錄或后臺獲取的表單數(shù)據(jù)
     const text = reactive({ k1: '測試', k2: 'abcd' });
    //獲取到表單數(shù)據(jù)后賦值給表單
    obj = text;
    //清空表單
    const a = () => {
        /*
        * 好使
        * 如果對象key值較多可以遍歷對象，如采用for..in等循環(huán)
        */
        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="請?zhí)顚憸y試" />
    <input v-model="obj2.val.k2" placeholder="請?zhí)顚憸y試值" />
    <a-button type="primary" status="danger" @click="a">清空數(shù)據(jù)</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="請?zhí)顚憸y試" />
    <input v-model="obj2.k2" placeholder="請?zhí)顚憸y試值" />
    <a-button type="primary" status="danger" @click="a">清空數(shù)據(jù)</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>

嗯嗯，很快就完成了。文章來源地址http://www.zghlxwxcb.cn/news/detail-526722.html

到了這里，關(guān)于vue3 使用UI框架reactive數(shù)據(jù)更新，視圖不更新問題的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！