Vue进阶（三十七）：created、mounted等钩子函数整理

文章目录

一、钩子函数
二、Vue 中的钩子函数
三、拓展阅读

一、钩子函数

钩子函数是Windows消息处理机制的一部分，通过设置“钩子”，应用程序可以在系统级对所有消息、事件进行过滤，访问在正常情况下无法访问的消息。钩子的本质是一段用以处理系统消息的程序，通过系统调用，把它挂入系统。

二、Vue 中的钩子函数

对于前端来说，钩子函数就是指在所有函数执行前，优先执行了的函数，即钩住感兴趣的函数，只要它执行，函数就先执行。

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.mapconsole.log('444444'+this.map);var vector = new ol.layer.Vector({source: this.source});this.map.addLayer(vector);}},methods:{   //监听方法  click事件等，执行drawFeatures方法drawFeatures:function(drawType){}
}

created: html加载完成之前执行。执行顺序：父组件-子组件；

mounted: html加载完成后执行。执行顺序：子组件-父组件；

methods：事件方法执行；

watch：watch是去监听一个值的变化，然后执行相对应的函数；

computed：computed是计算属性，也就是依赖其它的属性计算所得出最后的值；

三、拓展阅读

《Vue进阶（三十六）：created() 详解》
《Vue进阶（三十五）：watch 监听函数详解》

Vue进阶（三十七）：created、mounted等钩子函数整理相关推荐

Vue 路由知识三(过渡动画及路由钩子函数)
路由的过渡动画:让路由有过渡动画,需要在<router-view>标签的外部添加<transition>标签,标签还需要一个name属性. <transition nam ...
vue createApp()，mount()，生命周期钩子函数执行顺序
之前一直以为在调用createApp()时执行beforeCreate.created这两个钩子函数,在mount()时才执行beforeMount.mounted这两个钩子函数但实际上,在crea ...
vue的生命周期（11个钩子函数）看了都能懂的
1.vue的生命周期 Vue生命周期是指vue实例对象从创建之初到销毁的过程,vue所有功能的实现都是围绕其生命周期进行的,在生命周期的不同阶段调用对应的钩子函数可以实现组件数据管理和DOM渲染两大重 ...
Vue 分别使用过渡类名 animate.css 钩子函数等实现动画效果
1. 使用过渡类名实现动画 v-enter: 进入之前元素的起始状态,还没有进入 v-enter-to: 定义进入过渡的结束状态 v-enter-active:定义进入过渡生效时的状态 v-leave ...
Python进阶(三十七)Windows7使用nginx+apache部署django项目
文章目录一.前言二.nginx安装三.初识fastcgi 一.前言 Django的部署可以有很多方式,采用nginx+uwsgi的方式是其中比较常见的一种方式. 目前国内各大门户网站已经部署了n ...
Java进阶(三十七)java 自动装箱与拆箱
java 自动装箱与拆箱是jdk1.5以后才引入的新的内容.java语言规范中说道:在许多情况下包装与解包装是由编译器自行完成的(在这种情况下包装称为装箱,解包装称为拆箱): 其实按照我自己的理解自动 ...
网站开发进阶(三十七)JSP页面跳转问题解决
JSP页面跳转问题解决 PS:本篇博文质量欠佳,仅供个人学习之用. 前言在做Web开发时,对别人的应用(jsp+servlet)进行服务器部署时出现了页面跳转无效的情况.但是项目在本地未出现此状况. ...
AngularJS进阶(三十七)IE浏览器兼容性后续
IE浏览器兼容性后续前言继续尝试解决IE浏览器兼容性问题,结局方案为更换jquery.angularjs.IE的版本. 1.首先尝试更换jquery版本为1.7.2 jquery-1.9.1.js ...
vue --- 动画执行的周期(动画的钩子函数)
如下8个: <transitionv-on:before-enter = "beforeEnter"v-on:enter = "enter"v-on:af ...

Vue进阶（三十七）：created、mounted等钩子函数整理

文章目录

一、钩子函数

二、Vue 中的钩子函数

三、拓展阅读

Vue进阶（三十七）：created、mounted等钩子函数整理相关推荐

最新文章

热门文章