目录
1.onMounted()
2.onUpdated()
生命周期的作用，页面加载的时候，主动执行某些程序。生命周期钩子有很多种，每一种都是有顺序的，如果不按照顺序执行的话，那么就不会触发某种效果，所以先要了解生命周期钩子函数的顺序。
以下是官网提供的生命周期图示
其中说2个主要使用的生命周期钩子，onMounted和onUpdated
组合式 API：生命周期钩子 | Vue.js 官网也有其他生命周期钩子介绍。
1.onMounted()
比setup还要晚一点，setup先执行，onMounted后执行。可以理解为在setup中，setup中的顺序是从上到下依次执行的，当setup中的所有代码都执行完毕了，然后立即执行onMounted，可以用于页面初始化后的操作，如弹框的作用等等。
代码
<script setup>
import {
ref,
onMounted
} from 'vue'
console.log('setup启动')
const a = ref('onMounted启动')
onMounted(() => {
console.log(a.value)
})
console.log('setup启动11')
</script>
<template>
</template>
效果
2.onUpdated()
当绑定的数据有变化的时候，就会触发。
代码
<script setup>
import {
ref,
onUpdated
} from 'vue'
const count = ref(0)
onUpdated(() => {
// 文本内容应该与当前的 `count.value` 一致 document.getElementById('count').textContent
console.log('onUpdated:' + count.value)
})
</script>
<template>
<input v-model="count" />
</template>
效果
这个有点类似监听器watch的效果，但是他们2个还是有区别的。
onUpdated
1.每次只要有对应的数据更新，都会进入这个方法中执行统同样的代码。
2.执行它的之前，变量和界面都已经变化了。
watch
1.只监听你写的变量的的值。
2.仅仅是数据发生改变的时候会侦听到。
