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

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

methods：事件方法執行

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

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

export default {

name: "draw",

data(){ // 定義變量source

return {

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等方法使用小結就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

總結

以上是生活随笔為你收集整理的created写法_在vue中created、mounted等方法使用小结的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。