vue에서created,mounted 등 방법으로 소결 사용하기

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에서 윈도우.onresize가 적용되지 않습니다.
vue 개발에서, 인용된 부모 구성 요소와 하위 구성 요소가 모두 윈도우를 사용했기 때문입니다.onresize는 윈도우까지 가능합니다.onresize 실효.
해결 방안 ==> 다음 방식을 사용할 수 있습니다

window.onresize = () => this.screenWidth = window.innerWidth 
//  
window.addEventListener('resize', () => this.screenWidth = window.innerWidth, false)

이상의 이 편은 vue에서created,mounted 등 방법으로 작은 매듭을 사용하는 것이 바로 여러분에게 공유된 모든 내용입니다. 여러분께 참고가 되고 저희를 많이 사랑해 주시기 바랍니다.