vue3--生命周期

参考：https://blog.csdn.net/qq_42445025/article/details/121978510

主要Vue生命周期事件被分为两个钩子，分别在事件之前和之后调用，vue应用程序中有4个主要事件(8个钩子)：

创建 ---- 在组建创建时执行
挂载 ---- DOM被挂载时执行
更新 ---- 当响应数据被修改时执行
销毁 ---- 在元素被销毁之前立即执行
在【options API】中，生命周期钩子是被暴露在vue实例上的选项，我们只需要调用使用即可。

在【composition API】中，我们需要将生命周期钩子导入项目，然后才能使用。

import {onMounted} from 'vue'

在这里，beforecreate和created被setup方法本身所替代，我们在在setup中将会访问到9个生命周期：

onBeforeMount：在挂载之前被调用，渲染函数render首次被调用

onMounted：组件挂载时调用

onBeforeUpdate：数据更新时调用，发生在虚拟DOM打补丁之前。

onUpdated：因数据更改导致的虚拟DOM重新渲染和打补丁时调用

onBeforeUnmount：在卸载组件实例之前调用，此阶段的实例依旧是正常的。

onActivated：被keep-alive缓存的组件激活时调用

onDeactivated：被keep-alive缓存的组件停用时调用

onErrorCaptured：当捕获一个来自子孙组件的错误时被调用，有三个参数：错误对象、发生错误的组件实例、一个包含错误来源信息的字符串；此钩子会返回false来阻止改错误继续向上传播。

代码：
app:

<template>
  <!-- vue3的组件中的模板结构可以没有根标签 -->
  <h1>一个人的信息</h1>
  <h2>姓名：{{person.name}}</h2>
  <h2>年龄：{{person.age}}</h2>
  <h2>工作:{{person.job.type}}</h2>
  <h2>薪水：{{person.job.salary}}</h2>
  <h2>爱好：{{person.hobby}}</h2>
  <button @click="changeInfo">修改人的信息</button>
  <!-- <Demo @hello="showHelloMsg" msg="你好啊">
    <template v-slot:qwe>
      <span>春风霓裳</span>
    </template>
  </Demo> -->
  <WatchDemo/>
   <button @click="isShowDemo = !isShowDemo">切换隐藏/显示</button>
   <LiveCycleDemo v-if="isShowDemo"/>
</template>

<script>
import { ref, reactive } from "vue";
import Demo from "./components/Demo";
import WatchDemo from "./components/WatchDemo";
import LiveCycleDemo from "./components/LiceCycleDemo";
export default {
  name: "App",
  components: { Demo,WatchDemo,LiveCycleDemo },
  // // vue2的写法
  // data() {
  //   return {

  //   }
  // },
  // methods: {

  // },
  //
  // 此处测试一下setup,暂时不考虑响应式
  setup() {
    // 数据
    // let name = ref('张三')
    // let age = ref(18)
    // // let job = ref({
    // //     type:'前端工程师',
    // //     salary:'30k'
    // //   })
    //  let job = reactive({
    //     type:'前端工程师',
    //     salary:'30k'
    //   })
    //   let hobby = reactive(['抽烟','喝酒','烫头'])
    let isShowDemo = ref(true)
    let person = reactive({
      name: "张三",
      age: 18,
      job: {
        type: "前端工程师",
        salary: "30k",
      },
      hobby: ["抽烟", "喝酒", "烫头"],
    });

    // 方法
    function changeInfo() {
      person.name = "李四";
      person.age = 48;
      // job.value.type = 'UI设计师'
      person.job.type = "UI设计师";
      console.log(person);
      // console.log(name,age)
      person.hobby[0] = "学习";
    }
    function showHelloMsg(value) {
      alert(`你触发了hello事件，我收到的参数是：${value}`);
    }

    return {
      // name,
      // age,
      // job,
      // hobby,
      person,
      changeInfo,
      showHelloMsg,
      isShowDemo,
    };
  },
};
</script>

<style>
</style>

demo:

<template>
<h2>当前求和为：{{sum}}</h2>
<button @click="sum++">点我加一</button>
</template>

<script>
import { ref, reactive, onBeforeMount,onMounted,onBeforeUpdate,onUpdated,
onBeforeUnmount,onUnmounted} from "vue";
export default {
  name: "LiveCycleDemo",
  setup(){

    console.log('------------setup-------------------')
    // 数据
    let sum = ref(0)

//  通过组合api形式写生命周期钩子
       onBeforeMount(()=>{
          console.log('------------onBeforeMount------------')
       }),
       onMounted(()=>{
        console.log('------------onMounted------------')
       }),
       onBeforeUpdate(()=>{
        console.log('------------onBeforeUpdate------------')
       }),
       onUpdated(()=>{
        console.log('------------onUpdated------------')
       }),
       onBeforeUnmount(()=>{
        console.log('------------onBeforeUnmount------------')
       }),
       onUnmounted(()=>{
        console.log('------------onUnmounted------------')
       })

    // 返回一个对象（常用）
    return {
      sum,
    }


  },
  // #region
  // 通过配置项形式写生命周期钩子
//   beforeCreate() {
//     console.log('-----------beforeCreate-------------');
//   },
//  created() {
//     console.log('-----------created-------------');
//   },
//    beforeMount() {
//     console.log('-----------beforeMount-------------');
//    },
//    mounted() {
//     console.log('-----------mounted-------------');
//   },
//    beforeUpdate() {
//     console.log('-----------beforeUpdate-------------');
//   },
//    updated() {
//     console.log('-----------updated-------------');
//   },
//    beforeUnmount() {
//     console.log('-----------beforeUnmount-------------');
//   },
//    unmounted() {
//     console.log('-----------unmounted-------------');
//   }
  // #endregion

}
</script>

结果：