前端培訓丁鹿學堂：vue3組合式api入門（一）

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 中定義和使用數據

1. 引入vue3 提供的ref方法，可以把數據轉成響應式的
2. 使用vue3提供的setup函數把數據和方法組合起來使用。
3. 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>