vue3的computed

20_脚手架/vue3_test/7.src_Vue3的computed/App.vue

@@ -0,0 +1,13 @@
+<template>
+  <Demo/>
+</template>
+
+<script>
+import {reactive} from "vue";
+import Demo from "@/components/demo.vue";
+
+export default {
+  name: 'App',
+  components: {Demo},
+}
+</script>

20_脚手架/vue3_test/7.src_Vue3的computed/components/demo.vue

@@ -0,0 +1,50 @@
+<template>
+  <h1>个人信息：</h1>
+  姓：<input type="text" v-model="person.firstName">
+  <br>
+  名：<input type="text" v-model="person.lastName">
+  <br>
+  <span>全名： {{person.fullName}}</span>
+  <br>
+  全名：<input type="text" v-model="person.fullName">
+</template>
+
+<script>
+import {reactive, computed} from "vue";
+
+export default {
+  name: 'Demo',
+  // computed:{
+  //   fullName() {
+  //     return this.person.firstName+'-'+this.person.lastName
+  //   }
+  // },
+  setup() {
+    let person = reactive({
+      firstName: '张',
+      lastName: '三'
+    })
+    // 计算属性简写-只读
+    person.fullName = computed(()=>{
+      return person.firstName + '-' + person.lastName
+    })
+
+    // 计算属性简写-只读
+    person.fullName = computed({
+      get() {
+        return person.firstName + '-' + person.lastName
+      },
+      set(val) {
+        const nameArr = val.split('-')
+        person.firstName = nameArr[0]
+        person.lastName = nameArr[1]
+
+      }
+    })
+
+    return {
+      person,
+    }
+  }
+}
+</script>

20_脚手架/vue3_test/7.src_Vue3的computed/main.js

@@ -0,0 +1,10 @@
+// 引入的不再是Vue构造函数， 引入的是一个名为createApp的工厂函数
+import { createApp } from 'vue'
+import App from './App.vue'
+
+// createApp(App).mount('#app')
+
+// 创建应用实例对象
+const app = createApp(App)
+console.log('@@@',app)
+app.mount('#app')

20_脚手架/vue3_test/src/App.vue

@@ -1,9 +1,5 @@
 <template>
-  <Demo @hello="showHelloMsg" msg="你好" user="Roger">
-    <template v-slot:slot1>
-      <span>Roger</span>
-    </template>
-  </Demo>
+  <Demo/>
 </template>
 
 <script>
@@ -13,14 +9,5 @@ import Demo from "@/components/demo.vue";
 export default {
   name: 'App',
   components: {Demo},
-  setup(){
-    function showHelloMsg(value) {
-      alert(`showHelloMsg:${value}`)
-    }
-
-    return {
-      showHelloMsg
-    }
-  }
 }
 </script>

20_脚手架/vue3_test/src/components/demo.vue

@@ -1,35 +1,49 @@
 <template>
   <h1>个人信息：</h1>
-  <h2>姓名：{{ person.name }}</h2>
-  <h2>年龄：{{ person.age }}</h2>
-  <button @click="test">触发showHelloMsg</button>
+  姓：<input type="text" v-model="person.firstName">
+  <br>
+  名：<input type="text" v-model="person.lastName">
+  <br>
+  <span>全名： {{person.fullName}}</span>
+  <br>
+  全名：<input type="text" v-model="person.fullName">
 </template>
 
 <script>
-import {reactive} from "vue";
+import {reactive, computed} from "vue";
 
 export default {
   name: 'Demo',
-  beforeCreate() {
-    console.log('---beforeCreate---')
-  },
-  props: ['msg', 'user'],
-  emits: ['hello'],
-  setup(props, context) {
-    console.log('---setup---', context)  // $attrs $emits $slots
-    console.log('---setup---', context.slots)  // $attrs $emits $slots
+  // computed:{
+  //   fullName() {
+  //     return this.person.firstName+'-'+this.person.lastName
+  //   }
+  // },
+  setup() {
     let person = reactive({
-      name: '张三',
-      age: 18
+      firstName: '张',
+      lastName: '三'
+    })
+    // 计算属性简写-只读
+    person.fullName = computed(()=>{
+      return person.firstName + '-' + person.lastName
     })
 
-    function test() {
-      context.emit('hello',666)
-    }
+    // 计算属性简写-只读
+    person.fullName = computed({
+      get() {
+        return person.firstName + '-' + person.lastName
+      },
+      set(val) {
+        const nameArr = val.split('-')
+        person.firstName = nameArr[0]
+        person.lastName = nameArr[1]
+
+      }
+    })
 
     return {
       person,
-      test
     }
   }
 }