Suspense

Reviewed-on: http://home.rogersun.online:3000/RogerWorkPC/Vue_Demo/pulls/2

20_脚手架/vue3_test/.gitignore

@@ -0,0 +1,23 @@
+.DS_Store
+node_modules
+/dist
+
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

20_脚手架/vue3_test/1.src_分析Vue3结构/App.vue

@@ -0,0 +1,26 @@
+<template>
+  <img alt="Vue logo" src="./assets/logo.png">
+  <HelloWorld msg="Welcome to Your Vue.js App"/>
+</template>
+
+<script>
+import HelloWorld from './components/HelloWorld.vue'
+
+export default {
+  name: 'App',
+  components: {
+    HelloWorld
+  }
+}
+</script>
+
+<style>
+#app {
+  font-family: Avenir, Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-align: center;
+  color: #2c3e50;
+  margin-top: 60px;
+}
+</style>

20_脚手架/vue3_test/1.src_分析Vue3结构/components/HelloWorld.vue

@@ -0,0 +1,58 @@
+<template>
+  <div class="hello">
+    <h1>{{ msg }}</h1>
+    <p>
+      For a guide and recipes on how to configure / customize this project,<br>
+      check out the
+      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
+    </p>
+    <h3>Installed CLI Plugins</h3>
+    <ul>
+      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
+      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
+    </ul>
+    <h3>Essential Links</h3>
+    <ul>
+      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
+      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
+      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
+      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
+      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
+    </ul>
+    <h3>Ecosystem</h3>
+    <ul>
+      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
+      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
+      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
+      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
+      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
+    </ul>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'HelloWorld',
+  props: {
+    msg: String
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+h3 {
+  margin: 40px 0 0;
+}
+ul {
+  list-style-type: none;
+  padding: 0;
+}
+li {
+  display: inline-block;
+  margin: 0 10px;
+}
+a {
+  color: #42b983;
+}
+</style>

20_脚手架/vue3_test/1.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')

20_脚手架/vue3_test/10.src_watchEffect函数/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/10.src_watchEffect函数/components/demo.vue

@@ -0,0 +1,54 @@
+<template>
+  <h2>当前求和为：{{ sum }}</h2>
+  <button @click="sum++">点击+1</button>
+  <hr>
+  <h2>当前信息为：{{ msg }}</h2>
+  <button @click="msg+='!'">修改信息</button>
+  <hr>
+  <h2>姓名：{{ person.name }}</h2>
+  <h2>年龄：{{ person.age }}</h2>
+  <h2>薪资：{{ person.job.j1.salary }}</h2>
+  <button @click="person.name+='~'">修改姓名</button>
+  <button @click="person.age++">修改年龄</button>
+  <button @click="person.job.j1.salary++">修改薪资</button>
+  <h2></h2>
+</template>
+
+<script>
+import {reactive, ref, watch, watchEffect} from "vue";
+
+export default {
+  name: 'Demo',
+
+  setup() {
+    let sum = ref(0)
+    let msg = ref('你好呀')
+    let person = reactive({
+      name: '张三',
+      age: 18,
+      job: {
+        j1: {
+          salary: 20
+        }
+      }
+    })
+
+    // 方法一： ref的对象监视，通过value实现
+    // watch(person, (newValue, oldValue) => {
+    //   console.log('person的值变了', newValue, oldValue)
+    // })
+
+    watchEffect(() => {
+      const x1 = sum.value
+      const x2 = person.job.j1.salary
+      console.log('watchEffect所指定的回调执行了')
+    })
+
+    return {
+      sum,
+      msg,
+      person
+    }
+  }
+}
+</script>

20_脚手架/vue3_test/10.src_watchEffect函数/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/11.src_vue3的生命周期/App.vue

@@ -0,0 +1,22 @@
+<template>
+  <button @click="isShowDemo=!isShowDemo">点击展示隐藏</button>
+  <Demo v-if="isShowDemo"/>
+</template>
+
+<script>
+import {ref} from "vue";
+import Demo from "@/components/demo.vue";
+
+export default {
+  name: 'App',
+  components: {Demo},
+  setup() {
+    let isShowDemo = ref(true)
+
+    return {
+      isShowDemo,
+    }
+  }
+
+}
+</script>

20_脚手架/vue3_test/11.src_vue3的生命周期/components/demo.vue

@@ -0,0 +1,76 @@
+<template>
+  <h2>当前求和为：{{ sum }}</h2>
+  <button @click="sum++">点击+1</button>
+</template>
+
+<script>
+import {ref, onBeforeMount, onMounted, onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted} from "vue";
+
+export default {
+  name: 'Demo',
+
+  setup() {
+    console.log("___setup___")
+    let sum = ref(0)
+
+    // 通过组合API的形式的生命周期钩子
+
+    onBeforeMount(()=>{
+      console.log("___onBeforeMount___")
+    })
+    onMounted(()=>{
+      console.log("___onMounted___")
+    })
+    onBeforeUpdate(()=>{
+      console.log("___onBeforeUpdate___")
+    })
+    onUpdated(()=>{
+      console.log("___onUpdated___")
+    })
+    onBeforeUnmount(()=>{
+      console.log("___onBeforeUnmount___")
+    })
+    onUnmounted(()=>{
+      console.log("___onUnmounted___")
+    })
+
+    return {
+      sum
+    }
+  },
+
+  // // 通过配置项的形式使用生命周期
+  // beforeCreate() {
+  //   console.log('---beforeCreate---')
+  // },
+  //
+  // created() {
+  //   console.log("---created---")
+  // },
+  //
+  // beforeMount() {
+  //   console.log("---beforeMount---")
+  // },
+  //
+  // mounted() {
+  //   console.log("---mounted---")
+  // },
+  //
+  // beforeUpdate() {
+  //   console.log("---beforeUpdate---")
+  // },
+  //
+  // updated() {
+  //   console.log("---updated---")
+  // },
+  //
+  // beforeUnmount() {
+  //   console.log("---beforeUnmount---")
+  // },
+  //
+  // unmounted() {
+  //   console.log("---unmounted---")
+  // }
+
+}
+</script>

20_脚手架/vue3_test/11.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')

20_脚手架/vue3_test/12.src_自定义hook/App.vue

@@ -0,0 +1,22 @@
+<template>
+  <button @click="isShowDemo=!isShowDemo">点击展示隐藏</button>
+  <Demo v-if="isShowDemo"/>
+</template>
+
+<script>
+import {ref} from "vue";
+import Demo from "@/components/demo.vue";
+
+export default {
+  name: 'App',
+  components: {Demo},
+  setup() {
+    let isShowDemo = ref(true)
+
+    return {
+      isShowDemo,
+    }
+  }
+
+}
+</script>

20_脚手架/vue3_test/12.src_自定义hook/components/demo.vue

@@ -0,0 +1,26 @@
+<template>
+  <h2>当前求和为：{{ sum }}</h2>
+  <button @click="sum++">点击+1</button>
+  <hr>
+  <h2>当前点击时鼠标的坐标为：x:{{point.x}} y:{{point.y}}</h2>
+</template>
+
+<script>
+import {ref} from "vue";
+import usePoint from "@/hooks/usePoint";
+
+export default {
+  name: 'Demo',
+
+  setup() {
+    console.log("___setup___")
+    let sum = ref(0)
+    let point = usePoint()
+
+    return {
+      sum,
+      point
+    }
+  },
+}
+</script>

20_脚手架/vue3_test/12.src_自定义hook/hooks/usePoint.js

@@ -0,0 +1,24 @@
+import {onBeforeUnmount, onMounted, reactive} from "vue";
+
+export default function() {
+    let point = reactive({
+        x: 0,
+        y: 0
+    })
+
+    function savePoint() {
+        console.log(event.pageX, event.pageY)
+        point.x = event.pageX
+        point.y = event.pageY
+    }
+
+    onMounted(() => {
+        window.addEventListener('click', savePoint)
+    })
+
+    onBeforeUnmount(() => {
+        window.removeEventListener('click', savePoint)
+    })
+
+    return point
+}

20_脚手架/vue3_test/12.src_自定义hook/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/13.src_toRef和toRefs/App.vue

@@ -0,0 +1,22 @@
+<template>
+  <button @click="isShowDemo=!isShowDemo">点击展示隐藏</button>
+  <Demo v-if="isShowDemo"/>
+</template>
+
+<script>
+import {ref} from "vue";
+import Demo from "@/components/demo.vue";
+
+export default {
+  name: 'App',
+  components: {Demo},
+  setup() {
+    let isShowDemo = ref(true)
+
+    return {
+      isShowDemo,
+    }
+  }
+
+}
+</script>

20_脚手架/vue3_test/13.src_toRef和toRefs/components/demo.vue

@@ -0,0 +1,37 @@
+<template>
+  <h2>{{ person }}</h2>
+  <h2>姓名：{{ name }}</h2>
+  <h2>年龄：{{ age }}</h2>
+  <h2>薪资：{{ job.j1.salary }}</h2>
+  <button @click="name+='~'">修改姓名</button>
+  <button @click="age++">修改年龄</button>
+  <button @click="job.j1.salary++">修改薪资</button>
+</template>
+
+<script>
+import {reactive,toRef,toRefs} from "vue";
+
+export default {
+  name: 'Demo',
+
+  setup() {
+    let person = reactive({
+      name: '张三',
+      age: 18,
+      job: {
+        j1: {
+          salary: 20
+        }
+      }
+    })
+
+    return {
+      person,
+      // name:toRef(person, 'name'),
+      // age: toRef(person, 'age'),
+      // salary: toRef(person.job.j1, 'salary')
+      ...toRefs(person)
+    }
+  }
+}
+</script>

20_脚手架/vue3_test/13.src_toRef和toRefs/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/14.src_shallowReactive和shallowRef/App.vue

@@ -0,0 +1,22 @@
+<template>
+  <button @click="isShowDemo=!isShowDemo">点击展示隐藏</button>
+  <Demo v-if="isShowDemo"/>
+</template>
+
+<script>
+import {ref} from "vue";
+import Demo from "@/components/demo.vue";
+
+export default {
+  name: 'App',
+  components: {Demo},
+  setup() {
+    let isShowDemo = ref(true)
+
+    return {
+      isShowDemo,
+    }
+  }
+
+}
+</script>

20_脚手架/vue3_test/14.src_shallowReactive和shallowRef/components/demo.vue

@@ -0,0 +1,39 @@
+<template>
+  <h4>当前的x值是： {{ x.y }}</h4>
+  <button @click="x++">点击+1</button>
+  <h2>{{ person }}</h2>
+  <h2>姓名：{{ name }}</h2>
+  <h2>年龄：{{ age }}</h2>
+  <h2>薪资：{{ job.j1.salary }}</h2>
+  <button @click="name+='~'">修改姓名</button>
+  <button @click="age++">修改年龄</button>
+  <button @click="job.j1.salary++">修改薪资</button>
+</template>
+
+<script>
+import {reactive, ref, toRef, toRefs, shallowReactive, shallowRef} from "vue";
+
+export default {
+  name: 'Demo',
+
+  setup() {
+    // let person = shallowReactive({  // 只考虑第一层的数据响应式
+    let person = shallowReactive({
+      name: '张三',
+      age: 18,
+      job: {
+        j1: {
+          salary: 20
+        }
+      }
+    })
+    let x = shallowRef({y:0})  //shallow不处理对象类型的响应式
+
+    return {
+      person,
+      x,
+      ...toRefs(person)
+    }
+  }
+}
+</script>

20_脚手架/vue3_test/14.src_shallowReactive和shallowRef/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/15.src_readonly与shallowReadonly/App.vue

@@ -0,0 +1,22 @@
+<template>
+  <button @click="isShowDemo=!isShowDemo">点击展示隐藏</button>
+  <Demo v-if="isShowDemo"/>
+</template>
+
+<script>
+import {ref} from "vue";
+import Demo from "@/components/demo.vue";
+
+export default {
+  name: 'App',
+  components: {Demo},
+  setup() {
+    let isShowDemo = ref(true)
+
+    return {
+      isShowDemo,
+    }
+  }
+
+}
+</script>

20_脚手架/vue3_test/15.src_readonly与shallowReadonly/components/demo.vue

@@ -0,0 +1,41 @@
+<template>
+  <h4>当前求和为： {{ sum }}</h4>
+  <button @click="sum++">点击+1</button>
+  <h2>姓名：{{ name }}</h2>
+  <h2>年龄：{{ age }}</h2>
+  <h2>薪资：{{ job.j1.salary }}</h2>
+  <button @click="name+='~'">修改姓名</button>
+  <button @click="age++">修改年龄</button>
+  <button @click="job.j1.salary++">修改薪资</button>
+</template>
+
+<script>
+import {reactive, ref, toRefs, readonly, shallowReadonly} from "vue";
+
+export default {
+  name: 'Demo',
+
+  setup() {
+    let sum = ref(0)
+    let person = reactive({
+      name: '张三',
+      age: 18,
+      job: {
+        j1: {
+          salary: 20
+        }
+      }
+    })
+
+    // person = readonly(person)
+    // person = shallowReadonly(person)
+    // sum = readonly(sum)
+    
+
+    return {
+      sum,
+      ...toRefs(person)
+    }
+  }
+}
+</script>

20_脚手架/vue3_test/15.src_readonly与shallowReadonly/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/16.src_toRaw与markRaw/App.vue

@@ -0,0 +1,22 @@
+<template>
+  <button @click="isShowDemo=!isShowDemo">点击展示隐藏</button>
+  <Demo v-if="isShowDemo"/>
+</template>
+
+<script>
+import {ref} from "vue";
+import Demo from "@/components/demo.vue";
+
+export default {
+  name: 'App',
+  components: {Demo},
+  setup() {
+    let isShowDemo = ref(true)
+
+    return {
+      isShowDemo,
+    }
+  }
+
+}
+</script>

20_脚手架/vue3_test/16.src_toRaw与markRaw/components/demo.vue

@@ -0,0 +1,62 @@
+<template>
+  <h4>当前求和为： {{ sum }}</h4>
+  <button @click="sum++">点击+1</button>
+  <h2>姓名：{{ name }}</h2>
+  <h2>年龄：{{ age }}</h2>
+  <h2>薪资：{{ job.j1.salary }}</h2>
+  <h3 v-show="person.car">车辆信息：{{ person.car }}</h3>
+  <button @click="name+='~'">修改姓名</button>
+  <button @click="age++">修改年龄</button>
+  <button @click="job.j1.salary++">修改薪资</button>
+  <button @click="showRawPerson">输出最原始的person</button>
+  <button @click="addCar">给人添加一台车</button>
+  <button v-show="person.car" @click="person.car.name += '!'">修改车名</button>
+  <button v-show="person.car" @click="changeCarPrice">修改价格</button>
+</template>
+
+<script>
+import {reactive, ref, toRefs, toRaw, markRaw} from "vue";
+
+export default {
+  name: 'Demo',
+
+  setup() {
+    let sum = ref(0)
+    let person = reactive({
+      name: '张三',
+      age: 18,
+      job: {
+        j1: {
+          salary: 20
+        }
+      }
+    })
+
+    function showRawPerson() {
+      console.log(person)
+      const p = toRaw(person)
+      console.log(p)
+    }
+    function addCar() {
+      let car = {name:'奔驰', price:40}
+      // person.car = car
+      person.car = markRaw(car)
+      console.log(person)
+    }
+
+    function changeCarPrice() {
+      person.car.price++
+      console.log(person.car.price)
+    }
+
+    return {
+      sum,
+      person,
+      ...toRefs(person),
+      showRawPerson,
+      addCar,
+      changeCarPrice
+    }
+  }
+}
+</script>

20_脚手架/vue3_test/16.src_toRaw与markRaw/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/17.src_customRef/App.vue

@@ -0,0 +1,44 @@
+<template>
+  <input type="text" v-model="keyWord">
+  <h3>{{keyWord}}</h3>
+</template>
+
+<script>
+import {ref, customRef} from "vue";
+
+export default {
+  name: 'App',
+  setup() {
+    // 自定义ref
+    function myRef(value) {
+      let timer
+      // console.log('---myRef---', value)
+      return customRef((track,trigger)=>{
+        return {
+          get() {
+            console.log(`有人从myRef这个容器中读取数据了，我把${value}给他了`)
+            track()  // 通知vue追踪数据变化
+            return value
+          },
+          set(newValue) {
+            console.log(`有人从myRef这个容器中数据改为了：${newValue}`)
+            clearTimeout(timer)
+            timer = setTimeout(()=>{
+              value = newValue
+              trigger()  //通知vue去重新解析模板
+            }, 500)
+          }
+        }
+      })
+    }
+
+    // let keyWord = ref('hello')  // 使用默认的ref
+    let keyWord = myRef('hello')
+
+    return {
+      keyWord,
+    }
+  }
+
+}
+</script>

20_脚手架/vue3_test/17.src_customRef/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/18.src_provide与inject/App.vue

@@ -0,0 +1,31 @@
+<template>
+  <div className="app">
+    <h3>我是app组件（祖）{{ name }}-{{ price }}</h3>
+    <child/>
+  </div>
+</template>
+
+<script>
+import child from "@/components/Child.vue";
+import {reactive, toRefs, provide} from "vue";
+
+export default {
+  name: 'App',
+  components: {child},
+  setup() {
+    let car = reactive({
+      name: '奔驰',
+      price: '40W'
+    })
+    provide('car', car)  //给自己的后代组件传递数据
+    return {...toRefs(car)}
+  }
+}
+</script>
+
+<style>
+.app {
+  background-color: gray;
+  padding: 10px;
+}
+</style>

20_脚手架/vue3_test/18.src_provide与inject/components/Child.vue

@@ -0,0 +1,21 @@
+<template>
+  <div class="child">
+    <h3>我是child组件（子）</h3>
+    <son/>
+  </div>
+</template>
+
+<script>
+import son from "@/components/Son.vue";
+export default {
+  name: "Child",
+  components:{son}
+}
+</script>
+
+<style>
+  .child{
+    background-color: skyblue;
+    padding: 10px;
+  }
+</style>

20_脚手架/vue3_test/18.src_provide与inject/components/Son.vue

@@ -0,0 +1,26 @@
+<template>
+  <div class="son">
+    <h3>我是son组件（孙）{{car.name}}-{{car.price}}</h3>
+  </div>
+</template>
+
+<script>
+import {inject} from "vue";
+
+export default {
+  name: "Son",
+  setup() {
+    let car = inject('car')
+    console.log('---son---', car)
+
+    return {car}
+  }
+}
+</script>
+
+<style scoped>
+  .son{
+    background-color: orange;
+    padding: 10px;
+  }
+</style>

20_脚手架/vue3_test/18.src_provide与inject/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/19.src_响应式的判断/App.vue

@@ -0,0 +1,35 @@
+<template>
+  <div class="app">
+    <h3>我是app组件（祖）</h3>
+  </div>
+</template>
+
+<script>
+import {reactive, ref, toRefs, provide, readonly, isReactive, isRef, isReadonly, isProxy} from "vue";
+
+export default {
+  name: 'App',
+  setup() {
+    let car = reactive({
+      name:'奔驰',
+      price: '40W'
+    })
+    let car2 = readonly(car)
+    let sum = ref(0)
+
+    console.log(isRef(sum))
+    console.log(isReactive(car))
+    console.log(isReadonly(car2))
+    console.log(isProxy(car))
+
+    return {...toRefs(car)}
+  }
+}
+</script>
+
+<style>
+  .app{
+    background-color: gray;
+    padding: 10px;
+  }
+</style>

20_脚手架/vue3_test/19.src_响应式的判断/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/2.src_初识Vue3的setup/App.vue

@@ -0,0 +1,28 @@
+<template>
+  <h1>个人信息：</h1>
+  <h2>姓名：{{name}}</h2>
+  <h2>年龄：{{age}}</h2>
+  <button @click="sayHello">点击</button>
+</template>
+
+<script>
+export default {
+  name: 'App',
+  setup() {
+    // 数据
+    let name = '张三'
+    let age = 19
+
+    // 方法
+    function sayHello() {
+      alert(`名字：${name}，年龄：${age}`)
+    }
+
+    return {
+      name,
+      age,
+      sayHello,
+    }
+  }
+}
+</script>

20_脚手架/vue3_test/2.src_初识Vue3的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')

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

@@ -0,0 +1,23 @@
+<template>
+  <div className="app">
+    <h3>我是app组件</h3>
+    <child/>
+  </div>
+</template>
+
+<script>
+import child from "@/components/Child";
+import {reactive, toRefs, provide} from "vue";
+
+export default {
+  name: 'App',
+  components: {child},
+}
+</script>
+
+<style>
+.app {
+  background-color: gray;
+  padding: 10px;
+}
+</style>

20_脚手架/vue3_test/20.src_Teleport/components/Child.vue

@@ -0,0 +1,21 @@
+<template>
+  <div class="child">
+    <h3>我是child组件</h3>
+    <son/>
+  </div>
+</template>
+
+<script>
+import son from "@/components/Son";
+export default {
+  name: "Child",
+  components:{son}
+}
+</script>
+
+<style>
+  .child{
+    background-color: skyblue;
+    padding: 10px;
+  }
+</style>

20_脚手架/vue3_test/20.src_Teleport/components/Dialog.vue

@@ -0,0 +1,50 @@
+<template>
+  <div>
+    <button @click="isShow=true">点我弹个窗</button>
+    <teleport to="body">
+      <div v-if="isShow" class="mask">
+        <div class="dialog">
+          <h3>这是一个弹窗</h3>
+          <h4>内容</h4>
+          <h4>内容</h4>
+          <h4>内容</h4>
+          <button @click="isShow=false">关闭弹窗</button>
+        </div>
+      </div>
+    </teleport>
+  </div>
+</template>
+
+<script>
+import {ref} from "vue";
+
+export default {
+  name: "Dialog",
+  setup() {
+    let isShow = ref(false)
+    return {isShow}
+  }
+}
+</script>
+
+<style>
+.mask {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+}
+
+.dialog {
+  text-align: center;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 300px;
+  height: 300px;
+  background-color: green;
+}
+</style>

20_脚手架/vue3_test/20.src_Teleport/components/Son.vue

@@ -0,0 +1,22 @@
+<template>
+  <div class="son">
+    <h3>我是son组件</h3>
+    <Dialog/>
+  </div>
+</template>
+
+<script>
+import Dialog from "@/components/Dialog.vue";
+
+export default {
+  name: "Son",
+  components:{Dialog}
+ }
+</script>
+
+<style>
+  .son{
+    background-color: orange;
+    padding: 10px;
+  }
+</style>

20_脚手架/vue3_test/20.src_Teleport/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/21.src_Suspense/App.vue

@@ -0,0 +1,31 @@
+<template>
+  <div className="app">
+    <h3>我是app组件</h3>
+    <Suspense>
+      <template v-slot:default>
+        <Child/>
+      </template>
+      <template v-slot:fallback>
+        <h3>加载中</h3>
+      </template>
+    </Suspense>
+  </div>
+</template>
+
+<script>
+// import child from "@/components/Child";  // 静态引入
+import {defineAsyncComponent} from 'vue';
+
+const Child = defineAsyncComponent(() => import('./components/Child.vue'))  // 动态引用
+export default {
+  name: 'App',
+  components: {Child},
+}
+</script>
+
+<style>
+.app {
+  background-color: gray;
+  padding: 10px;
+}
+</style>

20_脚手架/vue3_test/21.src_Suspense/components/Child.vue

@@ -0,0 +1,29 @@
+<template>
+  <div class="child">
+    <h3>我是child组件</h3>
+    {{sum}}
+  </div>
+</template>
+
+<script>
+import {ref} from "vue";
+
+export default {
+  name: "Child",
+  setup() {
+    let sum = ref(0)
+    return new Promise((resolve,reject)=> {
+      setTimeout(()=>{
+        resolve({sum})
+      }, 1000)
+    })
+  }
+}
+</script>
+
+<style>
+  .child{
+    background-color: skyblue;
+    padding: 10px;
+  }
+</style>

20_脚手架/vue3_test/21.src_Suspense/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/3.src_ref函数的使用/App.vue

@@ -0,0 +1,40 @@
+<template>
+  <h1>个人信息：</h1>
+  <h2>姓名：{{ name }}</h2>
+  <h2>年龄：{{ age }}</h2>
+  <h2>工作种类：{{ job.type }}</h2>
+  <h2>薪水：{{ job.salary }}</h2>
+  <button @click="changeInfo">修改信息</button>
+</template>
+
+<script>
+import {ref} from "vue";
+
+export default {
+  name: 'App',
+  setup() {
+    // 数据
+    let name = ref('张三')
+    let age = ref(19)
+    let job = ref({
+      type: '前端工程师',
+      salary: '30K'
+    })
+
+    function changeInfo() {
+      name.value = '李四'
+      age.value = 88
+      job.value.type = '后端工程师'
+      job.value.salary = '31K'
+      console.log(name,age)
+    }
+
+    return {
+      name,
+      age,
+      job,
+      changeInfo,
+    }
+  }
+}
+</script>

20_脚手架/vue3_test/3.src_ref函数的使用/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/4.src_reactive函数的使用/App.vue

@@ -0,0 +1,59 @@
+<template>
+  <h1>个人信息：</h1>
+  <h2>姓名：{{ person.name }}</h2>
+  <h2>年龄：{{ person.age }}</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>
+</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] = '测试'
+    }
+
+    return {
+      person,
+      changeInfo,
+    }
+  }
+}
+</script>

