关于vue的钩子函数

mounted

只会执行一次，除非组件卸载之后，再重新挂载

• 可以通过v-if修改判定条件，让组件卸载之后，再重新挂载，达到多次执行mounted的目的
• 可以通过修改组件的key值，达到多次执行mounted的目的

updated

会执行多次，只要和界面渲染相关的组件实例变量被修改之后，都会触发updated函数

如下情况不会触发updated钩子函数

直接通过js的dom方法修改界面元素属性，而非通过vue组件实例变量修改，则不会触发updated方法。示例代码如下

<!--

@author: pan
@createDate: 2022-11-28 17:04
-->
<script setup lang="ts">
import { onMounted, onUpdated, ref } from 'vue'

const color = ref<string>('red')
const divElRef = ref<HTMLDivElement>()
const personInfo = ref({ name: '张三', age: 12 })

function onChangeColor(colorVal: string) {
  console.log(colorVal)
  if (colorVal === 'green') {
    color.value = colorVal
  } else {
    divElRef.value!.style.color = colorVal
  }
}

onUpdated(() => {
  console.log('onUpdated')
})
onMounted(() => {
  console.log('onMounted')
})
function onChangeAge(tmpAge: number) {
  console.log(tmpAge)
  personInfo.value.age = tmpAge
}
</script>

<template>
  <div>
    <van-button type="primary" @click="onChangeColor('green')">
      修改颜色为绿色(通过vue改)
    </van-button>
    <van-button type="primary" @click="onChangeColor('blue')">
      修改颜色为蓝色(通过js改)
    </van-button>
    <van-button type="primary" @click="onChangeAge(32)">
      修改年龄(通过vue改，但年龄与界面渲染无关)
    </van-button>
    <div ref="divElRef" :style="{ color }">OnUpdatedTest</div>
    <div>{{ personInfo.name }}</div>
  </div>
</template>

<style lang="scss" scoped></style>

该代码修改了文字颜色，当使用vue组件实例变量修改文字颜色时，会触发updated方法，当直接通过dom.style.color='red'修改时，不会触发updated钩子方法

某个变量是vue组件实例变量，但该变量与界面渲染无关，则不会触发updated方法。示例代码如下

<!--

@author: pan
@createDate: 2022-11-28 17:04
-->
<script setup lang="ts">
import { onMounted, onUpdated, ref } from 'vue'

const color = ref<string>('red')
const divElRef = ref<HTMLDivElement>()
const personInfo = ref({ name: '张三', age: 12 })

function onChangeColor(colorVal: string) {
  console.log(colorVal)
  if (colorVal === 'green') {
    color.value = colorVal
  } else {
    divElRef.value!.style.color = colorVal
  }
}

onUpdated(() => {
  console.log('onUpdated')
})
onMounted(() => {
  console.log('onMounted')
})
function onChangeAge(tmpAge: number) {
  console.log(tmpAge)
  personInfo.value.age = tmpAge
}
</script>

<template>
  <div>
    <van-button type="primary" @click="onChangeColor('green')">
      修改颜色为绿色(通过vue改)
    </van-button>
    <van-button type="primary" @click="onChangeColor('blue')">
      修改颜色为蓝色(通过js改)
    </van-button>
    <van-button type="primary" @click="onChangeAge(32)">
      修改年龄(通过vue改，但年龄与界面渲染无关)
    </van-button>
    <div ref="divElRef" :style="{ color }">OnUpdatedTest</div>
    <div>{{ personInfo.name }}</div>
  </div>
</template>

<style lang="scss" scoped></style>

该代码通过按钮点击修改了personInfo的age属性，但age属性没有在界面中使用，则不会触发update钩子函数