vue3 關於reactive的重置問題及解決

Posted on by

關於reactive的重置問題

在vue3的reactive的使用, 有時候需要對裡面的數據進行清空處理, 下面推薦一個方法

假如有一個info的reactive的數據

const info = reactive<{ name: string; age: string; gender: string }>({
  name: "1",
  age: "2",
  gender: "3",
});

重置方法

const clear = () => {
  const keys = Object.keys(info);
  let obj: { [name: string]: string } = {};
  keys.forEach((item) => {
    obj[item] = "";
  });
  Object.assign(info, obj);
};

理解vue3中的reactive

1.什麼是reactive?

  • reactive是Vue3中提供實現響應式數據的方法.
  • 在Vue2中響應式數據是通過defineProperty來實現的.
  • 而在Vue3響應式數據是通過ES6的Proxy來實現的

2.reactive註意點

  • reactive參數必須是對象(json/arr)
  • 如果給reactive傳遞瞭其他對象,默認情況下修改對象,界面不會自動更新,如果想更新,可以通過重新賦值的方式.

錯誤示范

當傳遞的是非對象時,頁面不會發生響應

在這裡插入圖片描述

正確實例

在這裡插入圖片描述

arr正確實例

傳入數組會轉成proxy對象

在這裡插入圖片描述

以上為個人經驗，希望能給大傢一個參考，也希望大傢多多支持WalkonNet。

推薦閱讀：