20_脚手架/vue3_test/4.src_reactive函数的使用/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/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>

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')

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>

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>

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')

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/8.src_watch函数/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/8.src_watch函数/components/demo.vue

@@ -0,0 +1,87 @@
+<template>
+  <h2>当前求和为：{{ sum }}</h2>
+  <button @click="sum++">点击+1</button>
+  <hr>
+  <h2>当前信息为：{{ msg }}</h2>
+  <button @click="msg+='!'">修改信息</button>
+  <hr>
+  <h2>姓名：{{ person.name }}</h2>
+  <h2>年龄：{{ person.age }}</h2>
+  <h2>薪资：{{ person.job.j1.salary }}</h2>
+  <button @click="person.name+='~'">修改姓名</button>
+  <button @click="person.age++">修改年龄</button>
+  <button @click="person.job.j1.salary++">修改薪资</button>
+  <h2></h2>
+</template>
+
+<script>
+import {reactive, ref, watch} from "vue";
+
+export default {
+  name: 'Demo',
+  // watch: {
+  //   // Vue2中的实现
+  //   // sum(newValue, oldValue) {
+  //   //   console.log('sum的值变了', newValue, oldValue)
+  //   // }
+  //   // Vue2中的实现二
+  //   // sum: {
+  //   //   immediate: true,
+  //   //   deep: true,
+  //   //   handler(newValue, oldValue) {
+  //   //     console.log('sum的值变了', newValue, oldValue)
+  //   //   }
+  //   // }
+  // },
+
+  setup() {
+    let sum = ref(0)
+    let msg = ref('你好呀')
+    let person = reactive({
+      name: '张三',
+      age: 18,
+      job: {
+        j1: {
+          salary: 20
+        }
+      }
+    })
+
+    // 情况一：监视ref的所有定义的一个响应式
+    // watch(sum, (newValue, oldValue) => {
+    //   console.log('sum值变化了', newValue, oldValue)
+    // }, {deep: true, immediate: true})
+
+    // 情况二：监视ref的所有定义的多个个响应式
+    watch([sum, msg], (newValue, oldValue) => {
+      console.log('sum和msg的值变化了', newValue, oldValue)
+    }, {immediate: true})
+
+    // 情况三：监控reactive所定义的一个响应式数据中的全部属性，注意：此处无法正确的获取oldValue，强制开启deep
+    // watch(person, (newValue, oldValue) => {
+    //   console.log('person对象的值变了', newValue, oldValue)
+    // }, {deep: false})
+
+    // 情况四：监控reactive所定义的一个响应式数据中的某个属性
+    // watch(()=>person.age, (newValue,oldValue)=>{
+    //   console.log('person.age对象的值变了', newValue, oldValue)
+    // })
+
+    // 情况五：监控reactive所定义的一个响应式数据中的某些属性
+    watch([() => person.name, () => person.age], (newValue, oldValue) => {
+      console.log('person.age和.name对象的值变了', newValue, oldValue)
+    })
+
+    // 特殊情况
+    watch(() => person.job, (newValue, oldValue) => {
+      console.log('person.job对象的值变了', newValue, oldValue)
+    }, {deep: true})
+
+    return {
+      sum,
+      msg,
+      person
+    }
+  }
+}
+</script>

