人命周期彩娱乐登陆网址
Vue 3的人命周期钩子比拟Vue 2有所调治，提供了更明晰和纯简直选项。它们包括：onBeforeMount、onMounted、onBeforeUpdate、onUpdated、onBeforeUnmount、onUnmounted，以及新增的setup()函数，它发生在所有这个词人命周期钩子之前。人命周期即是一个页面从无到有再到无的一个经过。
vue中的页面从无到有资历了一个什么经过呢？在Vue中，页面从无到有的经过触及将.vue单文献组件编译成JavaScript渲染函数，然后通过构建用具（如Webpack）打包成浏览器可施行的代码。这些代码在浏览器中加载后，Vue实例被创建，使用实例的$mount循序将Vue哄骗挂载到指定的DOM元素上，临了通过Vue的反映式系统来渲染和更新页面内容，大略如下。
setup()
基本结构：
很多人都希望在炫目耀眼的外表之下，拥有一个幸福的家庭。
<script> export default { setup(){ // 进口函数 const message ='hello world' return{ message } } } </script>
在 setup 中，咱们不错使用 Vue 3 提供的多个用具函数来界说反映式数据、监听人命周期钩子、护士规划属性、声明事件护士函数等。这些函数包括：
reactive：用于创建反映式对象ref：用于创建一个单一的反映式值computed：用于创建规划属性watch：用于监听反映式数据的变化onMounted、onUpdated 和 onUnmounted：用于监听人命周期钩子toRefs：用于将反映式对象改造为平素对象
onBeforeMount/onMounted
onBeforeMount/onMounted辞别示意组件挂载之前和之后施行，onbeforeMount会在组件挂载到DOM结构前施行，onMounted会在组件挂载后施行，是以要是说思获得 dom 结构的话，就需要在组件挂载到html上才气获得到。如下获得dom结构；
xml代码解读复制代码<template> <div if="box" ref="boxRef"></div> </template> <script> import { onBeforeMount, onMounted, ref } from 'vue'; export default { setup() { // 进口函数 const boxRef = ref(null) onMounted(() => { console.log('onMounted', boxRef.value) // 挂载后施行 }) onBeforeMount(() => { console.log('onBeforeMounted', boxRef.value) // 挂载前施行 }) return { boxRef } } } </script>
因为获得dom结构是document.xxx去获得彩娱乐登陆网址，只须出咫尺html中的代码才算是document文档，vue中的代码在挂载前还莫得还莫得生成html文档，是以弗成获得dom结构，即 onBeforeMount 是在组件挂载到DOM结构前施行。
然则要是一通达页面就发送一个http苦求，那这个http苦求应该放在挂载前已经挂载后，由于js引擎线程和http线程是不错同期责任，是以放在挂载前或挂载后齐不错。
然则表面上是弗成放在挂载前的，但骨子上不错。要是放在挂载前，且在挂载前的函数中有操作dom结构的代码，如下。
xml代码解读复制代码<script> import { onBeforeMount, onMounted, ref } from 'vue'; import axios from 'axios'; export default { setup() { // 进口函数 const boxRef = ref(null) onBeforeMount(() => { axios.get('https://mock.mengxuegu.com/mock/66585c4db462b81cb3916d3e/songer/songer#!method=get') .then((res) => { console.log(res); }) }) return { boxRef } } }
如示，为什么又不错拿到dom结构了呢？这是因为http苦求需要耗时，骨子上浏览器的挂载速率齐比http苦求快，在http苦求完后组件早就挂载收场，这时辰就不错获得到dom结构了，然则假定一种极点情况，http苦求更快，彩娱乐浏览器还没挂载完设置获得dom结构，那么打听或操作dom就会出问题了，是以一般是将http苦求放在onMounted内部。
onBeforeUpdate/onUpdated
onBeforeUpdate/onUpdated辞别示意组件更新之前和组件更新之后。
xml代码解读复制代码<template> <button @click="add">Add - {{ count }}</button> </template> <script> import { onBeforeUpdate, onUpdated } from 'vue' export default { setup() { // 进口函数 let count = ref(0) onBeforeUpdate(() => { console.log('onBeforeUpdate') }) onUpdated(() => { console.log('onUpdated') }) const add = () => { count.value++ } return { add, count } } } </script>
即组件更新了就会触发onBeforeUpdate/onUpdated函数施行。
然则要是count莫得放在组件上，也即是莫得导致组件更新，仅仅count这个值在变化，onBeforeUpdate/onUpdated就不会触发，如下所示。
xml代码解读复制代码<template> <button @click="add"> Add </button> </template> <script> import { onMounted, onBeforeMount, ref, onBeforeUpdate, onUpdated } from 'vue' export default { setup() { // 进口函数 let count = ref(0) onBeforeUpdate(() => { console.log('onBeforeUpdate') }) onUpdated(() => { console.log('onUpdated') }) const add = () => { count.value++ } return { add, count } } }
是以 onBeforeUpdate/onUpdated 是在因某个变量值改变导致组件更新才施行。
onBeforeUnmount/onUnmounted
onBeforeUnmount/onUnmounted 指在组件卸载前前或卸载后施行。
是以咱们再创建一个子组件Child.vue，然后将它引入到App.vue中，再对这个子组件进行卸载操作，如下。
Child.vue文献中 <template> <div> <h1>child</h1> </div> </template> <script setup> import { onBeforeMount, onMounted, onBeforeUnmount, onUnmounted } from 'vue' onBeforeUnmount(() => { console.log('onBeforeUnmount --- 卸载前') }) onUnmounted(() => { console.log('onUnmounted --- 卸载后') }) </script>
App.vue文献中 <template> <Child v-if="showChild"></Child> <button @click="showChild = !showChild">hide child</button> </template> <script> import Child from './components/Child.vue' import { ref } from 'vue' export default { components: { Child // 注册 Child 组件 }, setup() { // 进口函数 let showChild = ref(true) return { showChild } } } </script>
需要防护要是不使用封装好的setup，如上引入组件时就需要components: {Child}注册组件，然后给子组件v-if绑定showChild值为止其存在或删除。打印如下；
然则要是将v-if改成v-show的话，就不会施行onBeforeUnmount/onUnmounted，如下；
这是因为v-show并莫得将组件卸载，而是将组件上头的景况改为display:none，不披露在页面上，然则其dom结构还在，就不会触发onBeforeUnmount/onUnmounted函数。
临了要是父组件和子组件中齐有挂载函数，那么施行轨则为父挂载前，子挂载前，子挂载后，父挂载后。
这个就相配好融会了，比如要装一个快递，准备大箱子（父组件 onBeforeMount），然后准备小箱子（子组件 onBeforeMount），接着将物品放入小箱子（子组件 onMounted），临了关闭并完成大箱子的打包（父组件 onMounted）
转头
转头来说，Vue 3的人命周期钩子为莳植者提供了细粒度的为止，使得咱们不错在组件的不同阶段进行特定的操作。从组件的创建到挂载，再到更新和卸载，每个阶段齐有相应的钩子函数来反映。
onBeforeMount() 组件挂载之前onMounted() 组件挂载之后 -- 获得 dom 结构onBeforeUpdate() 某个变量值改变导致 组件更新之前onUpdated() 某个变量值改变导致 组件更新之后onBeforeunmount() 组件卸载之前onUnmounted() 组件卸载之后彩娱乐登陆网址