尚硅谷toRefs和toRef学习示例

src/App.vue

@@ -0,0 +1,18 @@
+<template>
+    <div class="app">
+        <h1>Hello World,你好呀!</h1>
+        <Person/>
+    </div>
+
+
+
+    </template>
+
+    <script setup lang="ts">
+        import Person from './components/Person.vue';
+        
+    </script>
+
+    <style scoped>
+
+    </style>

src/components/Person.vue

@@ -0,0 +1,65 @@
+<template>
+<div class="person">
+    
+    <h3>一辆{{brand}}汽车的价格是:{{ jg }}万元!</h3>
+    <button @click="changePrice">加价10万元</button>
+    <h3>我的游戏:</h3>
+    <ul>
+        <li v-for="game in games" :key="game.id">{{game.name}}</li>
+    </ul>
+    <button @click="changeGame">添加新游戏</button>
+    
+</div>
+
+    </template>
+    
+    <script setup lang="ts">
+
+       import { reactive, ref, toRefs, toRef } from 'vue';
+       let car = reactive({
+            brand: '奔驰',
+            price: 100,
+            color: '黑色',
+       })
+       let { brand, price, color } = toRefs(car);
+       let jg = toRef(car, 'price');
+       console.log(brand, price, color);
+
+       let games = ref([
+            { name: '游戏1', id: 10 },
+            { name: '游戏2', id: 20 },
+            { name: '游戏3', id: 30 }
+       ]);
+       function changePrice() {
+            price.value += 10;
+            console.log(price.value);
+       }
+       function changeGame() {
+            games.value = [{ name: '游戏1', id: 10 },
+            { name: '游戏2asdasd', id: 20 },
+            { name: '游戏3', id: 30 }];
+            // Object.assign(games, [{ name: '游戏1saddsa222', id: 10 },
+            // { name: '游戏2asdas', id: 20 },
+            // { name: '游戏3', id: 30 }]);
+       }
+    
+
+    </script>
+
+    <style scoped>
+
+        .person{
+            background-color: #a7b8bb;
+            padding: 20px;
+            border-radius: 10px;
+            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+            width: 80%;
+            margin: 0 auto;
+        }
+        button{
+            background-color: #313633;
+            color: #15d11f;
+            margin: 0 10px;         
+        }
+
+    </style>

src/main.ts

@@ -0,0 +1,3 @@
+import { createApp } from "vue";
+import App from "./App.vue";
+createApp(App).mount("#app");