vue的生命周期
vue的组件从没有到创建，数据变化的更新，显示隐藏，这不同的阶段就是vue的生命周期。 在每个这样的阶段vue提供了一些函数，在这个时候可以进行一些操作，成为生命周期钩子函数。
生命周期函数，重要的是created和mounted
beforeCreate 此时不能使用this，this是undefined 了解即可，没啥大用 created 可以读到data中的数据，通过this获取。 可以在created里发送请求获取数据。但是不能操作页面dom的和组件 beforeMount 挂载前 了解即可，没啥大用 mounted 页面挂载后，这里可以操作页面的组件和dom boforeUpdate 页面更新前 updated 页面更新后 beforeUnmount 组件卸载前 unmounted 组件卸载之后 一般用于清除定时器，播放器关闭以后清除等操作。
vue3的composition API
compositionAPI就是组合api，vue2的data，methods，是分开写的。称为选项api。vue3中采用了组合api。
vue3 中定义和使用数据
- 引入vue3 提供的ref方法，可以把数据转成响应式的
- 使用vue3提供的setup函数把数据和方法组合起来使用。
- setup函数要把定义的数据和函数return出去，才可以在模板中使用。函数修改响应式数据num的时候，修改是数据的.value 而在模板中可以直接使用num
<template>
<div>{{num}}</div>
<div @click="add"> add</div>
</template>
<script>
import {ref} from 'vue'
export default {
setup () {
let num = ref(2)
let add = ()=>{
num.value ++
}
return {num,add}
}
}
</script>
vue3组合api中使用watch监听
在vue3中使用监听，watch被vue3封装成了一个函数提供给我们使用，使用之前需要引入 watch作为函数形式引入，第一个参数是我们要监听的值，第二个参数是一个回调函数，参数就是改变的值。当监听值发生改变的时候触发
<template>
<div>{{num}}</div>
<div @click="add"> add</div>
</template>
<script>
import {ref,watch} from 'vue'
export default {
setup () {
let num = ref(2)
let add = ()=>{
num.value ++
}
watch(num,(v)=>{
if(v >5){
num.value = 5
console.log('不能再加了')
}
})
return {num,add}
}
}
</script>
