Mon Jun 5 15:37:00 UTC 2023 inscode

src/App.vue

 <script setup>
+import { onMounted, onUpdated, reactive,ref } from 'vue';
 import HelloWorld from './components/HelloWorld.vue'
 import TheWelcome from './components/TheWelcome.vue'
+const age=ref(0)
+const editAge = ()=>{
+    age.value++
+}
 </script>
 
 <template>
   <header>
     <img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125" />
-
+      年龄{{ age }}
     <div class="wrapper">
-      <HelloWorld msg="You did ithahahh!" />
+      <HelloWorld  @editAge="editAge" msg="我是传过来的值"/>
     </div>
   </header>
 

src/components/HelloWorld.vue

 <script setup>
-import { onMounted, onUpdated, reactive,ref } from 'vue';
- const obj=reactive({
-  name:'kjp'
- })
- const ha=ref(6)
-console.log('22222')
+import { onMounted, onUpdated, reactive, ref, computed, watchEffect, watch } from 'vue';
+const obj = reactive({
+  name: 'kjp'
+})
+const person = reactive({
+  books: [
+    'Vue 2 - Advanced Guide',
+    'Vue 3 - Basic Guide',
+    'Vue 4 - The Mystery'
+  ]
+})
 defineProps({
-  msg: {
-    type: String,
-    required: true
-  }
+  msg: String
 })
-function edit(){
-  obj.name='ppppp'
-  ha.value=77
+const ha = ref(6)
+const emits = defineEmits(['editAge'])
+function edit() {
+  obj.name = 'ppppp'
+  ha.value = 77
+}
+function buttonAge() {
+  console.log('22222')
+
+  emits('editAge')
 }
-onMounted(()=>{
-console.log('555555')
-console.log(ha.value)
 
+const com = computed(() => {
+  return person.books.length > 0 ? "有很多书" : '没有书'
 })
-onUpdated(()=>{
+
+watchEffect(() => {
+  console.log('新监听' + obj.name);
+})
+watch(obj.name, (n, o) => {
+  console.log('新值：' + n, '旧值' + o)
+}, {deep:true})
+onMounted(() => {
+  console.log('555555')
+  console.log(ha.value)
+
+})
+onUpdated(() => {
   console.log()
 })
 </script>
 
 <template>
   <div class="greetings">
-    <h1 class="green">{{ msg }}</h1>
-    <h3>
+    <h1 class="green">222</h1>
+    <!-- <h3>
         You’ve successfully created a project with
         <a target="_blank" href="https://vitejs.dev/">Vite</a> +
         <a target="_blank" href="https://vuejs.org/">Vue 3</a>.
-    </h3>
+      </h3> -->
     <h2>姓名：{{ obj.name }}</h2>年龄：{{ ha }}
+    <span>父传子：{{ msg }}</span>
+    <p>{{ com }}</p>
     <button @click='edit'>修改名字</button>
+    <button @click='buttonAge'>修改年龄</button>
   </div>
 </template>
 
@@ -55,6 +78,7 @@ h3 {
 }
 
 @media (min-width: 1024px) {
+
   .greetings h1,
   .greetings h3 {
     text-align: left;