【无标题】

---

生命周期

---

创建阶段：set up

我们直接console.log就可以了

console.log(“创建”);
挂载阶段：onBeforeMount(挂载前)、onMounted(挂载完毕)

import { onBeforeMount, onMounted } from ‘vue’;
// 挂载前
onBeforeMount(() => {
console.log(“挂载前”);
})
// 挂载完毕
onBeforeMount(() => {
console.log(“挂载完毕”);
})
更新阶段:onBeforeUpdate(更新前)、onUpdated(更新完毕)

<template>
    <div>
        sum值为:{{ sum }}
    </div>
    <button @click="countSum">sum+1<tton>
</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><yle>

卸载阶段:onBeforeUnmount(卸载前)、onUnmounted(卸载完毕)
我们可以使用v-if去做测试

// 卸载前
onBeforeUnmount(() => {
console.log(“卸载前”);
})
// 卸载完毕
onUnmounted(() => {
console.log(“卸载完毕”);
})

ref、reactive
<template>
    <div>sum的值为：{{ sum }}</div>
    <button @click="add">sum+1<tton>
    <div>姓名：{{ obj.name }}</div>
    <button @click="changeName">修改姓名为李四<tton>
</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><yle>

reactive的基本使用与注意事项

<div>姓名：{{ obj.name }}</div>
  	<button @click="changeName">修改姓名为李四<button>

<script setup lang="ts" name="Person">
import { reactive } from 'vue';
// 我们也可以用在对象上
const obj = reactive({
    name: "张三"
})
// reactive就不像ref一样，不需要使用到.value
function changeName() {
    // 修改姓名 直接obj.name
    // obj.name = "李四"
    // 我们也可以使用到Object.assign 这是我们想把对象整体改掉时写的
    Object.assign(obj, { name: "李四" })
}
</script>
<style scoped><yle>

使用规则：
若需要一个基本类型的响应式数据，必须用ref
若需要一个响应式对象，层级不深，ref、reactive 都可以
若需要一个响应式对象，且层级较深，推荐使用reactive