钩子函数

一、vue生命周期图示 二、钩子函数执行时间 beforeCreate 在创建实例之前，data只声明但没有赋值 在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。 created 组件创建完成，在实例创建完成后被立即调用 beforeMount 在挂载(DOM)之前被调用：相关的 render 函数首次被调用。 mounted DOM 挂载完成 beforeUpdate 获取原始DOM，准备更新,还没有更新 updated 获取更新之后的DOM，更新之后 beforeDestory 组件销毁之前 destoryed 组件销毁之后 /注意： 定时器的销毁 要在此方法中处理 activated 激活当前组件 vue提供的内置组件<keep-alive></keep-alive> deactivated 停用当前组件 来源： https://www.cnblogs.com/zwq-/p/10216978.html

先附张流程图： 下面前4个钩子函数，就是vue组件生命周期前4个过程，5、6过程是页面渲染完成后还需更新页面(增删改查)的过程，最后两个是删除组件。 beforeCreate: function () { // 这个时候 el 和 data 均没有初始化。 },　　 // 在这之间就是进行data和vue实例属性的初始化 created: function () { // 这个时候 data 和 实例中的属性已经初始化完成， el 还没有初始化。 }, beforeMount: function () { // 这个时候虽然页面没有显示，但已经用虚拟Dom技术占了坑，但是还未挂载到dom }, mounted: function () { // 这个时候页面已经显示。挂载完成 // 常用于页面都已渲染完成后执行的函数 // 注意：mounted不会承诺所有的子组件也都一起被挂载，如果你希望等所有视图都渲染完毕，请写在this.$nextTick()中 this.$nextTick(function () { }) }, beforeUpdate: function () { // Vue实例化完毕且挂载完成后，如果实例中的更改会影响到dom页面的变化，从新制定虚拟Dom }, updated: function () { // 这个时候页面已经更新完毕。 },

directives 在讲解视图层指令时，我们讲到 ref 特性，使用它我们可以获取当前 DOM 元素对象，以便执行相关操作。 <div id="app"> <input ref="ipt" type="text" v-model="value" /> </div> new Vue({ el: "#app", data: { value: '' }, methods: { handleEle() { let ele = this.$refs.ipt // do somthing } } }) 如果某个 DOM 操作在不同组件的元素或组件内多个元素都需要执行，像这样在每个组件里都重复写一遍处理逻辑代码肯定不是好办法。此时我们可以自定义一个指令，在指令钩子函数的回调里复用逻辑代码。 其时，自定义指令的思想还是代码复用的想法，同组件、混入、函数思想一样。 基本使用 根据指令使用范围的不同，你可以将指令定义在全局作用域、实例作用域或单个组件作用域内。 // 在vue全局作用域 vue.directive('name', { bind: function (el, binding,vnode){/* do something */}, inserted: function (el, binding,vnode){/* do something */}, update: function

钩子 原英文名称 Hook ，钩子的意思是指拦截或截获。作用就是拦截程序中交互的数据，先经过我们预定的钩子处理接口程序，处理过后，再交还给原处理程序，或者干脆阻止，吃掉这些数据，让原处理程序什么也得不到。 钩子原来是Windows操作系统常用来检查系统与程序间通信的一些数据是否到达目标时用的，为不传之密，后来随着一些高手们的研究，逐渐的发现了这些秘密的技术并且公布了出来。同时还有更多的人在掌握了这些技术后，用在自已的软件开发中，实现出奇招而超过其它同类软件的功能而赢得市场。。 钩子技术的种类上很多. HOOK API和HOOK技术完全不同。尽管它们都是钩子。HOOK钩的是消息，它在系统将消息传递给应用程序之前截获它，然后进行操作、或修改消息、或停止消息 的传递； 而HOOK API截获的是应用程序对系统API的调用，它在应用程序对系统API的调用之前截获此调用动作，让其转而调用我们所定义的函数（内容可能是进行一些操作 后再调用原系统API）。 关于HOOK技术，微软为我们提供了现成的API，有固定的使用步骤。 而对于HOOK API技术，微软并没有向我们提供类似的API，没有那么简洁的步骤可供我们参考，也许是因为微软并不希望我们用这样的手段编程，所以相对要麻烦一些。 WINDOWS的钩子函数可以认为是WINDOWS的主要特性之一。利用它们，您可以捕捉您自己进程或其它进程发生的事件

接口和钩子 在介绍生命周期的相关概念之前，可以先复习一下TypeScript对于接口的概念。 在这里主要使用的是类接口及其实现： interface ClockInterface { currentTime: Date; } // 该写法表示明确的强制一个Clock类符合ClockInterface接口 // 该接口中currentTime是一个Date类型的数据（并没有实际使用），创造Clock实例时需要传入参数h和m，都是数字类型。 class Clock implements ClockInterface { currentTime: Date; constructor(h: number, m: number) { } } 在Angular中，也针对生命周期的不同时刻给予了一些接口，你可以在代码中强制自己的组件/指令在创建时实现这些接口。 而每个接口都有唯一的一个钩子方法，它们的名字是由接口名再加上ng前缀构成的。比如，OnInit接口的钩子方法叫做ngOnInit，Angular在创建组件后立刻调用它。 接口是可选的？ 由于我们最终执行的代码是JavaScript,而在JS中是没有接口概念的，接口只是用来强化类的概念，经过编译之后接口消失了。 所以如果需要使用生命周期，只要在我们的代码中写上钩子函数即可，Angular会找到并调用像ngOnInit()这样的钩子方法

vue有8种生命周期函数： 钩子函数 触发的行为 在此阶段可以做的事情 beforeCreadted vue实例的挂载元素$el和数据对象data都为undefined，还未初始化。 加loading事件 created vue实例的数据对象data有了，$el还没有 结束loading、请求数据为mounted渲染做准备 beforeMount vue实例的$el和data都初始化了，但还是虚拟的dom节点，具体的data.filter还未替换。 ... mounted vue实例挂载完成，data.filter成功渲染 配合路由钩子使用 beforeUpdate data更新时触发 updated data更新时触发 数据更新时，做一些处理（此处也可以用watch进行观测） beforeDestroy 组件销毁时触发 destroyed 组件销毁时触发，vue实例解除了事件监听以及和dom的绑定（无响应了），但DOM节点依旧存在 组件销毁时进行提示 这里我们用created、updated #生命周期 new Vue({ el:'#app', data:{ username:'1', pwd:'1', cpwd:'2', product:[] }, // 数据初始化之后 created:function () { console.log('created') }, //

一、errorhandler 接收状态吗，可以自定义返回这种状态码的响应的处理办法，如果发生一些异常的时候，比如404、500那么如果想要优雅的处理这些错误，就可以使用errorhandler 注意点： *在errorhandler装饰钩子函数下,要返回响应的状态码 *在errorhandler装饰的钩子函数中，必须要写一个参数,来接收错误的信息,如果没有参数,就会直接报错 *使用flask,abort 可以手动的抛出响应的错误，比如开发者在发现参数不正确的时候可以自己手动抛出一个404错误 示例: 来源： https://www.cnblogs.com/yingxiongguixing/p/12006124.html

一、钩子函数概念： 在Flask中钩子函数是使用特定装饰器装饰的函数.在正常执行中的代码插入一段自己想要执行的代码.那么这种函数就叫做钩子函数。 二、常见钩子函数： 1.before_first_request 处理项目第一此请求之前执行 2.before_request:在每次请求之前。通常可以用这个装饰器来给视图增加一些变量，请求已经到达了flask,但是还没有进入到具体的视图函数之前调用，一般就是在视图函数之前，我们可以把一些后面需要用到的数据先处理好,方便视图函数使用 三、示例： 来源： https://www.cnblogs.com/yingxiongguixing/p/12002164.html

首先抛出这样一个问题，vue-router是用来做什么的？ 这里不着急回答，也不准备在这篇文章里回答。这篇文章仅总结一些使用心得，其实总结完所有关于vue-router的内容后，整篇文章也许就刚好能回答这个问题了。 一 使用步骤 单纯使用Vue.js，我们可以通过组合组件来组成应用，不同的页面有不同的地址，路由依靠链接跳转。这显然不是单页应用，因为会有页面刷新。 当要把vue-router引入进来，我们需要做的是，将组件映射到路由，然后告诉路由在哪里渲染组件内容。 1. HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>vue-router</title> </head> <body> <div id="app"> <h1>Hello World!</h1> <p> <!--页面导航元素，默认被渲染为a标签--> <router-link to="user">toUser</router-link> <!--路由渲染出口，路由匹配到的组件内容全部渲染到该节点下--> <router-view></router-view> </p> </div> <script src="/dist/build.js"></script> </body> </html> 2. JavaScript

钩子函数分为生命周期钩子和路由守卫钩子 生命周期钩子： beforeCreate(){ console.log('组件实例化之前') }, created(){ console.log('组件实例化完毕，单页面还未显示') }, beforeMount(){ console.log('组件挂载前，页面仍未展示，但虚拟Dom已经配置') }, mounted(){ console.log('组件挂在后，此方法执行后，页面显示') }, beforeUpdate(){ console.log('组件更新前，页面仍未更新，但虚拟Dom已经配置') }, updated(){ console.log('组件更新，此方法执行后，页面显示') }, beforeDestroy(){ console.log('组件销毁前') }, destroyed(){ console.log('组件销毁') },路由守卫钩子：全局守卫：router.beforeEach , router.beforeResolve , router.afterEach 路由独享守卫 :beforeEnter组件内的守卫 ：beforeRouteEnter ， beforeRouteUpdate , beforeRouteleave路由导航解析流程： 导航被触发。 在失活的组件里调用离开守卫。 调用全局的