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

Vue中對(duì)象賦值問題：對(duì)象引用被保留僅部分屬性被覆蓋的解決方案

 更新時(shí)間：2025年07月06日 08:58:45   作者：百錦再@新空間  
在?Vue?中,當(dāng)你直接給一個(gè)響應(yīng)式對(duì)象（如?reactive?或?ref?包裝的對(duì)象）賦新值時(shí),如果直接使用?=?賦值,可能會(huì)遇到?對(duì)象引用被保留,僅部分屬性被覆蓋?的問題,本文給大家介紹了Vue中對(duì)象賦值問題：對(duì)象引用被保留僅部分屬性被覆蓋的解決方案,需要的朋友可以參考下

問題重現(xiàn)

import { reactive } from 'vue';

const state = reactive({
  obj1: { name: "Alice", age: 25 },
});

// 嘗試用新對(duì)象覆蓋 obj1
const newObj = { name: "Bob", age: 30 };
state.obj1 = newObj; // 預(yù)期：obj1 完全變成 newObj
console.log(state.obj1); // { name: "Bob", age: 30 } ?

// 但如果用解構(gòu)賦值或 Object.assign，可能會(huì)出問題：
const anotherObj = { name: "Charlie" };
Object.assign(state.obj1, anotherObj); // ? 只修改了 name，age 仍然保留
console.log(state.obj1); // { name: "Charlie", age: 30 }（age 沒變！）

原因

直接賦值 =

  • 完全替換對(duì)象，Vue 能檢測到變化并觸發(fā)更新。
  • 適用于 reactive 或 ref 包裝的對(duì)象。

Object.assign 或解構(gòu)賦值 { ... }

  • 僅修改現(xiàn)有對(duì)象的屬性，不會(huì)觸發(fā) Vue 的響應(yīng)式更新（如果直接操作深層對(duì)象）。
  • 如果目標(biāo)對(duì)象是響應(yīng)式的，修改其屬性仍然會(huì)觸發(fā)更新，但 不會(huì)替換整個(gè)對(duì)象。

解決方案

1. 完全替換對(duì)象（推薦）

直接賦值新對(duì)象，確保 Vue 檢測到變化：

state.obj1 = { ...newObj }; // 使用新對(duì)象替換
// 或
state.obj1 = Object.assign({}, newObj); // 創(chuàng)建新對(duì)象

2. 使用 ref 代替 reactive

ref 更適合管理對(duì)象替換：

import { ref } from 'vue';

const objRef = ref({ name: "Alice", age: 25 });

// 直接替換整個(gè)對(duì)象
objRef.value = { name: "Bob", age: 30 }; // ? 觸發(fā)響應(yīng)式更新

3. 使用 reactive + 手動(dòng)觸發(fā)更新

如果必須用 reactive，可以強(qiáng)制替換：

import { reactive } from 'vue';

const state = reactive({ obj1: { name: "Alice", age: 25 } });

// 方法1：直接賦值
state.obj1 = { name: "Bob", age: 30 }; // ?

// 方法2：先置空再賦值（確保觸發(fā)依賴更新）
state.obj1 = null; // 強(qiáng)制清除舊引用
state.obj1 = { name: "Bob", age: 30 }; // ?

4. 使用 Vue.set（Vue 2 兼容方案）

在 Vue 2 中，直接修改對(duì)象可能不會(huì)觸發(fā)更新，需要用 Vue.set：

// Vue 2 專用
Vue.set(state, 'obj1', { name: "Bob", age: 30 });

但在 Vue 3 中，reactive 或 ref 已經(jīng)解決了這個(gè)問題。

總結(jié)

方法適用場景示例
直接賦值 =Vue 3 reactive/refstate.obj = newObj ?
ref + .value需要明確替換對(duì)象objRef.value = newObj ?
Object.assign僅修改屬性（不替換對(duì)象）Object.assign(state.obj, { name: "Bob" }) ?（慎用）
解構(gòu)賦值 {...}創(chuàng)建新對(duì)象替換state.obj = { ...newObj } ?

推薦做法：

  • 如果希望 完全替換對(duì)象，直接用 = 賦值。
  • 如果希望 修改部分屬性，確保目標(biāo)對(duì)象是響應(yīng)式的（如 reactive 或 ref 包裝的）。

這樣就能避免“對(duì)象未完全替換，僅部分屬性更新”的問題。

結(jié)論：第一種方法最好用，簡單易懂好操作。

Vue 3 中 reactive 和 ref 的全面解析

