Vue实例有一个完整的生命周期,也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程,我们称这是Vue的生命周期。通俗说就是Vue实例从创建到销毁的过程,就是生命周期。

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中created、mounted等方法整理  https://blog.csdn.net/liudoris/article/details/80255311

Vue生命周期钩子函数加载顺序的理解的更多相关文章

  1. Vue生命周期 钩子函数和组件传值

    Vue生命周期 钩子函数 每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听.编译模板.将实例挂载到 DOM 并在数据变化时更新 DOM 等. 同时在这个过程中也会运行一 ...

  2. 关于 vue 生命周期 钩子函数 事件

    vue实例有一个完整的生命周期,也就是从开始创建.初始化数据.编译模板.挂载Dom.渲染->更新->渲染.卸载等一系列过程,我们称这是vue的生命周期. 通俗的将就是vue实例从创建到销毁 ...

  3. 对vue生命周期/钩子函数的理解

    对于实现页面逻辑交互等效果,我们必须知晓vue的生命周期,才能愉快的玩耍,知道我们写的东西应该挂载到哪里,vue官方给出的api讲解的那叫一个简单啊,如下: 所有的生命周期钩子自动绑定this上下文到 ...

  4. vue生命周期 钩子函数

    首先,1.x和2.x的生命周期钩子对比: 钩子函数的树状图,红色的是我们可以利用的函数,绿色的是函数解析,蓝色的是函数执行时机 <!DOCTYPE html> <html> & ...

  5. vue 生命周期钩子函数

    实例中的生命周期钩子可以分为以下8种情况: beforeCreate: 实例刚被创建,vue所有属性都还不存在 created: 实例创建完成,但$el还不存在 beforeMount:挂载之前 mo ...

  6. vue生命周期钩子函数详解

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net/qq_35585701/article/ ...

  7. VueRouter和Vue生命周期(钩子函数)

    一.vue-router路由 1.介绍 vue-router是Vue的路由系统,用于定位资源的,在页面不刷新的情况下切换页面内容.类似于a标签,实际上在页面上展示出来的也是a标签,是锚点.router ...

  8. vue生命周期钩子函数

    <template> <div> <h2>this is from C.vue</h2> </div> </template> ...

  9. vue之生命周期钩子函数之运用

    一.什么是生命周期钩子函数: 每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听.编译模板.将实例挂载到 DOM 并在数据变化时更新 DOM 等.同时在这个过程中也会运行 ...

随机推荐

  1. leetcode-174. Dungeon Game 地下城游戏

    一道关于骑士救公主故事的题目. 一些恶魔抓住了公主(P)并将她关在了地下城的右下角.地下城是由 M x N 个房间组成的二维网格.我们英勇的骑士(K)最初被安置在左上角的房间里,他必须穿过地下城并通过 ...

  2. 5.创建执行线程的方式之三 :实现Callable 接口

    Callable 接口 一.Java 5.0 在 java.util.concurrent 提供了 一个新的创建执行线程的方式(之前有继承Thread 和 实现Runnable):Callable 接 ...

  3. MySQL 查询大于“时间字段”15分钟、1小时、1天的数据

    以下代码中times为时间字段,类型为datetime 1.查询大于times十五分钟的数据 //大于号后面都是获取times十五分钟后的时间select*from table where now() ...

  4. flume 1.7在windows下的安装部署与测试运行

    一.安装 安装java,配置环境变量. 安装flume,下载地址,下载后直接解压即可. 二.运行 创建配置文件:在解压后的文件 apache-flume-1.7.0-bin\conf下创建一个exam ...

  5. redis集群1

    redis-trib.rb命令详解   redis-trib.rb是官方提供的Redis Cluster的管理工具,无需额外下载,默认位于源码包的src目录下,但因该工具是用ruby开发的,所以需要准 ...

  6. MVC方式显示数据(数据库)

    新建实体数据模型 选择ADO.NET实体数据模型,名称改为数据库名 因为使用现有数据库,所以选择来自数据库的EF设计器,只演示所以只选择一个表,空模型可后期增加表 选择从数据库更新模型 新建数据库连接 ...

  7. 学习笔记:Python序列化常用工具及性能对比

    什么叫序列化?简单来讲就是将内存中的变量数据转而存储到磁盘上或是通过网络传输到远程. 反序列化是指:把变量数据从序列化的对象重新读到内存里. 下面我们一起来看看,python里面序列化常用的json. ...

  8. idou老师教你学Istio 26:如何使用Grafana进行可视化监控

    使用Grafana插件进行监控是Istio提供的监控能力之一.Istio提供丰富的监控能力,Grafana插件在Istio对Prometheus支持的基础上,为用户提供基于网页仪表面板的可视化监控效果 ...

  9. curl、fopen和file_get_contents区别

    curl多用于互联网网页之间的抓取,fopen多用于读取文件,而file_get_contents多用于获取静态页面的内容. 1. fopen /file_get_contents 每次请求都会重新做 ...

  10. jmeter接口测试-使用aes加密算法

    好久没写文章了,一直在忙公司项目的事情!今天抽空写篇关于jmeter加密的教程吧! 随着互联网的发展,越来越多的系统开始提供接口调用! 我们进行接口测试的时候,大多数接口或多或少的都使用了各种加密验证 ...