这是一篇普通大学生的学习记录帖，学习Vue3之前学过一些html,css,javascript的基础知识，希望可以通过记录博客对知识进行每日总结。

---

目录

前言

一.解构赋值

1.数组解构

2.对象解构

二.避免解构丢失响应性的方法

1.直接访问属性：避免解构，始终通过 obj.count 的方式访问

2.使用 toRefs 转换：将响应式对象的属性转为 Ref 对象

最后

---

前言

上一篇中我们讲到如何创建一个响应式对象，但是，当一个响应式对象被解构赋值后的新变量就不能维持响应式了。你对响应式对象进行解构时，本质上是从代理对象（Proxy对象）中读取属性的 “原始值”，并赋值给了新变量。这时我们可以通过toRefs,将响应式对象的属性转为Ref对象，此时解构后的新变量仍能保持响应式。

---

在讲toRefs之前，我们先复习一下什么是解构赋值。

一.解构赋值

在 JavaScript 中，解构是一种便捷的语法，用于从数组或对象中提取值，并将其赋值给变量。它可以简化代码，让数据提取更直观。解构主要分为数组解构和对象解构两种。下面复习一下他的语法。

1.数组解构

数组解构通过索引位置匹配值，语法用 [] 包裹变量。

let peopleAge = [1,2,3,4]
let[ age1,age2,age3,age4] = peopleAge  //解构数组
console.log(age1,age2,age3,age4);  //1 2 3 4 

age1相当于peopleAge[0],age2相当于peopleAge[1],但此时age1是我们let出的一个新变量。

2.对象解构

对象解构通过属性名匹配值（与顺序无关），语法用 {} 包裹变量。

let people =({
    name: '张三',
    age: 18
  })
let {name,age} = people  //解构对象
console.log(name,age);   //张三 18

name相当于people.name，age相当于people.age，但此时name是我们let出的一个新变量。

二.避免解构丢失响应性的方法

1.直接访问属性：避免解构，始终通过 obj.count 的方式访问

<script lang="ts" setup name='Person'>
import { reactive } from 'vue'
  let people = reactive({
    name: '张三',
    age: 18
  })
  let {name,age} = people  //解构对象
  function changeName(){
    people.name = '李四'  //使用obj.count访问属性仍保持响应式。
  }
</script>

2.使用 toRefs 转换：将响应式对象的属性转为 Ref 对象

注意：用 toRefs 转换成Ref对象在用的时候需要.value。

注意：若响应式对象中的属性本身也是一个对象（嵌套对象），则解构出来的属性仍然是响应式的。

---

最后

如果这篇文章对你有帮助的话就点个赞吧！