在 Vue 3 的 Composition API 中，reactive 和 ref 都是用來創(chuàng)建 響應(yīng)式數(shù)據(jù) 的核心 API，但它們的使用場景和底層機(jī)制有所不同。下面從 定義、訪問方式、適用場景、底層實(shí)現(xiàn)、TS 類型支持 等方面進(jìn)行詳細(xì)對(duì)比。

1. 基本定義

reactiveref
作用使 對(duì)象/數(shù)組 變成響應(yīng)式使 任意值（基本類型、對(duì)象、數(shù)組等）變成響應(yīng)式
返回值返回一個(gè) Proxy 代理對(duì)象返回一個(gè) RefImpl 對(duì)象（通過 .value 訪問）
適用數(shù)據(jù)類型僅適用于 對(duì)象/數(shù)組適用于 所有類型（number, string, object, array 等）
訪問方式直接訪問屬性（obj.key）必須通過 .value 訪問（refObj.value）
模板自動(dòng)解包直接使用，無需 .value在模板中自動(dòng)解包（無需 .value）

2. 基本用法對(duì)比

（1）reactive 示例

import { reactive } from 'vue';

const state = reactive({
  count: 0,
  user: { name: "Alice" }
});

// 修改數(shù)據(jù)
state.count++; // 直接修改
state.user.name = "Bob"; // 深層屬性也是響應(yīng)式的

特點(diǎn)：

  • 適用于 嵌套對(duì)象，自動(dòng)深度響應(yīng)式。
  • 不能直接替換整個(gè)對(duì)象（會(huì)失去響應(yīng)性），必須修改其屬性。

（2）ref 示例

import { ref } from 'vue';

const count = ref(0); // 基本類型
const user = ref({ name: "Alice" }); // 對(duì)象

// 修改數(shù)據(jù)
count.value++; // 必須用 .value
user.value.name = "Bob"; // 深層屬性也是響應(yīng)式的

// 完全替換對(duì)象
user.value = { name: "Charlie" }; // ? 仍然保持響應(yīng)式

特點(diǎn)：

  • 可以存儲(chǔ) 任意類型（基本類型、對(duì)象、數(shù)組等）。
  • 在 JS 中 必須用 .value 訪問，但在 模板中 自動(dòng)解包（無需 .value）。

3. 核心區(qū)別

（1）底層實(shí)現(xiàn)

reactiveref
實(shí)現(xiàn)方式基于 Proxy 代理整個(gè)對(duì)象基于 RefImpl 類，用 .value 存儲(chǔ)值
響應(yīng)式原理直接監(jiān)聽對(duì)象的所有屬性通過 .value 觸發(fā) getter/setter
適用場景適合 復(fù)雜對(duì)象/數(shù)組適合 基本類型 或 需要替換整個(gè)對(duì)象 的情況

（2）數(shù)據(jù)替換

reactive：

const state = reactive({ count: 0 });
state = { count: 1 }; // ? 錯(cuò)誤！不能直接替換整個(gè) reactive 對(duì)象

必須修改屬性：

Object.assign(state, { count: 1 }); // ? 修改屬性（響應(yīng)式）

ref：

const countRef = ref(0);
countRef.value = 1; // ? 可以直接替換

（3）模板中的使用

reactive：

<template>
  <div>{{ state.count }}</div> <!-- 直接使用 -->
</template>

ref：

<template>
  <div>{{ countRef }}</div> <!-- 自動(dòng)解包，無需 .value -->
</template>

但在 JS 中必須用 .value：

console.log(countRef.value); // 必須用 .value

4. 如何選擇？

使用場景推薦 API
管理復(fù)雜對(duì)象/表單數(shù)據(jù)reactive
基本類型（string/number/boolean）ref
需要靈活替換整個(gè)對(duì)象ref
組合式函數(shù)（Composable）返回值ref（更靈活）
需要解構(gòu)響應(yīng)式對(duì)象toRefs(reactiveObj)

5. 進(jìn)階技巧

（1）ref 可以包裹 reactive

const user = ref({
  name: "Alice",
  age: 25
});

// 修改方式
user.value.name = "Bob"; // ? 響應(yīng)式
user.value = { name: "Charlie" }; // ? 仍然響應(yīng)式

（2）toRefs 解構(gòu) reactive

const state = reactive({ count: 0, name: "Alice" });
const { count, name } = toRefs(state); // 解構(gòu)后仍然是響應(yīng)式

// 使用方式
count.value++; // 必須用 .value

（3）isRef 和 isReactive

import { isRef, isReactive } from 'vue';

console.log(isRef(countRef)); // true
console.log(isReactive(state)); // true

6. 總結(jié)