20_脚手架/vue3_test/8.src_watch函数/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/9.src_watch监视ref的数据的说明/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/9.src_watch监视ref的数据的说明/components/demo.vue

@@ -0,0 +1,67 @@
+<template>
+  <h2>当前求和为：{{ sum }}</h2>
+  <button @click="sum++">点击+1</button>
+  <hr>
+  <h2>当前信息为：{{ msg }}</h2>
+  <button @click="msg+='!'">修改信息</button>
+  <hr>
+  <h2>姓名：{{ person.name }}</h2>
+  <h2>年龄：{{ person.age }}</h2>
+  <h2>薪资：{{ person.job.j1.salary }}</h2>
+  <button @click="person.name+='~'">修改姓名</button>
+  <button @click="person.age++">修改年龄</button>
+  <button @click="person.job.j1.salary++">修改薪资</button>
+  <h2></h2>
+</template>
+
+<script>
+import {reactive, ref, watch} from "vue";
+
+export default {
+  name: 'Demo',
+  // watch: {
+  //   // Vue2中的实现
+  //   // sum(newValue, oldValue) {
+  //   //   console.log('sum的值变了', newValue, oldValue)
+  //   // }
+  //   // Vue2中的实现二
+  //   // sum: {
+  //   //   immediate: true,
+  //   //   deep: true,
+  //   //   handler(newValue, oldValue) {
+  //   //     console.log('sum的值变了', newValue, oldValue)
+  //   //   }
+  //   // }
+  // },
+
+  setup() {
+    let sum = ref(0)
+    let msg = ref('你好呀')
+    let person = ref({
+      name: '张三',
+      age: 18,
+      job: {
+        j1: {
+          salary: 20
+        }
+      }
+    })
+
+    // 方法一： ref的对象监视，通过value实现
+    // watch(person.value, (newValue, oldValue) => {
+    //   console.log('person的值变了', newValue, oldValue)
+    // })
+
+    // 方法二： ref的对象监视，通过deep实现
+    watch(person, (newValue, oldValue) => {
+      console.log('person的值变了', newValue, oldValue)
+    },{deep: true})
+
+    return {
+      sum,
+      msg,
+      person
+    }
+  }
+}
+</script>

