前端培訓丁鹿學堂:vue3組合式api入門(一)

丁鹿學堂講前端 2022-07-23 23:57:11 阅读数:209

前端vue3vue合式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>
版权声明:本文为[丁鹿學堂講前端]所创,转载请带上原文链接,感谢。 https://gsmany.com/2022/204/202207232356014934.html