vue3

12.vue3/project1/src/App.vue

@@ -5,6 +5,10 @@
     <Demo2></Demo2>
     <hr><hr><hr>
     <Demo3></Demo3>
+    <hr><hr><hr>
+    <Demo4></Demo4>
+    <hr><hr><hr>
+    <Demo5></Demo5>
   </div>
 </template>
 
@@ -12,6 +16,8 @@
 import Demo1 from './components/Demo1.vue';
 import Demo2 from './components/Demo2.vue';
 import Demo3 from './components/Demo3.vue';
+import Demo4 from './components/Demo4.vue';
+import Demo5 from './components/Demo5.vue';
 </script>
 
 <style>

12.vue3/project1/src/components/Demo4.vue

@@ -0,0 +1,32 @@
+<template>
+  <div>
+    <h1>Demo4</h1>
+    <p>我叫{{ person.name }},今年{{ person.age }}岁</p>
+    <h1>{{ aa }}</h1>
+    <h1>{{ name }}--{{ age }}</h1>
+    <button @click="changeName">修改名字</button>
+  </div>
+</template>
+
+<script setup>
+import {ref,reactive,toRefs,toRef} from "vue" 
+// let [a,b,c] = [1,2,3]
+let person = reactive({
+    name:"图图",
+    age: 3
+})
+/**
+ * 使用toRefs/toRef 从数据中进行结构
+ * 解构后的数据 具备响应式
+ */
+// let {name,age} = (person);
+let aa = toRef(person,'name')
+let {name,age} = toRefs(person);
+console.log(name,age)
+function changeName() {
+    name.value = 'aa'
+}
+</script>
+
+<style lang="scss" scoped>
+</style>

12.vue3/project1/src/components/Demo5.vue

@@ -0,0 +1,41 @@
+<template>
+  <div>
+    <h1>Demo5--computed</h1>
+    <p>姓: <input type="text" v-model="firstName"></p>
+    <p>名: <input type="text" v-model="lastName"></p>
+    <p>全名:{{ firstName }}{{ lastName }}</p>
+    <!-- <p>全名:{{ getName() }}</p>
+    <p>全名:{{ getName() }}</p>
+    <p>全名:{{ getName() }}</p>
+    <p>全名:{{ getName() }}</p>
+    <p>全名:{{ getName() }}</p>
+    <p>全名:{{ getName() }}</p>
+    <p>全名:{{ getName() }}</p>
+    <p>全名:{{ getName() }}</p> -->
+    <p>全名:{{ fullName }}</p>
+    <p>全名:{{ fullName }}</p>
+    <p>全名:{{ fullName }}</p>
+    <p>全名:{{ fullName }}</p>
+    <p>全名:{{ fullName }}</p>
+    <p>全名:{{ fullName }}</p>
+    <p>全名:{{ fullName }}</p>
+    <p>全名:{{ fullName }}</p>
+  </div>
+</template>
+
+<script setup>
+import {ref,computed} from "vue" 
+let firstName = ref("胡");
+let lastName = ref("图图");
+function getName() {
+    console.log("1")
+    return firstName.value + lastName.value;
+}
+let fullName = computed(()=>{
+    console.log(2)
+    return firstName.value + lastName.value;
+})
+</script>
+
+<style lang="scss" scoped>
+</style>