Vue3底子看这一篇就够了（万字长篇，附实例代码及结果演示） ...

目录
前言
概述
Vue3组合式api  VS  Vue2选项式api
底子部分
setup
选项式api的风格
组合式api的风格
区别
 响应式数据
ref
reactive
shallowReactive 与 shallowRef 
 盘算属性和监听
 computed 函数
 watch 函数
 watchEffect
生命周期
 响应式数据只读
toRaw 返回代理的源
markRaw 标记对象拒旷世理
provide 与 inject 跨组件传值
判断是否为响应式数据
toRef 和 toRefs 解构响应式数据
 新组件
Fragment
Teleport 
Suspense
组合式函数 
全局的api及指令的变动
结语

---

前言

   vue3已经出了好长一段时间了，近来闲来无事简单学习了一下，新增的东西还是挺多的，写一篇文章来记录一下。
  概述

Vue3组合式api  VS  Vue2选项式api

   谈到 vue3，首先想到的就是组合式api，很大程度的解决了vue2选项式api的缺点，那有啥缺点？当文件中的业务代码非常多的时间，阅读修改代码的时间好坏常痛楚的，data,method，watch另有盘算属性之间来回跳转, 我已经准备拔刀了。
  下面这些图被疯转，很形象的展现了vue2和vue3的区别，可以看到组合式api就是将单个功能的状态，方法，盘算属性等等必要用到的东西都组合在一起抽离成一个hook，也就是对应图4的function，终极再统一引入组合到一起。这样做的利益就是单个功能的代码都在一起，方便调式修改。
  

 

 

底子部分

setup

   setup是vue3的一个新的配置项，只在初始化的时间实验一次，所有的组合式函数都在此使用。setup可以在选项式api的风格中使用也可以通过组合式api的风格 。通过代码简单对比一下。vue3推荐使用组合式。
  选项式api的风格

1. <script>
2. import { ref } from 'vue'
3. export default {
4.   setup() {
5.     const sum = ref(1)
6.     return {
7.       sum,
8.     }
9.   },
10. }
11. </script>
13. <template>
14.   <div>
15.     <h1>v3</h1>
16.     <h3>{{ sum }}</h3>
17.     <button @click="sum++">+1</button>
18.   </div>
19. </template>
21. <style scoped></style>

复制代码

组合式api的风格

1. <script setup>
2. import { ref } from 'vue'
3. const sum = ref(1)
4. </script>
6. <template>
7.   <div>
8.     <h1>v3</h1>
9.     <h3>{{ sum }}</h3>
10.     <button @click="sum++">+1</button>
11.   </div>
12. </template>
14. <style scoped></style>

复制代码

区别

• <script setup>中的导入和顶层变量/函数都能够在模板中直接使用, 选项式则必要导出
  
• <script setup>打包出来的体积更小
  
• <script setup>对ts更友好
  

   官网介绍的比较具体，感兴趣可以查看组合式 API 常见问答 | Vue.js 
   响应式数据

   vue2中 data 函数返回的对象就是响应式的数据，但是在增加删除对象属性时不是响应式的，当然vue2中也有对应的解决方法，this.$set(), this.$delete(), 其实这也能够理解，究竟vue2的响应式式基于 Object.defineProperty 实现的，这个函数只提供了 get 和 set 以及一些描述符 descriptor，并没有提供 add 和 delete 方法。
  vue3中的响应式包含了两种形态, ref（底层还是Object.defineProperty举行数据挟制, 处理简单数据范例），reactive（使用es6的Proxy举行数据挟制，处理复杂数据范例），完全修复了vue2响应式的痛点，vue3的响应式更加的友好。
  ref

   ref 接受一个值，返回一个响应式对象，一样平常用来处理简单数据范例的响应式，但如果传入的值是对象 ref 会告急 reactive，返回RefImpl的实例简称ref对象。 此时可能会有疑惑，既然ref是一个响应式的对象，为什么模板中能正常剖析。这是由于在剖析templete时碰到ref对象会自动取其value属性，但是如果要在方法中修改ref创建的响应式数据，你的写法应该是这样的 state.value = xxx

