七.组合式API-生命周期
1.vue3中的生命周期是组件从创建到销毁的一个过程，在这个过程中提供了一些生命周期函数， 在不同的阶段自动调用这些函数，从而可以运用这些函数做一些从初始化的步骤。 2.setup() 在vue3中，setup()的执行顺序要比created和beforeCreate 要早而且更快。看代码，就能很好的发现。例： 在选项式API中的写法
exprot default{
setup(){
},
mounted(){}
}`
在组合式API中的语法糖写法
<script setup>
//导入
import {onMounted} from 'vue'
//使用
onMounted(()=>{
})
</script>
vue3中生命周期函数既然是个函数，还可以多次调用，也就是说可以如下操作，会依次执行。
<script setup>
//导入
import {onMounted} from 'vue'
//使用
onMounted(()=>{
console.log("onMounted1")
})
onMounted(()=>{
console.log("onMounted2")
})
onMounted(()=>{
console.log("onMounted3")
})
这个在vue2中是不能这么操作的。那多次调用有什么作用吗？在一个多人合作的项目中，会很有用。 比如他人写了个onMounted()函数，而且逻辑比较复杂，而当我也需要在onMounted()函数内写逻辑，为保持代码的安全性和开闭原则，这时就可以在他人后面再写个onMounted()函数，就能避免多人合作项目保持代码的安全性和开闭原则，有了很好的作用。 其他的生命周期函数和onMounted()用法是一样的，不在也一一举例。
八.组合式API-模板引用和编译宏
1.通过ref标识就能够获取到真实的dom对象或组件实例对象。如何使用呢？如下：
import {ref} from 'vue'
const spanRef = ref(null);
onMounted(() => {
console.log("spanRef", spanRef.value);
});
===在模板中====
<template>
<span ref="spanRef">使用了ref获取了我</span>
</template>
2.defineExpose() 的作用：默认< script setup>语法糖下组件内部的属性和方法是不开放给父级访问的，如需父级想要访问，就可以使用defineExpose()这个编译宏指定需要公开访问的属性和方法。如下：
import {ref} from 'vue'
//在子组件中，定义和申明可公开访问的属性和方法
const loding = ref(false);
const lodingTrue = () => (loding.value = true);
defineExpose({
lodingTrue,
loding,
});
在父组件中，通过绑定ref，获取到组件实例对象，就可以访问子组件的属性和方法了。这个对封装一个通用的模板非常有用处。
- defineProps()的作用：与defineExpose()类似。好比是vue2中的props。主要用于父传子， 使用如下：
//在子组件中，定义和申明可公开访问的Props属性
const props = defineProps({
massage: String,
title: String,
confim: {
type: String,
default: "提交",
},
});
//接收使用父组件传来的数据
<template>
<div>这是父组件传给我的数据{{massage}}</div>
</template>
===在父组件中给属性赋值。====
<template>
<zzj
massage="这是父组件的数据"
title="修改"
confim="保存"
></zzj>//子组件
</template>
- 还有一个编译宏 defineEmits()，它的作用是暴露子组件中的事件，主要用在子传父。使用如下：
//组件中需要暴露出去的事件 子传父
const emits = defineEmits(["submit"]);
//定义submit事件方法
const submit = () => emits("submit", "子组件的数据");
===在父组件绑定一个事件。====
const onSub = (v) => {
console.log("子组件传给我的", v);
};
<template>
<zzj
@submit="onSub"
></zzj>//子组件
</template>
父组件的@submit事件就是绑定了一个自定义事件，名称需要与子组件中定义的对应。
注意：编译宏函数只能在< script setup>语法糖下使用，而且使用时无需导入。