20_脚手架/vue3_test/9.src_watch监视ref的数据的说明/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/README.md

@@ -0,0 +1,24 @@
+# vue3_test
+
+## Project setup
+```
+npm install
+```
+
+### Compiles and hot-reloads for development
+```
+npm run serve
+```
+
+### Compiles and minifies for production
+```
+npm run build
+```
+
+### Lints and fixes files
+```
+npm run lint
+```
+
+### Customize configuration
+See [Configuration Reference](https://cli.vuejs.org/config/).

20_脚手架/vue3_test/babel.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  presets: [
+    '@vue/cli-plugin-babel/preset'
+  ]
+}

20_脚手架/vue3_test/jsconfig.json

@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "module": "esnext",
+    "baseUrl": "./",
+    "moduleResolution": "node",
+    "paths": {
+      "@/*": [
+        "src/*"
+      ]
+    },
+    "lib": [
+      "esnext",
+      "dom",
+      "dom.iterable",
+      "scripthost"
+    ]
+  }
+}

20_脚手架/vue3_test/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "vue3_test",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build",
+    "lint": "vue-cli-service lint"
+  },
+  "dependencies": {
+    "core-js": "^3.8.3",
+    "vue": "^3.2.13"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.12.16",
+    "@babel/eslint-parser": "^7.12.16",
+    "@vue/cli-plugin-babel": "~5.0.0",
+    "@vue/cli-plugin-eslint": "~5.0.0",
+    "@vue/cli-service": "~5.0.0",
+    "eslint": "^7.32.0",
+    "eslint-plugin-vue": "^8.0.3"
+  },
+  "eslintConfig": {
+    "root": true,
+    "env": {
+      "node": true
+    },
+    "extends": [
+      "plugin:vue/vue3-essential",
+      "eslint:recommended"
+    ],
+    "parserOptions": {
+      "parser": "@babel/eslint-parser"
+    },
+    "rules": {}
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not dead",
+    "not ie 11"
+  ]
+}

