diff --git a/20_脚手架/vue3_test/5.src_vue3的响应式原理/App.vue b/20_脚手架/vue3_test/5.src_vue3的响应式原理/App.vue
new file mode 100644
index 0000000..dd713dd
--- /dev/null
+++ b/20_脚手架/vue3_test/5.src_vue3的响应式原理/App.vue
@@ -0,0 +1,73 @@
+<template>
+  <h1>个人信息：</h1>
+  <h2 v-show="person.name">姓名：{{ person.name }}</h2>
+  <h2>年龄：{{ person.age }}</h2>
+  <h2 v-show="person.sex">性别：{{ person.sex }}</h2>
+  <h2>工作种类：{{ person.job.type }}</h2>
+  <h2>薪水：{{ person.job.salary }}</h2>
+  <h2>爱好：{{ person.hobby }}</h2>
+  <h2>c的值：{{ person.job.a.b.c }}</h2>
+  <button @click="changeInfo">修改信息</button>
+  <button @click="addSex">添加性别</button>
+  <button @click="deleteName">删除姓名</button>
+</template>
+
+<script>
+import {ref, reactive} from "vue";
+
+export default {
+  name: 'App',
+  setup() {
+    // 数据
+    // let name = ref('张三')
+    // let age = ref(19)
+    // let job = reactive({
+    //   type: '前端工程师',
+    //   salary: '30K',
+    //   a: {
+    //     b:{
+    //       c: 666
+    //     }
+    //   }
+    // })
+    // let hobby = reactive(['抽烟','喝酒','烫头'])
+    let person = reactive({
+      name: '张三',
+      age: 18,
+      job: {
+        type: '前端工程师',
+        salary: '30K',
+        a: {
+          b: {
+            c: 666
+          }
+        }
+      },
+      hobby: ['抽烟', '喝酒', '烫头']
+    })
+
+    function changeInfo() {
+      person.name = '李四'
+      person.age = 88
+      person.job.type = '后端工程师'
+      person.job.salary = '31K'
+      person.hobby[0] = '测试'
+    }
+
+    function addSex() {
+      person.sex = '男'
+    }
+
+    function deleteName() {
+      delete person.name
+    }
+
+    return {
+      person,
+      changeInfo,
+      addSex,
+      deleteName
+    }
+  }
+}
+</script>
diff --git a/20_脚手架/vue3_test/5.src_vue3的响应式原理/assets/logo.png b/20_脚手架/vue3_test/5.src_vue3的响应式原理/assets/logo.png
new file mode 100644
index 0000000..f3d2503
Binary files /dev/null and b/20_脚手架/vue3_test/5.src_vue3的响应式原理/assets/logo.png differ
diff --git a/20_脚手架/vue3_test/5.src_vue3的响应式原理/main.js b/20_脚手架/vue3_test/5.src_vue3的响应式原理/main.js
new file mode 100644
index 0000000..8a90e5c
--- /dev/null
+++ b/20_脚手架/vue3_test/5.src_vue3的响应式原理/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')
\ No newline at end of file
diff --git a/20_脚手架/vue3_test/6.src_setup的两个注意点/App.vue b/20_脚手架/vue3_test/6.src_setup的两个注意点/App.vue
new file mode 100644
index 0000000..10d68af
--- /dev/null
+++ b/20_脚手架/vue3_test/6.src_setup的两个注意点/App.vue
@@ -0,0 +1,26 @@
+<template>
+  <Demo @hello="showHelloMsg" msg="你好" user="Roger">
+    <template v-slot:slot1>
+      <span>Roger</span>
+    </template>
+  </Demo>
+</template>
+
+<script>
+import {reactive} from "vue";
+import Demo from "@/components/demo.vue";
+
+export default {
+  name: 'App',
+  components: {Demo},
+  setup(){
+    function showHelloMsg(value) {
+      alert(`showHelloMsg:${value}`)
+    }
+
+    return {
+      showHelloMsg
+    }
+  }
+}
+</script>
diff --git a/20_脚手架/vue3_test/6.src_setup的两个注意点/assets/logo.png b/20_脚手架/vue3_test/6.src_setup的两个注意点/assets/logo.png
new file mode 100644
index 0000000..f3d2503
Binary files /dev/null and b/20_脚手架/vue3_test/6.src_setup的两个注意点/assets/logo.png differ
diff --git a/20_脚手架/vue3_test/6.src_setup的两个注意点/components/demo.vue b/20_脚手架/vue3_test/6.src_setup的两个注意点/components/demo.vue
new file mode 100644
index 0000000..1112629
--- /dev/null
+++ b/20_脚手架/vue3_test/6.src_setup的两个注意点/components/demo.vue
@@ -0,0 +1,36 @@
+<template>
+  <h1>个人信息：</h1>
+  <h2>姓名：{{ person.name }}</h2>
+  <h2>年龄：{{ person.age }}</h2>
+  <button @click="test">触发showHelloMsg</button>
+</template>
+
+<script>
+import {reactive} 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
+    let person = reactive({
+      name: '张三',
+      age: 18
+    })
+
+    function test() {
+      context.emit('hello',666)
+    }
+
+    return {
+      person,
+      test
+    }
+  }
+}
+</script>
diff --git a/20_脚手架/vue3_test/6.src_setup的两个注意点/main.js b/20_脚手架/vue3_test/6.src_setup的两个注意点/main.js
new file mode 100644
index 0000000..8a90e5c
--- /dev/null
+++ b/20_脚手架/vue3_test/6.src_setup的两个注意点/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')
\ No newline at end of file
diff --git a/20_脚手架/vue3_test/package-lock.json b/20_脚手架/vue3_test/package-lock.json
index 6fa68a3..d05794f 100644
--- a/20_脚手架/vue3_test/package-lock.json
+++ b/20_脚手架/vue3_test/package-lock.json
@@ -12890,7 +12890,8 @@
       "version": "5.0.8",
       "resolved": "https://registry.npmmirror.com/@vue/cli-plugin-vuex/-/cli-plugin-vuex-5.0.8.tgz",
       "integrity": "sha512-HSYWPqrunRE5ZZs8kVwiY6oWcn95qf/OQabwLfprhdpFWAGtLStShjsGED2aDpSSeGAskQETrtR/5h7VqgIlBA==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "@vue/cli-service": {
       "version": "5.0.8",
