vue3学习day03-vue3的生命周期、父子通信、模版引用、defineExpose

11、vue3的生命周期

（1）Vue2中生命周期：

beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed

（2）选项式API的生命周期：

BeforeCreate/created、beforeMount、mounted、beforeUpdate、updated、

beforeUnmount、unmounted

（3）组合式API的生命周期：

setup、onBeforeMount、onmounted、onBeforeUpdate、onUpdated、

onBeforeUnmount、onUnmounted

（4）注：

1）其中beforeDestroy、destroyed在选项式API中变为beforeUnmount、unmounted

2）生命周期的变化影响代码的书写位置，比如在Vue2中beforeCreate、created写的代码需要写在vue3中的setup中

12、父子通信

（1）父传子

1）建立父子关系（进行局部注册）

①导入

②使用

2）父组件传值

3）子组件接收props（在接收过程中，需要借助编译器宏defineProps原理）

4）注

①defineProps原理：编译阶段的一个标识，实际编译器解析时，遇到后会进行编译转换

（2）子传父

1）子组件绑定方法

2）触发需要emit属性，vue3没有，通过编译器宏defineEmits实现定义

3）子组件定义方法，在方法内进行触发事件

4）父组件监听子组件触发的事件

5）父组件定义方法，解决需要修改的数据

6）效果

点击按钮：

13、模版引用

（1）概念：通过ref标识，获取真实的dom对象，或组件实例对象

（2）语法：

已知：

1）调用ref生成空对象

①导入ref

②生成ref对象

2）通过ref标识，把ref对象绑定到标签

3）通过设置对应方法调用

4）效果

14、defineExpose

（1）作用：指定哪些属性和方法允许访问（默认情况下在<script setup>语法糖下组件内部的属性和方法是不开放给父组件访问的）

（2）语法：

已知：

父组件：

子组件：

使用defineExpose（{}）：

效果：