1. <script setup>
2. import { ref } from 'vue'
3. const sum = ref(1)
4. function add() {
5.   sum.value++
6. }
7. </script>
9. <template>
10.   <div>
11.     <h1>v3</h1>
12.     <h3>{{ sum }}</h3>
13.     <button @click="add">+1</button>
14.   </div>
15. </template>
17. <style scoped></style>

复制代码

reactive

   为对象做深层!!!!响应式代理, 也就是如果对象有多层依旧是响应式的，返回一个Proxy实例， 如果传入一个字符串大概数字，它将不是响应式的。Proxy 对象用于创建一个对象的代理，从而实现基本操作的拦截和自界说（如属性查找、赋值、枚举、函数调用等）Proxy - JavaScript | MDN。Vue使用 Proxy 举行数据挟制, Reflect 举行反射修改 Reflect - JavaScript | MDN
  

1. <script setup>
2. import { reactive } from 'vue'
3. const person = reactive({
4.   name: '张三',
5.   age: 12,
6.   job: {
7.     j1: {
8.       jname: '前端开发',
9.     },
10.   },
11. })
13. function add() {
14.   person.hobby = ['唱', '跳', 'rap']
15. }
16. function deleteHB() {
17.   delete person.hobby
18. }
19. </script>
21. <template>
22.   <div>
23.     <h1>v3</h1>
24.     <h1>{{ sum }}</h1>
25.     <h3>姓名:{{ person.name }}</h3>
26.     <h3>年龄:{{ person.age }}</h3>
27.     <h3>工作:{{ person.job.j1.jname }}</h3>
28.     <h3 v-if="person.hobby">爱好: {{ person.hobby }}</h3>
29.     <button @click="person.name += '-'">修改姓名</button>
30.     <button @click="person.age++">修改年龄</button>
31.     <button @click="person.job.j1.jname += '!'">修改工作</button>
32.     <button @click="add">增加爱好</button>
33.     <button @click="deleteHB">删除爱好</button>
34.   </div>
35. </template>
37. <style scoped></style>

复制代码

shallowReactive 与 shallowRef 

   shallowRef 直译过来意思是浅层的 ref，shallowRef 传入对象不会告急 reactive，仅仅对ref对象的 value 属性具有响应式。
  shallowReactive 只处理对象第一层的响应式,  如果修改了深层的数据页面是不会响应的，但是会在下次页面更新中渲染出来。
  

1. <script setup>
2. import { shallowReactive, shallowRef, ref, reactive } from 'vue'
3. const shallowRef_jack = shallowRef({ name: 'jack', sex: '女' })
4. const shallowReactive_ben = shallowReactive({
5.   name: 'ben',
6.   sex: '女',
7.   child: {
8.     son: {
9.       name: '张三',
10.     },
11.   },
12. })
14. const ref_jack = ref({ name: 'jack', sex: '女' })
15. const reactive_ben = reactive({
16.   name: 'ben',
17.   sex: '女',
18.   child: {
19.     son: {
20.       name: '张三',
21.     },
22.   },
23. })
24. </script>
26. <template>
27.   <div>
28.     <h1>v3</h1>
29.     <h3>
30.       shallowRef_jack: {{ shallowRef_jack }}
31.       <button @click="shallowRef_jack = {}">修改整个对象</button>
32.       <button @click="shallowRef_jack.name += '!'">修改对象属性</button>
33.     </h3>
34.     <h3>
35.       ref_jack: {{ ref_jack }}
36.       <button @click="ref_jack = {}">修改整个对象</button>
37.       <button @click="ref_jack.name += '!'">修改对象属性</button>
38.     </h3>
39.     <h3>
40.       shallowReactive_ben: {{ shallowReactive_ben }}
41.       <button @click="shallowReactive_ben.child.son.name = '!'">
42.         修改对象的第三层属性
43.       </button>
44.       <button @click="shallowReactive_ben.name += '!'">
45.         修改对象第一层属性
46.       </button>
47.     </h3>
48.     <h3>
49.       reactive_ben: {{ reactive_ben }}
50.       <button @click="reactive_ben.child.son.name += '!'">
51.         修改对象的第三层属性
52.       </button>
53.       <button @click="reactive_ben.name += '!'">修改对象第一层属性</button>
54.     </h3>
55.   </div>
56. </template>
58. <style scoped>
59. h3 {
60.   font-size: 26px;
61.   border: 1px solid #ccc;
62.   padding: 20px;
63.   margin: 20px;
64. }
65. button {
66.   float: right;
67.   padding: 10px;
68.   font-size: 20px;
69. }
70. </style>