@@ -13411,13 +13412,15 @@
       "version": "1.8.0",
       "resolved": "https://registry.npmmirror.com/acorn-import-assertions/-/acorn-import-assertions-1.8.0.tgz",
       "integrity": "sha512-m7VZ3jwz4eK6A4Vtt8Ew1/mNbP24u0FhdyfA7fSvnJR6LMdfOYnmuIrrJAgrYfYJ10F/otaHTtrtrtmHdMNzEw==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "acorn-jsx": {
       "version": "5.3.2",
       "resolved": "https://registry.npmmirror.com/acorn-jsx/-/acorn-jsx-5.3.2.tgz",
       "integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "acorn-walk": {
       "version": "8.2.0",
@@ -13476,7 +13479,8 @@
       "version": "3.5.2",
       "resolved": "https://registry.npmmirror.com/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
       "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "ansi-colors": {
       "version": "4.1.3",
@@ -14273,7 +14277,8 @@
       "version": "6.3.1",
       "resolved": "https://registry.npmmirror.com/css-declaration-sorter/-/css-declaration-sorter-6.3.1.tgz",
       "integrity": "sha512-fBffmak0bPAnyqc/HO8C3n2sHrp9wcqQz6ES9koRF2/mLOVAx9zIQ3Y7R29sYCteTPqMCwns4WYQoCX91Xl3+w==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "css-loader": {
       "version": "6.7.3",
