色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

vue mounted 箭頭函數

張吉惟2年前9瀏覽0評論

在Vue中,mounted生命周期鉤子函數在組件掛載到DOM上后立即調用。在這個階段,我們能夠在組件內部拿到DOM元素,訪問數據,調用方法等。.

在Vue中,常用的是ES6的箭頭函數。使用箭頭函數的好處是可以綁定this指向,同時可以保持函數內外部作用域的一致性,避免了常規函數使用時this指向全局變量而造成的錯誤。

mounted(){
const vm = this;
window.addEventListener('resize',()=>{
vm.getWindowSize(); //箭頭函數中this指向組件實例
})
}

可以看到,在mounted生命周期函數中,我們可以使用箭頭函數來添加事件監聽器等。

Vue內部默認綁定了DOM元素。通過$refs訪問DOM元素。我們可以在mounted中使用$refs來綁定DOM元素。需要注意的是,$refs只有在組件渲染完畢后才能使用,因此要在mounted鉤子函數中進行操作。

mounted(){
const title = this.$refs.title; //訪問DOM元素
title.style.color = 'red'; 
}

在mounted鉤子函數中,還可以進行一些特殊操作。比如在mounted中通過axios請求數據,并將數據綁定到組件中。

mounted(){
axios.get('/api/data').then((res)=>{
this.data = res.data;
})
}

需要注意的是,如果在mounted函數中的異步請求未完成,那么組件的數據仍然是不健全的,因此在使用數據時要做好判斷和處理。

在mounted中可以調用vuex的action,觸發異步操作。

mounted(){
this.$store.dispatch('getdata');
}

通過調用action,可以對Vuex的狀態進行異步修改。

在mounted生命周期函數中,還可以對組件進行一些特殊處理,比如對表格進行初始化操作,對圖片進行懶加載等。

綜上所述,在Vue中mounted鉤子函數提供了很多在組件掛載到DOM上后立即進行操作的機會,我們可以在其中使用箭頭函數來綁定this指向,使用$refs來訪問DOM元素,進行特殊操作等。需要注意的是,mounted鉤子函數中的異步操作需要注意數據的健全性。