在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鉤子函數中的異步操作需要注意數據的健全性。
上一篇c#返回json格式數據
下一篇c#輸出 json