@@ -14459,7 +14464,8 @@
       "version": "3.1.0",
       "resolved": "https://registry.npmmirror.com/cssnano-utils/-/cssnano-utils-3.1.0.tgz",
       "integrity": "sha512-JQNR19/YZhz4psLX/rQ9M83e3z2Wf/HdJbryzte4a3NSuafyp9w/I4U+hx5C2S9g41qlstH7DEWnZaaj83OuEA==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "csso": {
       "version": "4.2.0",
@@ -15945,7 +15951,8 @@
       "version": "5.1.0",
       "resolved": "https://registry.npmmirror.com/icss-utils/-/icss-utils-5.1.0.tgz",
       "integrity": "sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "ieee754": {
       "version": "1.2.1",
@@ -17320,25 +17327,29 @@
       "version": "5.1.2",
       "resolved": "https://registry.npmmirror.com/postcss-discard-comments/-/postcss-discard-comments-5.1.2.tgz",
       "integrity": "sha512-+L8208OVbHVF2UQf1iDmRcbdjJkuBF6IS29yBDSiWUIzpYaAhtNl6JYnYm12FnkeCwQqF5LeklOu6rAqgfBZqQ==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "postcss-discard-duplicates": {
       "version": "5.1.0",
       "resolved": "https://registry.npmmirror.com/postcss-discard-duplicates/-/postcss-discard-duplicates-5.1.0.tgz",
       "integrity": "sha512-zmX3IoSI2aoenxHV6C7plngHWWhUOV3sP1T8y2ifzxzbtnuhk1EdPwm0S1bIUNaJ2eNbWeGLEwzw8huPD67aQw==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "postcss-discard-empty": {
       "version": "5.1.1",
       "resolved": "https://registry.npmmirror.com/postcss-discard-empty/-/postcss-discard-empty-5.1.1.tgz",
       "integrity": "sha512-zPz4WljiSuLWsI0ir4Mcnr4qQQ5e1Ukc3i7UfE2XcrwKK2LIPIqE5jxMRxO6GbI3cv//ztXDsXwEWT3BHOGh3A==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "postcss-discard-overridden": {
       "version": "5.1.0",
       "resolved": "https://registry.npmmirror.com/postcss-discard-overridden/-/postcss-discard-overridden-5.1.0.tgz",
       "integrity": "sha512-21nOL7RqWR1kasIVdKs8HNqQJhFxLsyRfAnUDm4Fe4t4mCWL9OJiHvlHPjcd8zc5Myu89b/7wZDnOSjFgeWRtw==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "postcss-loader": {
       "version": "6.2.1",
@@ -17443,7 +17454,8 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmmirror.com/postcss-modules-extract-imports/-/postcss-modules-extract-imports-3.0.0.tgz",
       "integrity": "sha512-bdHleFnP3kZ4NYDhuGlVK+CMrQ/pqUm8bx/oGL93K6gVwiclvX5x0n76fYMKuIGKzlABOy13zsvqjb0f92TEXw==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "postcss-modules-local-by-default": {
       "version": "4.0.0",
@@ -17478,7 +17490,8 @@
       "version": "5.1.0",
       "resolved": "https://registry.npmmirror.com/postcss-normalize-charset/-/postcss-normalize-charset-5.1.0.tgz",
       "integrity": "sha512-mSgUJ+pd/ldRGVx26p2wz9dNZ7ji6Pn8VWBajMXFf8jk7vUoSrZ2lt/wZR7DtlZYKesmZI680qjr2CeFF2fbUg==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "postcss-normalize-display-values": {
       "version": "5.1.0",
@@ -19302,7 +19315,8 @@
           "version": "8.13.0",
           "resolved": "https://registry.npmmirror.com/ws/-/ws-8.13.0.tgz",
           "integrity": "sha512-x9vcZYTrFPC7aSIbj7sRCYo7L/Xb8Iy+pW0ng0wt2vCJv7M9HOMy0UoN3rr+IFC7hb7vXoqS+P9ktyLLLhO+LA==",
-          "dev": true
+          "dev": true,
+          "requires": {}
         }
       }
     },
