欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue3?關(guān)于reactive的重置問題及解決

 更新時間：2022年05月27日 08:36:17   作者：ViFong  
這篇文章主要介紹了vue3?關(guān)于reactive的重置問題及解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

關(guān)于reactive的重置問題

在vue3的reactive的使用, 有時候需要對里面的數(shù)據(jù)進(jìn)行清空處理, 下面推薦一個方法

假如有一個info的reactive的數(shù)據(jù)

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中提供實現(xiàn)響應(yīng)式數(shù)據(jù)的方法.
  • 在Vue2中響應(yīng)式數(shù)據(jù)是通過defineProperty來實現(xiàn)的.
  • 而在Vue3響應(yīng)式數(shù)據(jù)是通過ES6的Proxy來實現(xiàn)的

2.reactive注意點

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

錯誤示范

當(dāng)傳遞的是非對象時,頁面不會發(fā)生響應(yīng)

在這里插入圖片描述

正確實例

在這里插入圖片描述

arr正確實例

傳入數(shù)組會轉(zhuǎn)成proxy對象

在這里插入圖片描述

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

相關(guān)文章

  • element?表格多級表頭子列固定的實現(xiàn)

    element?表格多級表頭子列固定的實現(xiàn)

    本文主要介紹了element?表格多級表頭子列固定的實現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2022-06-06
  • vue?demi支持sfc方式的vue2vue3通用庫開發(fā)詳解

    vue?demi支持sfc方式的vue2vue3通用庫開發(fā)詳解

    這篇文章主要為大家介紹了vue?demi支持sfc方式的vue2vue3通用庫開發(fā)詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
    2022-08-08
  • vue中報錯Duplicate?keys?detected:'1'.?This?may?cause?an?update?error的解決方法

    vue中報錯Duplicate?keys?detected:'1'.?This?may?c

    我們在vue開發(fā)過程中常會遇到一些錯誤,這篇文章主要給大家介紹了關(guān)于vue中報錯Duplicate?keys?detected:‘1‘.?This?may?cause?an?update?error的解決方法,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下
    2023-03-03
  • 用Vue.extend構(gòu)建消息提示組件的方法實例

    用Vue.extend構(gòu)建消息提示組件的方法實例

    本篇文章主要介紹了用Vue.extend構(gòu)建消息提示組件的方法實例，具有一定的參考價值，有興趣的可以了解一下
    2017-08-08
  • vue項目引入百度地圖BMapGL鼠標(biāo)繪制和BMap輔助工具

    vue項目引入百度地圖BMapGL鼠標(biāo)繪制和BMap輔助工具

    這篇文章主要為大家介紹了vue項目引入百度地圖BMapGL鼠標(biāo)繪制和BMap輔助工具的踩坑分析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
    2023-02-02
  • vue+elementUI組件table實現(xiàn)前端分頁功能

    vue+elementUI組件table實現(xiàn)前端分頁功能

    這篇文章主要為大家詳細(xì)介紹了vue+elementUI組件table實現(xiàn)前端分頁功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2019-12-12
  • Vue3.0監(jiān)聽器watch與watchEffect詳解

    Vue3.0監(jiān)聽器watch與watchEffect詳解

    在 Vue 3 中,watch 仍然是一種用于監(jiān)聽數(shù)據(jù)變化并執(zhí)行相應(yīng)操作的方式,不過在組合式 API 中,watch 的使用方式與選項式 API 略有不同,這篇文章主要介紹了Vue3.0監(jiān)聽器watch與watchEffect,需要的朋友可以參考下
    2023-12-12
  • vue后臺管理如何配置動態(tài)路由菜單

    vue后臺管理如何配置動態(tài)路由菜單

    這篇文章主要介紹了vue后臺管理如何配置動態(tài)路由菜單，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
    2022-04-04
  • Vue?插槽?Slots源碼解析與用法詳解

    Vue?插槽?Slots源碼解析與用法詳解

    這篇文章主要介紹了Vue?插槽?(Slots)?源碼解析與用法,通過實例,我們?nèi)媪私饬四J(rèn)插槽、具名插槽和作用域插槽的用法,并深入理解了其在Vue源碼中的實現(xiàn)原理,需要的朋友可以參考下
    2024-01-01
  • 關(guān)于vue.extend和vue.component的區(qū)別淺析

    關(guān)于vue.extend和vue.component的區(qū)別淺析

    最近工作中遇到了vue.extend,vue.component，但二者之間的區(qū)別與聯(lián)系是什么呢？下面這篇文章主要給大家介紹了關(guān)于vue.extend和vue.component區(qū)別的相關(guān)資料，需要的朋友可以參考借鑒，下面來一起看看吧。
    2017-08-08

最新評論