本文为个人学习笔记整理，仅供交流参考，非专业教学资料，内容请自行甄别
一、Vue生命周期
Vue 的生命周期是指一个 Vue 实例从创建、挂载、更新到销毁的整个过程。Vue 提供了多个生命周期钩子，可以在这些钩子函数中执行特定逻辑，比如发起请求、DOM 操作、清理定时器等。
主要包含created、mounted、updated和destroyed，以及对应的before，一共八个状态。
beforeCreate -> created
beforeMount -> mounted
beforeUpdate -> updated
beforeDestroy -> destroyed
<script setup lang="ts">
import {onBeforeMount, onBeforeUpdate, onMounted, onUpdated, ref} from "vue";
let count = ref(0);
function addCount() {
count.value++;
}
//生命周期钩子函数
//挂载
onBeforeMount(() => {
console.log("挂载前 btn01按钮：" + document.getElementById("btn01"))
console.log("挂载前 count：" + count.value)
})
onMounted(() => {
console.log("挂载完成 btn01按钮：" + document.getElementById("btn01"))
console.log("挂载完成 count：" + count.value)
})
//更新
onBeforeUpdate(() => {
console.log("更新前 btn01内容：" + document.getElementById("btn01").innerHTML)
console.log("更新前 count：" + count.value)
})
onUpdated(() => {
console.log("更新完 btn01内容：" + document.getElementById("btn01").innerHTML)
console.log("更新完 count：" + count.value)
})
</script>
<template>
<button id="btn01" @click="addCount">点了:{{ count }}</button>
</template>
<style scoped>
</style>
挂载前的阶段，变量的值有，但是元素的值没有。当挂载完成后，才能获取到元素的值。
点击页面上的按钮，触发更新前和更新完成的生命钩子，在更新前，变量的值实际上已经发生了改变，但是元素上的值并没有更改，只有触发更新完成的事件后，元素上的值才会发生改变。
二、父子组件传值
2.1、父组件传值子组件
父组件给子组件传值，是单向数据流，即父组件的值只会对子组件产生影响，如果需要父组件传值给子组件，在父组件中需要引入子组件，并且指定需要传给子组件的属性：
<script setup lang="ts">
import {ref} from "vue";
import Son from "./Son.vue";
let money = ref(100)
let text = ref(['青天明镜映红尘', '度世舟上望苦海', '逍遥自在终超脱','彼岸之中看苍生'])
function moneyMinis(data) {
money.value = money.value - data
}
</script>
<template>
<div>
<h2>Father</h2>
<!-- 父组件传递给子组件，单向数据流-->
<Son :money="money" :text="text" @buy="moneyMinis"></Son>
<button @click="money += 100">充值</button>
</div>
</template>
<style scoped>
</style>
子组件如果需要接收父组件的值，则需要通过defineProps定义父组件传值的属性名：
<script setup lang="ts">
let props = defineProps(['money', 'text']);
</script>
<template>
<div style="background-color: #2fffa5">
<h3>Son</h3>
<div>接收到父组件:{{ props.money }}</div>
<div>接收到父组件:
<h2>
<li v-for="(f,i) in props.text">{{ f }}</li>
</h2>
</div>
</div>
</template>
<style scoped>
</style>
2.2、子组件传值子组件
子组件给父组件传值，首先子组件需要使用defineEmits定义传值的事件名，然后使用emits进行传值。案例中是子组件有一个"扣款"的按钮，点击后触发buy函数，利用buy函数中的emits向父组件传值：
<script setup lang="ts">
let props = defineProps(['money', 'text']);
// 给父组件传值
let emits = defineEmits(['buy']);
function buy() {
emits('buy', 5)
}
</script>
<template>
<div style="background-color: #2fffa5">
<h3>
Son
</h3>
<div>接收到父组件:{{ props.money }}</div>
<div>接收到父组件:
<h2>
<li v-for="(f,i) in props.text">{{ f }}</li>
</h2>
</div>
<div>
<button @click="buy">扣款</button>
</div>
</div>
</template>
<style scoped>
</style>
在父组件中，通过@子组件的defineEmits中定义的事件名，绑定一个函数，在函数中接收子组件传递的值，并且进行操作：
<script setup lang="ts">
import {ref} from "vue";
import Son from "./Son.vue";
let money = ref(100)
let text = ref(['青天明镜映红尘', '度世舟上望苦海', '逍遥自在终超脱','彼岸之中看苍生'])
function moneyMinis(data) {
money.value = money.value - data
}
</script>
<template>
<div>
<h2>Father</h2>
<!-- 父组件传递给子组件，单向数据流-->
<Son :money="money" :text="text" @buy="moneyMinis"></Son>
<button @click="money += 100">test</button>
</div>
</template>
<style scoped>
</style>
三、Slot插槽
如果父子组件之间，想要传递一些自定义的内容，可以使用插槽，例如子组件的标题想要使用父组件提供的，在子组件中可以使用slot标签，指定属性名：
<h3>
<slot name="title"/>
</h3>
然后在父组件中通过template的v-slot指令指定属性名，这样template标签中的值会传递给子组件。
<template v-slot:title>
Son
</template>