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. Spring3.2.2中相关Jar包的作用

    今天在看Spring的源码的时候不知道从什么地方开启应该合适,因为不太清楚实现类所在的具体Jar包,就从网上找了些,可是网上有的说的是不清不楚,甚至是有些错误的,所以就把相关Jar包的大致作用给整理了 ...

  2. java入门学习总结_04

    1.循环结构 2.方法 循环结构 概述 1.对于某些需要重复执行的,相同或者相似的语句,使用某种格式来完成对代码的简化. 2.实现的语句: for语句[常用] while语句[常用] do...whi ...

  3. 小白_开始学Scrapy__原理

    整体架构 引擎(Scrapy Engine),用来处理整个系统的数据流处理,触发事务. 调度器(Scheduler),用来接受引擎发过来的请求,压入队列中,并在引擎再次请求的时候返回. 下载器(Dow ...

  4. Java 中的多态,一次讲个够之接口实现关系中的多态

    上文还没有写完,这一篇继续 Java 中的多态,一次讲个够之继承关系中的多态 https://www.cnblogs.com/qianjinyan/p/10824576.html 接口实现关系,和继承 ...

  5. 标准库类型之vector

    上篇中遗留了一个小作业,就是用string中的find_first_not_of和find_last_not_of函数来实现字符串左右空格的去除,先来完成它,实现的思路是先来编写去除左空格,然后再编写 ...

  6. springboot中访问html页面

    springboot中如果想访问html页面,不每访问一个页面就写一个Controller,可以统一写一个公共的controller方法 代码: (1)引入hutool工具依赖 <!-- hut ...

  7. iView的tree组件实现单选功能

    iView中的树组件有复选框可以多选,但是目前还没有提供单选框的模式,不显示复选框可以提供高亮单选的模式,但是再次点击就被取消了,没有实现真正的单选: tree 的属性配置中 multiple 是否支 ...

  8. Height、clientHeight、scrollHeight、offsetHeight 、scrollTop、offsetTop

    Height 返回当前文档中的<body>元素的高度 clientHeight 对于没有定义CSS或者内联布局盒子的元素为0,否则,它是元素内部的高度(单位像素),包含内边距,但不包括水平 ...

  9. django.db.utils.OperationalError: (1050, "Table 'article_category' already exists")

    (转自:https://blog.csdn.net/huanhuanq1209/article/details/77884014) 执行manage.py makemigrations 未提示错误信息 ...

  10. jmeter+ant+jenkins搭建自动化测试环境(基于linux)

    安装CentOS7操作系统 关闭系统防火墙 [root@localhost ~]# systemctl stop firewalld.service [root@localhost ~]# syste ...