js 解构导致的响应性消失以及如何保持解构之后的响应性

最新推荐文章于 2024-12-18 12:30:00 发布

原创最新推荐文章于 2024-12-18 12:30:00 发布 · 488 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端

前端综合专栏收录该内容

40 篇文章

订阅专栏

文章探讨了解构如何影响对象的响应性，特别是在Vue的reactiveAPI中。当对响应式对象进行解构时，响应性可能会丢失。文中提出了两种保持响应性的方法：避免使用解构或利用ref来包装属性。示例代码展示了这两种方法如何在改变原始对象属性后仍能保持更新的响应性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

解构本身其实是一个深拷贝

let obj = { name9: "houguoyu" }
let { name9 } = obj
obj.name9 = "xuangou"
console.log("name9", name9); //name9 houguoyu

如果对某个值进行监听，那么解构之后响应性就会消失，vue的reactive解构之后响应性好像也会消失

let origin = { name: "黄烽", age: 10 }
let p = new Proxy(origin, {})
// 看一个结构失去响应性的问题
let { name, age } = p
console.log(name, age); //黄烽 10
origin.name = "andy"
console.log(name, age);//黄烽 10

要保持响应性的第一种方式就是放弃使用解构

let origin1 = { name: "黄烽", age: 10 }
let p1 = new Proxy(origin1, {})
console.log(p1.name); //黄烽
origin1.name = "simon"
console.log(p1.name);//simon

又或者可以借鉴一下vue当中ref的类似写法

  let o1 = { value: "huangfeng" }
  let p3 = new Proxy(o1, {})
  let o2 = { value: 10 }
  let p4 = new Proxy(o2, {})
  let p2 = {
      name1: o1,
      age1: o2
  }
  let { name1, age1 } = p2
  console.log(name1.value, age1.value);//huangfeng 10
  p3.value = "wyw"
  p4.value = 100000
  console.log(name1.value, age1.value);//wyw 100000

这样的话，在函数当中应该能返回一个响应式的对象