20_脚手架/vue3_test/public/index.html

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <title><%= htmlWebpackPlugin.options.title %></title>
+  </head>
+  <body>
+    <noscript>
+      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+    </noscript>
+    <div id="app"></div>
+    <!-- built files will be auto injected -->
+  </body>
+</html>

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

@@ -0,0 +1,31 @@
+<template>
+  <div className="app">
+    <h3>我是app组件</h3>
+    <Suspense>
+      <template v-slot:default>
+        <Child/>
+      </template>
+      <template v-slot:fallback>
+        <h3>加载中</h3>
+      </template>
+    </Suspense>
+  </div>
+</template>
+
+<script>
+// import child from "@/components/Child";  // 静态引入
+import {defineAsyncComponent} from 'vue';
+
+const Child = defineAsyncComponent(() => import('./components/Child.vue'))  // 动态引用
+export default {
+  name: 'App',
+  components: {Child},
+}
+</script>
+
+<style>
+.app {
+  background-color: gray;
+  padding: 10px;
+}
+</style>

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

@@ -0,0 +1,29 @@
+<template>
+  <div class="child">
+    <h3>我是child组件</h3>
+    {{sum}}
+  </div>
+</template>
+
+<script>
+import {ref} from "vue";
+
+export default {
+  name: "Child",
+  setup() {
+    let sum = ref(0)
+    return new Promise((resolve,reject)=> {
+      setTimeout(()=>{
+        resolve({sum})
+      }, 1000)
+    })
+  }
+}
+</script>
+
+<style>
+  .child{
+    background-color: skyblue;
+    padding: 10px;
+  }
+</style>

