在vue中created、mounted等方法使用小結

created：html加載完成之前，執行。執行順序：父組件-子組件

mounted：html加載完成后執行。執行順序：子組件-父組件

methods：事件方法執行

watch：watch是去監聽一個值的變化，然后執行相對應的函數。

computed：computed是計算屬性，也就是依賴其它的屬性計算所得出最后的值

export default { name: 'draw', data(){ // 定義變量sourcereturn { source:new ol.source.Vector({wrapX: false}), } }, props:{ //接收父組件傳遞過來的參數 map:{ //type:String }, },mounted(){ //頁面初始化方法 if (map==map){ } var vector = new ol.layer.Vector({ source: this.source }); this.map.addLayer(vector); }, watch: { //監聽值變化：map值 map:function () { console.log(’3333’+this.map); //return this.map console.log(’444444’+this.map); var vector = new ol.layer.Vector({ source: this.source }); this.map.addLayer(vector); } }, methods:{ //監聽方法 click事件等，執行drawFeatures方法 drawFeatures:function(drawType){}}

補充知識：vue中在mounted中window.onresize不生效

在vue開發中，因為引用的父組件和子組件都使用了window.onresize以至于一個window.onresize失效。

解決方案==>可以采用下面的方式

window.onresize = () => this.screenWidth = window.innerWidth // 改為以下寫法window.addEventListener(’resize’, () => this.screenWidth = window.innerWidth, false)

以上這篇在vue中created、mounted等方法使用小結就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持好吧啦網。