复制代码

 盘算属性和监听

 computed 函数

   盘算属性有两种写法，作用和vue2一样，通过监听某个值的变化盘算出一个新值
  

• 只读的写法 ：computed(() => xxxxxx)，
  
• 可读可写的写法:  computed({ get: () => xxxx, set: (val) => { xxxx } })
  

1. <script setup>
2. import { ref, computed } from 'vue'
3. const count = ref(1)
4. const num1 = computed(() => count.value + 1)
5. const num2 = computed({
6.   get() {
7.     return count.value + 1
8.   },
9.   set(val) {
10.     count.value = val + 1
11.   },
12. })
13. </script>
15. <template>
16.   <div>
17.     <h1>v3</h1>
18.     <h2>
19.       ref 定义的 count: {{ count }} <button @click="count++">count++</button>
20.     </h2>
21.     <h2>计算属性 num1: {{ num1 }} <button @click="num1++">num1++</button></h2>
22.     <h2>计算属性 num2: {{ num2 }} <button @click="num2++">num2++</button></h2>
23.   </div>
24. </template>
26. <style scoped></style>

复制代码

 watch 函数

   watch 函数用来监听数据的变化，和vue2大要上都是相同的。
  参数列表：
  

• 参数1为必要监听的响应式对象（可以是单个对象，也可以是一个数组，也可以是一个getter函数），
  
• 参数2为监听对象发生变化时所实验的回调
  
• 参数3是一些配置项：immediate是否开启立刻监听，deep是否开启深度监听，flush回调的触发机遇，onTrack / onTrigger用于调试的两个函数
  

   

留意点： 

• 直接监听 reactive 界说的响应式对象默认开启了深度监听
  
• 通过 getter 形式监听响应式对象默认是浅层监听
  

1. <script setup>
2. import { reactive, ref, watch } from 'vue'
3. const count = ref(1)
4. const person = reactive({
5.   name: 'ben',
6.   child: {
7.     son: {
8.       name: 'zs',
9.     },
10.   },
11. })
12. // 监听 ref 对象
13. watch(count, (val, preVal) => {
14.   console.log('count变化了', val, preVal)
15. })
16. // 监听 reactive  定义的响应式对象
17. watch(person, (val, preVal) => {
18.   console.log('person变化了', val, preVal)
19. })
20. watch([count, person], (val, preVal) => {
21.   console.log('person变化了或count变化了', val, preVal)
22. })
23. </script>
25. <template>
26.   <div>
27.     <h1>v3</h1>
28.     <h2>
29.       ref 定义的 count: {{ count }} <button @click="count++">count++</button>
30.     </h2>
31.     <h2>
32.       reactive 定义的 person: {{ person }}
33.       <button @click="person.name += '!'">修改姓名</button>
34.       <button @click="person.child.son.name += '___'">修改儿子姓名</button>
35.     </h2>
36.   </div>
37. </template>
39. <style scoped></style>

复制代码

 watchEffect

   watchEffect 函数用于监听传入的函数内访问的所有响应式数据的变化。白话一点就是回调里我用了谁我就监听谁，监听ref界说的响应式数据时，不要忘记 .value ，哥们就是这么智能。
  watch 和 watchEffect 都是监听数据变化的函数，和 react 中的 useState 放入依靠项有着异曲同工之妙。
  例子：切换下拉框中的 name ，模拟哀求后台接口 