20_脚手架/vue3_test/src/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/vue.config.js

@@ -0,0 +1,5 @@
+const { defineConfig } = require('@vue/cli-service')
+module.exports = defineConfig({
+  transpileDependencies: true,
+  lintOnSave: false,  // 关闭语法检查
+})

20_脚手架/vue_code/37.src_组件内路由守卫/App.vue

@@ -0,0 +1,34 @@
+<template>
+  <div>
+    <div class="row">
+      <Banner/>
+    </div>
+    <div class="row">
+      <div class="col-xs-2 col-xs-offset-2">
+        <div class="list-group">
+          <!--          router-link 的 replace 和 push模式  设置为replace后无法后退，默认为push模式-->
+          <router-link class="list-group-item" active-class="active" :to="{name:'guanyu'}">About</router-link>
+          <router-link class="list-group-item" active-class="active" to="/home">Home</router-link>
+          <!--          <a class="list-group-item active" href="./about.html">About</a>-->
+          <!--          <a class="list-group-item" href="./home.html">Home</a>-->
+        </div>
+      </div>
+      <div class="col-xs-6">
+        <div class="panel">
+          <div class="panel-body">
+            <router-view></router-view>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import Banner from "@/components/Banner.vue";
+
+export default {
+  name: "App",
+  components: {Banner}
+}
+</script>

