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

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

methods：事件方法執(zhí)行

watch：watch是去監(jiān)聽(tīng)一個(gè)值的變化，然后執(zhí)行相對(duì)應(yīng)的函數(shù)。

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

export default { name: 'draw', data(){ // 定義變量sourcereturn { source:new ol.source.Vector({wrapX: false}), } }, props:{ //接收父組件傳遞過(guò)來(lái)的參數(shù) map:{ //type:String }, },mounted(){ //頁(yè)面初始化方法 if (map==map){ } var vector = new ol.layer.Vector({ source: this.source }); this.map.addLayer(vector); }, watch: { //監(jiān)聽(tīng)值變化：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:{ //監(jiān)聽(tīng)方法 click事件等，執(zhí)行drawFeatures方法 drawFeatures:function(drawType){}}

補(bǔ)充知識(shí)：vue中在mounted中window.onresize不生效

在vue開(kāi)發(fā)中，因?yàn)橐玫母附M件和子組件都使用了window.onresize以至于一個(gè)window.onresize失效。

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

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

以上這篇在vue中created、mounted等方法使用小結(jié)就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持好吧啦網(wǎng)。