1. <script setup>
2. import { onMounted, reactive, ref, watchEffect } from 'vue'
3. const name = ref('jack')
4. const info = [
5.   {
6.     id: 1,
7.     name: 'jack',
8.     child: {
9.       son: {
10.         name: 'zs',
11.       },
12.     },
13.   },
14.   {
15.     id: 2,
16.     name: 'ben',
17.     child: {
18.       son: {
19.         name: 'zs',
20.       },
21.     },
22.   },
23. ]
24. let data = ref([])
25. async function getInfoByName(name) {
26.   const res = await new Promise((reslove) => {
27.     setTimeout(() => {
28.       reslove(info.filter((item) => item.name === name))
29.     }, 500)
30.   })
31.   data.value = res
32. }
34. watchEffect(async () => {
35.   getInfoByName(name.value)
36. })
37. </script>
39. <template>
40.   <div>
41.     <h1>v3</h1>
42.     <el-select v-model="name" placeholder="请选择">
43.       <el-option
44.         v-for="item in info"
45.         :key="item.name"
46.         :label="item.name"
47.         :value="item.name"
48.       >
49.       </el-option>
50.     </el-select>
51.     <div v-for="item in data" :key="item.id">
52.       {{ item.name }}的个人信息 {{ item }}
53.     </div>
54.   </div>
55. </template>
57. <style scoped></style>

复制代码

生命周期

   vue3的生命周期稍有变动，增加了 setup 钩子，且销毁前和销毁后的钩子命名更改为 beforeUnmount 和 unmounted，以下代码是验证的一些示例
  App.vue 

1. <script setup>
2. import Demo from './Demo.vue'
3. import Demo2 from './Demo2.vue'
4. import { ref } from 'vue'
5. const isComDestory = ref(true)
6. const isOptionDestory = ref(true)
7. </script>
9. <template>
10.   <div>
11.     <h1>
12.       v3
13.       <button @click="isComDestory = false">引入组合式子组件</button>
14.       <button @click="isComDestory = true">销毁组合式子组件</button>
15.       <button @click="isOptionDestory = false">引入选项式子组件</button>
16.       <button @click="isOptionDestory = true">销毁选项式子组件</button>
17.     </h1>
18.     <Demo v-if="!isComDestory"></Demo>
19.     <Demo2 v-if="!isOptionDestory"></Demo2>
20.   </div>
21. </template>
23. <style scoped>
24. button {
25.   padding: 20px;
26.   font-size: 16px;
27. }
28. </style>

复制代码

Demo.vue 

1. <script setup>
2. import {
3.   onMounted,
4.   onBeforeMount,
5.   onBeforeUpdate,
6.   onUpdated,
7.   onBeforeUnmount,
8.   onUnmounted,
9.   ref,
10. } from 'vue'
11. const sum = ref(1)
12. console.log('子组件1 setup')
13. onBeforeMount(() => {
14.   console.log('子组件1 onBeforeMount')
15. })
16. onMounted(() => {
17.   console.log('子组件1 onMounted')
18. })
19. onBeforeUpdate(() => {
20.   console.log('子组件1 onBeforeUpdate')
21. })
22. onUpdated(() => {
23.   console.log('子组件1 onUpdated')
24. })
25. onBeforeUnmount(() => {
26.   console.log('子组件1 onBeforeUnmount')
27. })
28. onUnmounted(() => {
29.   console.log('子组件1 onUnmounted')
30. })
31. </script>
33. <template>
34.   <div>
35.     <h2>我是子组件1</h2>
36.     <h2>{{ sum }} <button @click="sum++">+1</button></h2>
37.   </div>
38. </template>
40. <style scoped>
41. div {
42.   border: 1px solid #ccc;
43. }
44. </style>

复制代码

Demo2.vue

1. <script>
2. import { ref } from 'vue'
4. export default {
5.   setup() {
6.     const sum = ref(1)
7.     console.log('子组件2 setup')
8.     return { sum }
9.   },
10.   beforeCreate() {
11.     console.log('子组件2 beforeCreate')
12.   },
13.   created() {
14.     console.log('子组件2 created')
15.   },
16.   beforeMount() {
17.     console.log('子组件2 beforeMount')
18.   },
19.   mounted() {
20.     console.log('子组件2 mounted')
21.   },
22.   beforeUpdate() {
23.     console.log('子组件2 beforeUpdate')
24.   },
25.   updated() {
26.     console.log('子组件2 updated')
27.   },
28.   beforeUnmount() {
29.     console.log('子组件2 beforeUnmount')
30.   },
31.   unmounted() {
32.     console.log('子组件2 unmounted')
33.   },
34. }
35. </script>
37. <template>
38.   <div>
39.     <h2>我是子组件2</h2>
40.     <h2>{{ sum }} <button @click="sum++">+1</button></h2>
41.   </div>
42. </template>
44. <style scoped>
45. div {
46.   border: 1px solid #ccc;
47. }
48. </style>

复制代码

由于录频录不了控制台，打印结果看下图

 

 响应式数据只读

   vue3提供了两个api，限制响应式数据为只读，不可修改。分别为 readonly（深层只读） 和shallowReadonly （浅层只读）
  

1. <script setup>
2. import { ref, reactive, readonly, shallowReadonly } from 'vue'
3. const sum = readonly(ref(1))
4. const p1 = readonly(
5.   reactive({
6.     name: 'ben',
7.     child: {
8.       son: {
9.         name: 'jack',
10.       },
11.     },
12.   })
13. )
14. const p2 = shallowReadonly(
15.   reactive({
16.     name: 'ben',
17.     child: {
18.       son: {
19.         name: 'jack',
20.       },
21.     },
22.   })
23. )
24. function edit() {
25.   sum.value = 2
26.   p1.name += '!'
27.   p1.child.son.name += '&'
28. }
29. function editShallow() {
30.   p2.name += '!'
31.   p2.child.son.name += '&'
32. }
33. </script>
35. <template>
36.   <div>
37.     <h1>v3</h1>
38.     <h2>readonly: {{ sum }}</h2>
39.     <h2>readonly: {{ p1 }}</h2>
40.     <h2>shallowReadonly: {{ p2 }}</h2>
41.     <button @click="edit">修改深层只读数据</button>
42.     <button @click="editShallow">修改浅层只读数据</button>
43.   </div>
44. </template>
46. <style scoped></style>

复制代码

toRaw 返回代理的源

   toRaw的功能官网的表明很清晰， 可以返回由 reactive()、readonly()、shallowReactive() 大概 shallowReadonly() 创建的代理对应的原始对象

1. <script setup>
2. import {
3.   ref,
4.   reactive,
5.   readonly,
6.   shallowReadonly,
7.   shallowReactive,
8.   toRaw,
9. } from 'vue'
10. const p1 = readonly(
11.   reactive({
12.     name: 'a',
13.     child: {
14.       son: {
15.         name: 'as',
16.       },
17.     },
18.   })
19. )
20. const p2 = shallowReadonly(
21.   reactive({
22.     name: 'b',
23.     child: {
24.       son: {
25.         name: 'bs',
26.       },
27.     },
28.   })
29. )
30. const p3 = reactive({
31.   name: 'c',
32.   child: {
33.     son: {
34.       name: 'cs',
35.     },
36.   },
37. })
38. const p4 = shallowReactive({
39.   name: 'd',
40.   child: {
41.     son: {
42.       name: 'ds',
43.     },
44.   },
45. })
46. console.log('toRaw p1 readonly', toRaw(p1))
47. console.log('toRaw p2 shallowReadonly', toRaw(p2))
48. console.log('toRaw p3 reactive', toRaw(p3))
49. console.log('toRaw p4 shallowReactive', toRaw(p4))
50. </script>
52. <template>
53.   <div></div>
54. </template>
56. <style scoped></style>

复制代码

markRaw 标记对象拒旷世理

   markRaw（）将对象标记为不可代理，返回其自己。自己上多了一个 __v_skip 属性表示忽略代理。强行代理代理是无效的，返回的还是其自己而不是响应式对象。

1. <script setup>
2. import { markRaw, reactive } from 'vue'
3. const p1 = {
4.   name: 'a',
5.   child: {
6.     son: {
7.       name: 'as',
8.     },
9.   },
10. }
11. const noProxy_p1 = markRaw(p1)
12. console.log('不可代理对象', noProxy_p1)
13. console.log('reactive 代理不可代理对象', reactive(noProxy_p1))
14. </script>
16. <template>
17.   <div></div>
18. </template>
20. <style scoped></style>

复制代码

 provide 与 inject 跨组件传值

   使用 provide 与 inject 举行跨组件传值非常方便。以父子孙为例，父组件 provide ('name',value) 子组件 inject ('name') 即可
  

 父组件

1. <script setup>
2. import { reactive, provide } from 'vue'
3. import Demo from './Demo.vue'
4. const obj = {
5.   name: 'a',
6.   child: {
7.     son: {
8.       name: 'as',
9.     },
10.   },
11. }
12. const person = reactive(obj)
13. provide('person', person)
14. </script>
16. <template>
17.   <div class="father">
18.     <h1>父组件</h1>
19.     <h3>{{ person }}</h3>
20.     <Demo></Demo>
21.   </div>
22. </template>
24. <style scoped>
25. .father {
26.   padding: 10px;
27.   background: orange;
28. }
29. </style>

复制代码

 子组件

1. <script setup>
2. import Demo2 from './Demo2.vue'
3. </script>
5. <template>
6.   <div>
7.     <h2>子组件</h2>
8.     <Demo2></Demo2>
9.   </div>
10. </template>
12. <style scoped>
13. div {
14.   padding: 10px;
15.   background: salmon;
16.   border: 1px solid #ccc;
17. }
18. </style>

复制代码

孙组件

1. <script>
2. import { ref, inject } from 'vue'
3. export default {
4.   setup() {
5.     const person = inject('person')
6.     return { person }
7.   },
8. }
9. </script>
11. <template>
12.   <div class="sonson">
13.     <h2>孙组件</h2>
14.     <h3>{{ person }}</h3>
15.   </div>
16. </template>
18. <style scoped>
19. .sonson {
20.   background: sandybrown;
21.   border: 1px solid #ccc;
22. }
23. </style>

复制代码

判断是否为响应式数据

   

• isRef（data）判断data是否是通过ref创建的响应式数据
  
• isReactive（data）判断data是否是通过reactive创建的响应式数据
  
• isReadonly（data）判断data是否是通过readOnly创建的只读数据
  
• isProxy（data）判断data是否为Proxy代理对象
  

  

1. <script setup>
2. import {
3.   reactive,
4.   readonly,
5.   ref,
6.   isProxy,
7.   isReactive,
8.   isRef,
9.   isReadonly,
10. } from 'vue'
11. const person = reactive({
12.   name: 'a',
13.   child: {
14.     son: {
15.       name: 'as',
16.     },
17.   },
18. })
19. const num = ref(1)
20. const str = readonly(ref('str'))
21. console.log(isRef(num))
22. console.log(isReactive(person))
23. console.log(isReadonly(str))
24. console.log(isProxy(person), isProxy(str))
25. </script>
27. <template></template>
29. <style scoped></style>

复制代码

toRef 和 toRefs 解构响应式数据

   当响应式对象的属性过多且页面用到很多次的时间， toRef 和 toRefs 可以举行响应式解构，解构出来的数据依旧具备响应式的本领。下面的例子是在 <script setup> 中举行演示的，setup（）中的必要显示的返回
   toRef

1. <script setup>
2. import { reactive, toRef } from 'vue'
3. const person = reactive({
4.   name: 'a',
5.   age: 18,
6.   child: {
7.     son: {
8.       name: 'as',
9.     },
10.   },
11. })
12. const personName = toRef(person, 'name')
13. const personAge = toRef(person, 'age')
14. const personSonName = toRef(person.child.son, 'name')
15. </script>
17. <template>
18.   <div>
19.     <h3>toRef 解构出 person的name ----- {{ personName }}</h3>
20.     <h3>toRef 解构出 person的age ----- {{ personAge }}</h3>
21.     <h3>toRef 解构出 person的child的son的name ----- {{ personSonName }}</h3>
22.     <h3>toRef 解构出 person的name ----- {{ personName }}</h3>
23.     <h3>toRef 解构出 person的age ----- {{ personAge }}</h3>
24.     <h3>toRef 解构出 person的child的son的name ----- {{ personSonName }}</h3>
25.     <h3>toRef 解构出 person的name ----- {{ personName }}</h3>
26.     <h3>toRef 解构出 person的age ----- {{ personAge }}</h3>
27.     <h3>toRef 解构出 person的child的son的name ----- {{ personSonName }}</h3>
28.     <button @click="personName += '!'">修改person的name</button>
29.     <button @click="personAge += 1">修改person的age</button>
30.     <button @click="personSonName += '*'">person的child的son的name</button>
31.   </div>
32. </template>
34. <style scoped></style>

复制代码

 

 toRefs

1. <script setup>
2. import { reactive, toRefs } from 'vue'
3. const person = reactive({
4.   name: 'a',
5.   age: 18,
6.   child: {
7.     son: {
8.       name: 'as',
9.     },
10.   },
11. })
12. const { name, age, child } = toRefs(person)
13. </script>
15. <template>
16.   <div>
17.     <h3>toRefs 解构出 person的name ----- {{ name }}</h3>
18.     <h3>toRefs 解构出 person的age ----- {{ age }}</h3>
19.     <h3>toRefs 解构出 person的child的son的name ----- {{ child.son.name }}</h3>
20.     <h3>toRefs 解构出 person的name ----- {{ name }}</h3>
21.     <h3>toRefs 解构出 person的age ----- {{ age }}</h3>
22.     <h3>toRefs 解构出 person的child的son的name ----- {{ child.son.name }}</h3>
23.     <h3>toRefs 解构出 person的name ----- {{ name }}</h3>
24.     <h3>toRefs 解构出 person的age ----- {{ age }}</h3>
25.     <h3>toRefs 解构出 person的child的son的name ----- {{ child.son.name }}</h3>
26.     <button @click="name += '!'">修改person的name</button>
27.     <button @click="age += 1">修改person的age</button>
28.     <button @click="child.son.name += '*'">person的child的son的name</button>
29.   </div>
30. </template>
32. <style scoped></style>

复制代码

 新组件

Fragment

   在vue2中模板标签内必须包裹一层根标签，vue3中则不必要。vue3会为多个跟标签包裹一层Fragment。这是写法上的优化。前面很多例子的代码中我都包裹了一层根标签，这是由于我的编辑器的eslint的题目，去掉根标签也可以正常运行。
  有根标签的编译结果

 没有根标签的编译结果

Teleport 

   Teleport 组件的功能是将元素渲染到任意的页面位置中，直接扣过来官网的例子。
  下列代码主要表达的是：点击按钮将弹框插入到 body 标签下 
 ModalButton.vue

1. <template>
2.   <button @click="modalOpen = true">
3.     Open full screen modal! (With teleport!)
4.   </button>
6.   <teleport to="body">
7.     <div v-if="modalOpen" class="modal">
8.       <div>
9.         I'm a teleported modal! (My parent is "body")
10.         <button @click="modalOpen = false">Close</button>
11.       </div>
12.     </div>
13.   </teleport>
14. </template>
16. <script>
17. import { ref } from 'vue'
18. export default {
19.   name: 'modal-button',
20.   setup() {
21.     const modalOpen = ref(false)
22.     return {
23.       modalOpen,
24.     }
25.   },
26. }
27. </script>
29. <style>
30. .modal {
31.   position: absolute;
32.   top: 0;
33.   right: 0;
34.   bottom: 0;
35.   left: 0;
36.   background-color: rgba(0, 0, 0, 0.5);
37.   display: flex;
38.   flex-direction: column;
39.   align-items: center;
40.   justify-content: center;
41. }
43. .modal div {
44.   display: flex;
45.   flex-direction: column;
46.   align-items: center;
47.   justify-content: center;
48.   background-color: white;
49.   width: 300px;
50.   height: 300px;
51.   padding: 5px;
52. }
53. </style>

复制代码

 App.vue

1. <template>
2.   <h2>App</h2>
3.   <modal-button></modal-button>
4. </template>
6. <script lang="ts">
7. import ModalButton from './ModalButton.vue'
9. export default {
10.   setup() {
11.     return {}
12.   },
14.   components: {
15.     ModalButton,
16.   },
17. }
18. </script>

复制代码

 

Suspense

   Suspense 组件用于将异步组件包裹，提供一个过渡UI在异步完成之前。
  Suspense 组件提供两个插槽：
  

• #default   默认插槽 存放异步组件
  
• #fallback  备用插槽 存放过渡UI
  

  异步组件：
  

• 带有异步 setup() 钩子的组件。这也包含了使用 <script setup> 时有顶层 await 表达式的组件。
  
• defineAsyncComponent
  

   App.vue

1. <template>
2.   <div>
3.     <h2>App</h2>
4.     <Suspense>
5.       <Demo></Demo>
6.       <template #fallback> 加载中.... </template>
7.     </Suspense>
8.   </div>
9. </template>
11. <script setup>
12. import Demo from './Demo.vue'
13. </script>

复制代码

 Demo.vue

1. <script setup>
2. const res = await new Promise((resolve) => {
3.   setTimeout(() => {
4.     resolve({ name: 'zs', age: 12, sex: '男' })
5.   }, 1000)
6. })
7. </script>
9. <template>
10.   <div>
11.     <h2>异步组件</h2>
12.     <h3>{{ res }}</h3>
13.   </div>
14. </template>
16. <style scoped>
17. div {
18.   padding: 10px;
19.   background: salmon;
20.   border: 1px solid #ccc;
21. }
22. </style>

复制代码

组合式函数 

   组合式api的优点之一式将单个功能代码组合在一起，如果是可以复用的逻辑，那么可以抽离为一个组合式函数大概称为自界说hook，在必要该逻辑的地方导入即可
  例子：提供一个组合函数，此函数在当前组件中监听鼠标移动事件，并将坐标显示出来，组件卸载前清掉事件。
App.vue

1. <template>
2.   <div>
3.     <h2>App</h2>
4.     <h2>
5.       <button @click="Demo1Visible = false">销毁子组件1</button>
6.       <button @click="Demo2Visible = false">销毁子组件2</button>
7.     </h2>
8.     <Demo v-if="Demo1Visible"></Demo>
9.     <Demo2 v-if="Demo2Visible"></Demo2>
10.   </div>
11. </template>
13. <script setup>
14. import { ref } from 'vue'
15. import Demo from './Demo.vue'
16. import Demo2 from './Demo2.vue'
17. const Demo1Visible = ref(true)
18. const Demo2Visible = ref(true)
19. </script>

复制代码

Demo1.vue

1. <template>
2.   <div class="demo_1">
3.     <h2>子组件1</h2>
4.     <p v-if="x && y">x坐标为 {{ x }}, y坐标为{{ y }}</p>
5.   </div>
6. </template>
7. <script setup>
8. import useMouse from './mouse'
9. const { x, y } = useMouse('.demo_1')
10. </script>
12. <style scoped>
13. .demo_1 {
14.   height: 100px;
15.   background: salmon;
16. }
17. </style>

复制代码

Demo2.vue 

1. <template>
2.   <div class="demo_2">
3.     <h2>子组件2</h2>
4.     <p v-if="x && y">x坐标为 {{ x }}, y坐标为{{ y }}</p>
5.   </div>
6. </template>
7. <script setup>
8. import useMouse from './mouse'
9. const { x, y } = useMouse('.demo_2')
10. </script>
12. <style scoped>
13. .demo_2 {
14.   height: 100px;
15.   background: salmon;
16. }
17. </style>

复制代码

 

全局的api及指令的变动

   API 参考 | Vue.js，大家先自行参考，后续深入学习时再举行更新。
  结语

   

• 如果想在 vue3 中使用 element，请下载 element-plus
  
• vue3 的文档是最全的。Vue.js - 渐进式 JavaScript 框架 | Vue.js
  

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。