丁鹿學堂講前端 2022-07-23 23:57:11 阅读数:209
vue的組件從沒有到創建,數據變化的更新,顯示隱藏,這不同的階段就是vue的生命周期。
在每個這樣的階段vue提供了一些函數,在這個時候可以進行一些操作,成為生命周期鉤子函數。
beforeCreate 此時不能使用this,this是undefined 了解即可,沒啥大用
created 可以讀到data中的數據,通過this獲取。 可以在created裏發送請求獲取數據。但是不能操作頁面dom的和組件
beforeMount 掛載前 了解即可,沒啥大用
mounted 頁面掛載後,這裏可以操作頁面的組件和dom
boforeUpdate 頁面更新前
updated 頁面更新後
beforeUnmount 組件卸載前
unmounted 組件卸載之後 一般用於清除定時器,播放器關閉以後清除等操作。
compositionAPI就是組合api,vue2的data,methods,是分開寫的。稱為選項api。vue3中采用了組合api。
<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中使用監聽,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