@@ -19429,7 +19443,8 @@
       "version": "7.5.9",
       "resolved": "https://registry.npmmirror.com/ws/-/ws-7.5.9.tgz",
       "integrity": "sha512-F+P9Jil7UiSKSkppIiD94dN07AwvFixvLIj1Og1Rl9GGMuNipJnV9JzjD6XuqmAeiswGvUmNLjr5cFuXwNS77Q==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "y18n": {
       "version": "5.0.8",
diff --git a/20_脚手架/vue3_test/src/App.vue b/20_脚手架/vue3_test/src/App.vue
index dd713dd..10d68af 100644
--- a/20_脚手架/vue3_test/src/App.vue
+++ b/20_脚手架/vue3_test/src/App.vue
@@ -1,72 +1,25 @@
 <template>
-  <h1>个人信息：</h1>
-  <h2 v-show="person.name">姓名：{{ person.name }}</h2>
-  <h2>年龄：{{ person.age }}</h2>
-  <h2 v-show="person.sex">性别：{{ person.sex }}</h2>
-  <h2>工作种类：{{ person.job.type }}</h2>
-  <h2>薪水：{{ person.job.salary }}</h2>
-  <h2>爱好：{{ person.hobby }}</h2>
-  <h2>c的值：{{ person.job.a.b.c }}</h2>
-  <button @click="changeInfo">修改信息</button>
-  <button @click="addSex">添加性别</button>
-  <button @click="deleteName">删除姓名</button>
+  <Demo @hello="showHelloMsg" msg="你好" user="Roger">
+    <template v-slot:slot1>
+      <span>Roger</span>
+    </template>
+  </Demo>
 </template>
 
 <script>
-import {ref, reactive} from "vue";
+import {reactive} from "vue";
+import Demo from "@/components/demo.vue";
 
 export default {
   name: 'App',
-  setup() {
-    // 数据
-    // let name = ref('张三')
-    // let age = ref(19)
-    // let job = reactive({
-    //   type: '前端工程师',
-    //   salary: '30K',
-    //   a: {
-    //     b:{
-    //       c: 666
-    //     }
-    //   }
-    // })
-    // let hobby = reactive(['抽烟','喝酒','烫头'])
-    let person = reactive({
-      name: '张三',
-      age: 18,
-      job: {
-        type: '前端工程师',
-        salary: '30K',
-        a: {
-          b: {
-            c: 666
-          }
-        }
-      },
-      hobby: ['抽烟', '喝酒', '烫头']
-    })
-
-    function changeInfo() {
-      person.name = '李四'
-      person.age = 88
-      person.job.type = '后端工程师'
-      person.job.salary = '31K'
-      person.hobby[0] = '测试'
-    }
-
-    function addSex() {
-      person.sex = '男'
-    }
-
-    function deleteName() {
-      delete person.name
+  components: {Demo},
+  setup(){
+    function showHelloMsg(value) {
+      alert(`showHelloMsg:${value}`)
     }
 
     return {
-      person,
-      changeInfo,
-      addSex,
-      deleteName
+      showHelloMsg
     }
   }
 }
diff --git a/20_脚手架/vue3_test/src/components/demo.vue b/20_脚手架/vue3_test/src/components/demo.vue
new file mode 100644
index 0000000..1112629
--- /dev/null
+++ b/20_脚手架/vue3_test/src/components/demo.vue
@@ -0,0 +1,36 @@
+<template>
+  <h1>个人信息：</h1>
+  <h2>姓名：{{ person.name }}</h2>
+  <h2>年龄：{{ person.age }}</h2>
+  <button @click="test">触发showHelloMsg</button>
+</template>
+
+<script>
+import {reactive} 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
+    let person = reactive({
+      name: '张三',
+      age: 18
+    })
+
+    function test() {
+      context.emit('hello',666)
+    }
+
+    return {
+      person,
+      test
+    }
+  }
+}
+</script>
diff --git a/package-lock.json b/package-lock.json
index 80399bc..f416596 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,5 +1,5 @@
 {
-  "name": "vue_demo",
+  "name": "Vue_Demo",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {