Vue3 组合式api（2）

组合式Api生命周期函数

从创建到销毁的过程

有一点特殊的是：左边第一个在右边第一个是不存在的，在组合式里面没有这两个构造函数

 对比名字发现右面的会加个on

看一下发现可以执行多次，并且按顺序执行。会思考有什么用？

就是比如你拿到别人的代码不敢改就可以找到这个部分然后添加自己的函数因为他是按顺序执行肯定会执行你这个。及不改变原本的结构也不影响新增功能的实现

小结

• 组合式apiu下生命周期函数的格式是什么？

on+生命周期名字

• 组合式api中可以使用onCreated吗？

没有这个钩子函数，直接写到setup中，也就是直接用户setup替代就可以了

• 组合式API中组件卸载完毕时执行哪个函数？

onUnmounted（注意：这里不是Destroyed）

---

父子通信

父传子

最常用的也是最简单的

传递普通数据

注意：

父组件哪里绑定绑定属性是由SonCom的绑定属性message

子组件在接受message的时候注意要让它的数据类型和父组件中message的数据类型保持一致

这里演示传递的是一个静态数据

传递响应式数据：

const声明一个响应式数据第5行，然后在第12行再添加一个绑定的属性count

由于是响应式数据，所以再12行SonCom 后添加冒号

子部件：在5行写出对应的名称和类型

在15行{{count}}

打印结果：

在父组件添加一个延时器突出它是响应式的，打印效果就是开始接收的是100，三秒后变成了200

拓展解释一下： defineProps宏函数

实际上就是一个编译器标识，右边实际上就是之前vue2中的样子，发现这个表示以后会把左边这个代码编译成右边之前熟悉的代码，但是这些操作不需要我们关心

子传父

代码实践

defineEmits是一个宏函数方法

子部件中：emit子函数前面传递的是名字后面传递的数据

结果：

总结：

• 父传子的过程中通过什么方式接收props?

defineProps({属性名:类型})

• setup语法糖中如何使用父组件传过来的数据？

const props = defineProps({属性名：类型})

子传父：

• 子传父的过程中通过什么方式得到emit方法？

defineEmits(['事件名称'])

---

组合式API模板引用

模板引用概念：通过ref标识获取真实的dom对象或者组件实例对象

（实际上就是vue2里面的：通过ref拿到dom元素或者组件实例对象）

以获取dom对象为例子,组件也是同理的

第一步下面这个获得了一个ref对象：h1Ref

完成者两部以后实际上已经把标签h1dom元素已经存到了h1ref里面的.value上

组件挂载完毕才能获取、在onMounted()函数中可以保证挂载完毕

解释一下：为什么明明test中有name和setname,但控制台打印的确实一个内部对象

默认情况下在script setup>语法糖下组件内部的属性和方法是不放开给父组件访问的，可以通过defineExpose的编译宏指定哪些属性和方法允许访问。

写到这个里面就可以暴露出来了

小结：

• 获取模板引用的时机？

组件挂载完毕

• defineExpose编译宏的作用是什么？

显示暴露组件内部的属性和方法

---

组合API中的一对函数-provide和inject

作用和场景

：顶层组件向任意的底层组件传递数据和方法，实现跨层组件通信

例子

room-page与room-msg-comment之间的通信就是跨层通信

顶传底

跨层传递数据两个步骤：

1.顶层组件通过provide函数提供数据

2.底层组件通过inject函数获取数据

提供数据的key要和接收数据的key保持统一

传递的简单的静态数据

那么规矩要看一下传递相响应式数据

把对应的顶层中的数据变成ref对象

同样的用定时器体现一下

出来的结果是会进行变的所以证明了太​​他就是响应式的

底传顶

其实就底层文件调用顶层文件的相关方法，从而实现间接的改写

就相当于传递的方法，与传递数据相类似，继续通过provide把方法传递出去

​​​​接收方法依旧通过变量接收inject收到的方法

目的是为了不破坏单项数据流的前提下依旧可以在底层组件修改顶层组件里面的数据，也就是开始发里面的重要原则：谁的数据谁负责修改

小结：

1.provide和inject的作用是什么？

跨层组件通信

2.如何在传递过程中保持数据响应式？

第二个参数传递ref对象

3.底层组件想要通知顶层组件做修改，如何做？

传递方法，底层组件调用方法

4.一颗组件中只有一个顶层或底层组件吗？

相对概念，存在多个顶层和底层的关系