From be69ea3ba4ae6fd53eb792308181c544057893e4 Mon Sep 17 00:00:00 2001
From: "yingfeng.ai" <aiyingfeng110@qq.com>
Date: Thu, 31 Oct 2024 10:43:01 +0800
Subject: [PATCH] =?UTF-8?q?vue=E5=AD=A6=E4=B9=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 学习VUE/hello_vue3/笔记/toRefs与toRef.vue | 45 +++++++++++++++++++++++
 1 file changed, 45 insertions(+)
 create mode 100644 学习VUE/hello_vue3/笔记/toRefs与toRef.vue

diff --git a/学习VUE/hello_vue3/笔记/toRefs与toRef.vue b/学习VUE/hello_vue3/笔记/toRefs与toRef.vue
new file mode 100644
index 0000000..5464986
--- /dev/null
+++ b/学习VUE/hello_vue3/笔记/toRefs与toRef.vue
@@ -0,0 +1,45 @@
+<template>
+  <div class="person">
+    <h2>{{ car.price }}-----{{ car.brand }}</h2>
+    <button @click="changeCartoRefs">修改汽车价格和名字</button>
+    <button @click="changeCartoRef">修改汽车价格和名字</button>
+  </div>
+
+</template>
+
+<script setup>
+import { reactive, toRefs, toRef } from "vue";
+
+// 创建一个响应式对象 car
+let car = reactive({ brand: 'byd', price: 10000000 });
+
+// 使用 toRefs 解构 car 对象的属性
+let { brand, price } = toRefs(car);
+
+// 使用 toRef 解构 car 对象的属性
+let nl = toRef(car, 'brand');
+
+// 修改汽车信息的方法
+function changeCartoRefs() {
+  // 修改 brand 和 price 的值，使用 .value 进行更改
+  brand.value = 'kdlk';
+  price.value = 20000000;
+}
+
+function changeCartoRef() {
+  // 修改 brand 的值，使用 .value 进行更改
+  nl.value = '44444444'
+}
+
+</script>
+
+<style scoped>
+.person {
+  background-color: antiquewhite;
+  box-shadow: 0 0 10px;
+}
+
+button {
+  margin: 5px;
+}
+</style>
\ No newline at end of file