vue中methods、mounted等使用方法整理

最新推荐文章于 2024-09-03 20:09:51 发布

姚华军

最新推荐文章于 2024-09-03 20:09:51 发布

阅读量3.2w

点赞数 15

分类专栏： vue开发文章标签： js vue

本文链接：https://blog.csdn.net/yhj_911/article/details/86523632

版权

vue开发专栏收录该内容

12 篇文章 1 订阅

订阅专栏

本文详细介绍了Vue.js中的关键生命周期钩子，包括created、mounted、watch和methods的使用场景与执行顺序。通过实例展示了如何利用这些钩子实现地图图层的动态加载与更新，以及如何监听属性变化以响应式地调整地图显示。

摘要由CSDN通过智能技术生成

created:html加载完成之前，执行。执行顺序:父组件-子组件
mounted:html加载完成后执行。执行顺序:子组件-父组件
methods:事件方法执行。
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){}
	}
}