首页 前端技术

vue3如何解决reactive()响应式对象初始化重新赋值

• 前端技术 • 阅读 653

在 Vue 3 中，reactive 函数是 Composition API 的一部分，用于创建一个响应式对象。这意味着当你改变这个对象的属性时，任何依赖于这些属性的组件或计算属性都会自动更新。

在 Vue 3 中，reactive 函数是 Composition API 的一部分，用于创建一个响应式对象。这意味着当你改变这个对象的属性时，任何依赖于这些属性的组件或计算属性都会自动更新。

有时可能会遇到需要重新初始化其值（即重新赋值）的情况。这通常涉及到将整个响应式对象替换为一个新的对象，或者清空对象并重新填充其属性。

大概思路有两种解决办法

一、Object.assign()

顾名思义就是Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象分配（赋值）到目标对象。所以我们可以这样

import { reactive } from 'vue';

const initialState  = {
  count: 0,
  message: 'Hello, Vue 3!',
};

// 创建一个响应式对象
const state = reactive({ ...initialState });

//格式化重新赋值
Object.assign(state, initialState);

二、使用ref

import { ref,reactive } from 'vue';
 
const infoRef = ref<any>(source()) 
function reset(){
  infoRef.value = source()
}
function source(){
  return {
    foo:1,
    bar:2,
    obj:{a:1}
  }
}

以上这篇vue3如何解决reactive()响应式对象初始化重新赋值就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持芦苇派。

原创文章，作者：ECHO陈文，如若转载，请注明出处：https://www.luweipai.cn/html/1711593821/

赞 (1)

相关推荐

ECHO陈文
ECHO陈文
ECHO陈文

关注互联网技术开发与维护运营

π • 热门

  • 1 赞