對(duì)比項(xiàng)reactiveref
適用數(shù)據(jù)類型對(duì)象/數(shù)組任意類型
訪問方式直接 obj.key.value
模板自動(dòng)解包直接使用自動(dòng)解包
是否支持替換整個(gè)對(duì)象不能直接替換可以替換
底層實(shí)現(xiàn)ProxyRefImpl + getter/setter
推薦使用場景復(fù)雜對(duì)象基本類型或需要替換的對(duì)象

最終建議：

  • 如果管理 復(fù)雜對(duì)象/表單數(shù)據(jù)，用 reactive。
  • 如果是 基本類型 或 需要靈活替換對(duì)象，用 ref。
  • 在組合式函數(shù)（Composable）中返回?cái)?shù)據(jù)時(shí)，優(yōu)先用 ref（更靈活）

以上就是Vue中對(duì)象賦值問題：對(duì)象引用被保留僅部分屬性被覆蓋的解決方案的詳細(xì)內(nèi)容，更多關(guān)于Vue中對(duì)象賦值問題的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

相關(guān)文章

  • 淺談java中unmodifiableList方法的應(yīng)用場景

    淺談java中unmodifiableList方法的應(yīng)用場景

    下面小編就為大家?guī)硪黄獪\談java中unmodifiableList方法的應(yīng)用場景。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2017-06-06
  • Java中import java.util.Scanner的用處詳解

    Java中import java.util.Scanner的用處詳解

    文章主要介紹Java中的Scanner類及其常用方法next()和nextLine()的區(qū)別,next()方法在遇到空格、Tab鍵、回車鍵等分隔符時(shí)結(jié)束輸入,而nextLine()方法則接收所有輸入,直到遇到回車鍵
    2024-11-11
  • SpringBoot?RESTful?應(yīng)用中的異常處理梳理小結(jié)

    SpringBoot?RESTful?應(yīng)用中的異常處理梳理小結(jié)

    這篇文章主要介紹了SpringBoot?RESTful?應(yīng)用中的異常處理梳理小結(jié)，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
    2023-05-05
  • 一文掌握J(rèn)avaWeb登錄認(rèn)證

    一文掌握J(rèn)avaWeb登錄認(rèn)證

    登錄認(rèn)證是每個(gè)系統(tǒng)中必不可少的功能,通過用戶名和密碼來驗(yàn)證用戶身份,JavaWeb中實(shí)現(xiàn)登錄認(rèn)證通常需要處理HTTP協(xié)議的無狀態(tài)性,涉及會(huì)話管理、令牌技術(shù)等,本文給大家介紹JavaWeb登錄認(rèn)證的相關(guān)知識(shí),感興趣的朋友跟隨小編一起看看吧
    2024-09-09
  • SpringBoot操作Mongodb的實(shí)現(xiàn)示例

    SpringBoot操作Mongodb的實(shí)現(xiàn)示例

    本文主要介紹了SpringBoot操作Mongodb的實(shí)現(xiàn)示例，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2023-06-06
  • Java實(shí)體類常用注解的用法

    Java實(shí)體類常用注解的用法

    這篇文章主要介紹了Java實(shí)體類常用注解的用法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2025-06-06
  • 教你怎么用Java獲取國家法定節(jié)假日

    教你怎么用Java獲取國家法定節(jié)假日

    這篇文章主要介紹了教你怎么用Java獲取國家法定節(jié)假日,文中有非常詳細(xì)的代碼示例,對(duì)正在學(xué)習(xí)java的小伙伴們有非常好的幫助,需要的朋友可以參考下
    2021-04-04
  • 詳解Java的MyBatis框架中的緩存與緩存的使用改進(jìn)

    詳解Java的MyBatis框架中的緩存與緩存的使用改進(jìn)

    很多人在使用MyBatis的緩存后經(jīng)常會(huì)遇到MySQL分頁查詢的顯示問題,針對(duì)于此,這里我們就來詳解Java的MyBatis框架中的緩存與緩存的使用改進(jìn),首先來回顧一下MyBatis的緩存機(jī)制與執(zhí)行:
    2016-06-06
  • 關(guān)于java.math.BigDecimal比較大小問題

    關(guān)于java.math.BigDecimal比較大小問題

    這篇文章主要介紹了關(guān)于java.math.BigDecimal比較大小問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
    2023-07-07
  • Java中的collection集合類型總結(jié)

    Java中的collection集合類型總結(jié)

    Java的集合類型都是對(duì)java.util包中Collection接口的繼承,這里我們主要介紹依賴于collection的一些主分支,一起來看一下Java中的collection集合類型總結(jié)
    2016-05-05

最新評(píng)論