Vue生命周期钩子函数加载顺序的理解
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生命周期钩子函数加载顺序的理解的更多相关文章
- Vue生命周期 钩子函数和组件传值
Vue生命周期 钩子函数 每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听.编译模板.将实例挂载到 DOM 并在数据变化时更新 DOM 等. 同时在这个过程中也会运行一 ...
- 关于 vue 生命周期 钩子函数 事件
vue实例有一个完整的生命周期,也就是从开始创建.初始化数据.编译模板.挂载Dom.渲染->更新->渲染.卸载等一系列过程,我们称这是vue的生命周期. 通俗的将就是vue实例从创建到销毁 ...
- 对vue生命周期/钩子函数的理解
对于实现页面逻辑交互等效果,我们必须知晓vue的生命周期,才能愉快的玩耍,知道我们写的东西应该挂载到哪里,vue官方给出的api讲解的那叫一个简单啊,如下: 所有的生命周期钩子自动绑定this上下文到 ...
- vue生命周期 钩子函数
首先,1.x和2.x的生命周期钩子对比: 钩子函数的树状图,红色的是我们可以利用的函数,绿色的是函数解析,蓝色的是函数执行时机 <!DOCTYPE html> <html> & ...
- vue 生命周期钩子函数
实例中的生命周期钩子可以分为以下8种情况: beforeCreate: 实例刚被创建,vue所有属性都还不存在 created: 实例创建完成,但$el还不存在 beforeMount:挂载之前 mo ...
- vue生命周期钩子函数详解
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net/qq_35585701/article/ ...
- VueRouter和Vue生命周期(钩子函数)
一.vue-router路由 1.介绍 vue-router是Vue的路由系统,用于定位资源的,在页面不刷新的情况下切换页面内容.类似于a标签,实际上在页面上展示出来的也是a标签,是锚点.router ...
- vue生命周期钩子函数
<template> <div> <h2>this is from C.vue</h2> </div> </template> ...
- vue之生命周期钩子函数之运用
一.什么是生命周期钩子函数: 每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听.编译模板.将实例挂载到 DOM 并在数据变化时更新 DOM 等.同时在这个过程中也会运行 ...
随机推荐
- xposed获取context 的方法
// 应用被加壳,采用这种方式加载类 try { XposedHelpers.findAndHookMethod(Application.class, "attach", Cont ...
- 对WAF的一些认知
WAF分为非嵌入型与嵌入型, 非嵌入型指的是硬WAF.云WAF.虚拟机WAF之类的:嵌入型指的是web容器模块类型WAF.代码层WAF.非嵌入型对WEB流量的解析完全是靠自身的,而嵌入型的WAF拿到的 ...
- navicat远程连接mysql错误
确保端口与服务正常. 如果都正常,那么服务有可能没有添加远程访问. 本人链接报错10060,那么问题出在阿里云的主机默认不开放3306端口,那么在安全组策略中加入对应的端口 登录后输入 use m ...
- Scrapy 中常用的中间件和管道组件
Pipeline用法 储存到MongoDB pipline.py中的代码 import pymongo class MongoPipeline(object): def __init__(self, ...
- RAM disk
Linux 系统创建RAM disk 参考: https://blog.csdn.net/linuxdashencom/article/details/52319671 https://www.lin ...
- 虚拟机mysql报错的问题
Can't connect to local MySQL server through socket '/var/lib/mysql/mysql.sock' (111)解决方法 登陆mysql的时 ...
- APP中的第三方“支付”功能测试建议
目前市场上APP中带有支付功能的产品有非常多,那么APP中带有第三方支付功能的产品在这一模块该如何测试才尽可能的确保测试完整性. 正常流程: 正常使用支付宝.微信.银行卡(目前使用最多的第三方支付方式 ...
- Django hrf:权限、频率控制
一.权限 二.频率控制 一.权限 1.权限介绍 只有超级用户才能访问指定的数据,所以就要用权限组件进行设置 2.局部使用 # 单独抽出写一个视图类 from rest_framework.permis ...
- Linux基本命令-chmod
chmod命令用来变更文件或目录的权限.在UNIX系统家族里,文件或目录权限的控制分别以读取.写入.执行3种一般权限来区分,另有3种特殊权限可供运用.用户可以使用chmod指令去变更文件 ...
- idou老师带你认识Istio13:Istio实现基础认证策略
前言 微服务架构提供了更好的灵活性.可伸缩性以及服务复用的能力,但,微服务也有特殊的安全需求,Istio Security尝试提供全面的安全解决方案.为了提供灵活的服务访问控制,需要双向 TLS 和细 ...