vue生命周期

​生命周期
创建阶段：setup
我们直接console.log就可以了
console.log(“创建”);
挂载阶段：
onBeforeMount(挂载前)、
onMounted(挂载完毕)
import { onBeforeMount, onMounted } from ‘vue’;
// 挂载前onBeforeMount(() => { console.log(“挂载前”);})
// 挂载完毕onBeforeMount(() => { console.log(“挂载完毕”);})
更新阶段:onBeforeUpdate(更新前)、onUpdated(更新完毕)

```rust
<template>
<div>sum值为:{{ sum }} 
</div>    
<button @click="countSum">sum+1
</button>
</template>
<script setup lang="ts">import { onBeforeUpdate, onUpdated, ref } from 'vue';let sum = ref(1)function countSum() {    sum.value += 1}
// 更新前onBeforeUpdate(() => {    console.log("更新前");})
// 更新完毕onUpdated(() => {    console.log("更新完毕");})
</script>
<style scoped>
</style>
 卸载阶段:onBeforeUnmount(卸载前)、onUnmounted(卸载完毕)
我们可以使用v-if去做测试
// 卸载前onBeforeUnmount(() => {    console.log("卸载前");})
// 卸载完毕onUnmounted(() => {    console.log("卸载完毕");})ref、reactive
<template> <div>sum的值为：{{ sum }}</div>  
<button @click="add">sum+1</button>    
<div>姓名：{{ obj.name }}</div>  
<button @click="changeName">修改姓名为李四</button>
</template><script setup lang="ts" name="Person">import { ref } from 'vue';
// 我们需要用ref()的形式去定义需要响应式的数据let sum = ref(1)function add() {    
// 注意点，我们需要用到 sum.value才可以获取到值    sum.value += 1}
// 我们也可以用在对象上const obj = ref({    name: "张三"})function changeName() {    
// 对象我们需要使用到obj.value才可以修改数据    obj.value.name = "李四"}</script>
<style scoped>
</style>
reactive的基本使用与注意事项
<template>  
<div>姓名：{{ obj.name }}</div> 
 <button @click="changeName">修改姓名为李四</button>
 </template>

<script setup lang="ts" name="Person">import { reactive } from 'vue';
// 我们也可以用在对象上const obj = reactive({    name: "张三"})
// reactive就不像ref一样，不需要使用到.valuefunction changeName() {    
// 修改姓名 直接obj.name    
// obj.name = "李四"   
 // 我们也可以使用到Object.assign 这是我们想把对象整体改掉时写的    Object.assign(obj, { name: "李四" })}</script>
 <style scoped></style>
使用规则：
若需要一个基本类型的响应式数据，必须用ref
若需要一个响应式对象，层级不深，ref、reactive 都可以
若需要一个响应式对象，且层级较深，推荐使用reactive​