20_脚手架/vue_code/37.src_组件内路由守卫/main.js

@@ -0,0 +1,23 @@
+// 引入Vue
+import Vue from "vue";
+// 引入App
+import App from "./App";
+// 引入VueRouter
+import VueRouter from "vue-router";
+// 引入router
+import router from "@/router";
+
+// 设置Vue
+Vue.config.productionTip = false
+
+// 使用插件
+Vue.use(VueRouter)
+
+// 实例化Vue
+new Vue({
+    components: {
+        App
+    },
+    render: h => h(App),
+    router: router,
+}).$mount('#app')

20_脚手架/vue_code/37.src_组件内路由守卫/pages/About.vue

@@ -0,0 +1,38 @@
+<template>
+  <h2>我是About的内容</h2>
+</template>
+
+<script>
+export default {
+  name: "About",
+  mounted() {
+    console.log('About组件挂着完成', this)
+    window.aboutRoute = this.$route
+    window.aboutRouter = this.$router
+  },
+  beforeDestroy() {
+    console.log('About组件即将销毁')
+  },
+  // 通过路由规则进入该组件时被调用
+  beforeRouteEnter(to, from, next) {
+    console.log('APP---beforeRouteEnter')
+    if (to.meta.isAuth){
+      if (localStorage.getItem('school') === 'atguigu') {
+        next()
+      }else{
+        alert('学校名称错误，无权查看！')
+      }
+    }else{
+      next()
+    }
+  },
+  // 通过路由规则离开该组件时被调用
+  // beforeRouteLeave(to, from, next) {
+  //
+  // }
+}
+</script>
+
+<style scoped>
+
+</style>