钩子函数

生命周期图示 创建前，创建后，挂载前，挂载后，更新前，更新后，销毁前，销毁后 beforeCreate:function(){ console.log('1-beforeCreate 组件还未被创建'); }, created:function(){ console.log('2-created 组件已被创建'); }, beforeMount:function(){ console.log('3-beforeMount 组件已创建但还未挂载到DOM节点上'); }, mounted:function(){ console.log('4-mounted 组件已挂载到DOM节点上'); }, beforeUpdate:function(){ console.log('5-beforeUpdate 数据更新前'); }, updated:function(){ console.log('6-updated 被更新后'); }, activated:function(){ console.log('7-activated'); }, deactivated:function(){ console.log('8-deactivated'); }, beforeDestroy:function(){ console.log('9-beforeDestroy 组件即将被销毁'); },

一、什么是HOOK（钩子） Windows系统，建立在事件驱动机制上，就是整个系统都是通过消息传递实现的。hook（钩子）是一种特殊的消息处理机制，它可以监视系统或者进程中的各种事件消息，截获发往目标窗口的消息并进行处理。 钩子的种类很多，每种钩子可以截获相应的消息，如键盘钩子可以截获键盘消息，外壳钩子可以截取、启动和关闭应用程序的消息等。钩子可以分为线程钩子和系统钩子，线程钩子可以监视指定线程的事件消息，系统钩子监视系统中的所有线程的事件消息。因为系统钩子会影响系统中所有的应用程序，所以钩子函数必须放在独立的动态链接库(DLL) 中。 所以说，hook（钩子）就是一个Windows消息的拦截机制，可以拦截单个进程的消息(线程钩子)，也可以拦截所有进程的消息(系统钩子)，也可以对拦截的消息进行自定义的处理。 二、 HOOK分类： Ring3 层的 Hook 基本上可以分为两种大的类型： 第一类即是 Windows 消息的 Hook，第二类则是 Windows API 的 Hook。 消息 Hook 是通过 SetWindowsHookEx 可以实现将自己的钩子插入到钩子链的最前端， 而对于发送给被 Hook 的窗口(也有可能是所有的窗口，即全局 Hook)的消息都会被我们的钩子处理函数所捕获到， 也就是我们可以优先于窗体先捕获到这些消息 （1）进程内消息 Hook：可以简单的将

Vue项目结构介绍 build 文件夹：用于存放 webpack 相关配置和脚本。 config 文件夹：主要存放配置文件，比如配置开发环境的端口号、开启热加载或开启gzip压缩等。 dist 文件夹：默认命令打包生成的静态资源文件。 node_modules：存放 npm 命令下载的开发环境和生产环境的依赖包。 src: 存放项目源码及需要引用的资源文件。 src下assets：存放项目中需要用到的资源文件，css、js、images 等。 src下componets：存放 vue 开发中一些公共组件。 src下emit：自己配置的 vue 集中式事件管理机制。 src下router：vue-router vue 路由的配置文件。 src下service：自己配置的 vue 请求后台接口方法。 src下page：存在 vue页面组件的文件夹。 src下util：存放 vue开发过程中一些公共的 js 方法。 src下vuex：存放 vuex 为vue专门开发的状态管理器。 src下app.vue：整个工程的 vue 根组件。 src下main.js：工程的入口文件。 index.html：设置项目的一些meta头信息和提供html元素节点，用于挂载 vue。 package.json：对项目的描述以及对项目部署和启动、打包的 npm 命令管理。 Vue 常用指令 v-model

这是它的一个生命周期 钩子函数 ，就是一个vue实例被生成后调用这个函数。一个vue实例被生成后还要绑定到某个 html元素 上，之后还要进行编译，然后再插入到document中。每一个阶段都会有一个 钩子函数 ，方便开发者在不同阶段处理不同逻辑。 一般可以在created函数中调用ajax获取页面 初始化 所需的数据。 实例生命周期 每个 Vue 实例在被创建之前都要经过一系列的初始化过程。例如，实例需要配置数据观测(data observer)、编译模版、挂载实例到 DOM ，然后在数据变化时更新 DOM 。在这个过程中，实例也会调用一些 生命周期钩子 ，这就给我们提供了执行自定义逻辑的机会。例如， created 这个钩子在实例被创建之后被调用： var vm = new Vue({ data: { a: 1 }, created: function ( ) { // `this` 指向 vm 实例 console.log( 'a is: ' + this.a) } }) // -> "a is: 1" 也有一些其它的钩子，在实例生命周期的不同阶段调用，如 mounted 、 updated 、 destroyed 。钩子的 this 指向调用它的 Vue 实例。一些用户可能会问 Vue.js 是否有“控制器”的概念？答案是，没有。组件的自定义逻辑可以分布在这些钩子中。

中间件是 Django 用来处理请求和响应的钩子框架。它是一个轻量级的、底层级的“插件”系统，用于全局性地控制Django 的输入或输出，可以理解为内置的app或者小框架。 在 django.core.handlers.base 模块中定义了如何接入中间件，这也是学习Django源码的入口之一。 每个中间件组件负责实现一些特定的功能。例如，Django 包含一个中间件组件 AuthenticationMiddleware ，它使用会话机制将用户与请求request关联起来。 中间件可以放在你的工程的任何地方，并以Python路径的方式进行访问。 Django 具有一些内置的中间件，并自动开启了其中的一部分，我们可以根据自己的需要进行调整。 一、如何启用中间件 若要启用中间件组件，请将其添加到 Django 配置文件 settings.py 的 MIDDLEWARE 配置项列表中。 在 MIDDLEWARE 中，中间件由字符串表示。这个字符串以圆点分隔，指向中间件工厂的类或函数名的完整 Python 路径。下面是使用 django-admin startproject 命令创建工程后，默认的中间件配置： MIDDLEWARE = [ 'django.middleware.security.SecurityMiddleware', 'django.contrib.sessions

原文地址： https://segmentfault.com/a/1190000010336178 总体感知 首先贴一张Vue文档给出的生命周期图示，并添加了一些注释 Vue2.0的生命周期钩子一共有10个，同样结合官方文档作出了下表 生命周期钩子 详细 beforeCreate 在实例初始化之后，数据观测(data observer) 和 event/watcher 事件配置之前被调用。 created 实例已经创建完成之后被调用。在这一步，实例已完成以下的配置：数据观测(data observer)，属性和方法的运算， watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。 beforeMount 在挂载开始之前被调用：相关的 render 函数首次被调用。 mounted el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$el 也在文档内。 beforeUpdate 数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。你可以在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程。 updated 由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM

钩子函数可以分为三大类： 一。全局导航钩子函数 1.router.beforeEach（全局前置守卫） 应用场景：可进行一些页面跳转前处理，例如判断需要登录的页面进行拦截，做登录跳转！！ 它的三个参数： to: (Route路由对象) 即将要进入的目标 路由对象 to对象下面的属性： path params query hash fullPath matched name meta（在matched下，但是本例可以直接用） from: (Route路由对象) 当前导航正要离开的路由 next: (Function函数) 一定要调用该方法来 resolve 这个钩子。 调用方法：next(参数或者空) *** 必须调用 2. router.afterEach（全局后置守卫） 二。 路由独享的守卫(路由内钩子) const router = new VueRouter({ routes: [ { path: '/foo', component: Foo, beforeEnter: (to, from, next) => { // ... } } ]这些守卫与全局前置守卫的方法参数是一样的。 三。 组件内的守卫(组件内钩子) beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave const Foo = { template: `...`,

你知道路由钩子吗？ 路由钩子分为全局钩子、路由独享钩子、组件内钩子，全局钩子用来拦截所有的路由的，进行处理，路由独享钩子，本质上和后面的组件内钩子是一样的。都是特指的某个路由。不同的是，这里的一般定义在router当中，而不是在组件内。组件内钩子，是将钩子函数定义在组件内部了 项目中如果涉及多个组件数据共享你如何解决？ 可以启用vuex vuex中的五个属性都是什么? 有什么作用？ State 存储数据 Getter 可以认为是 store 的计算属性，它的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。 Mutation 更改 Vuex 的 store 中的状态的唯一方法是提交 mutation Action 包含任意异步操作，通过提交 mutation 间接更变状态 Module 将 store 分割成模块，每个模块都具有state、mutation、action、getter、甚至是嵌套子模块 . Vue 实现数据双向绑定的原理：Object.defineProperty() vue实现数据双向绑定主要是：采用 数据劫持结合发布者-订阅者模式 的方式，通过 Object.defineProperty() 来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应监听回掉。当把一个普通 JavaScript 对象传给Vue

目录 简介 防火墙分类及说明 netfilter钩子 iptables中的表 chains 表链关系 iptables中的规则 Matching targets 简介 在讲防火墙的时候，不得不说的是iptables，本文尽量以通俗易懂的方式描述iptables的相关概念，请耐心的读完。 防火墙分类及说明 从逻辑上讲防火墙分为主机防火墙和网络防火墙两类。 主机防火墙: 针对单个主机进行防护； 网络防火墙：往往处于网络入口或边缘，针对于网络入口进行防护，服务于防火墙背后的本地局域网。 网络防火墙和主机防火墙并不冲突，可以理解为，网络防火墙是对一个集体的防范，主机防火墙则是对个人的防范。 从物理上讲，防火墙可以分为硬件防火墙和软件防火墙。 硬件防火墙：在硬件级别实现部分防火墙功能，另一部分功能基于软件实现，性能高，成本高。 软件防火墙：应用软件处理逻辑运行于通用硬件平台之上的防火墙，性能低，成本低。 接下来我们来聊老linux的iptables。 什么是netfilter和iptables 简单点的来说: netfilter指整个项目，不然官网就不会叫www.netfilter.org了。 netfilter特指内核中的netfilter框架，iptables指用户空间的配置工具。 netfilter在协议栈中添加了5个钩子，允许内核模块在这些钩子的地方注册回调函数

父子组件生命周期： 　　“生命周期”细想之下有点浪漫主义色彩，不知道是不是从lifecycle英译过来的。作为一个前端从业者，如果让我来取，可能会取成“渲染周期”之类的，毕竟是和浏览器打交道的职业，浏览器的layout使dom树具有骨架，paint则让整个页面光亮起来。 　　React 的一切都是组件，通过 React.createElement 方法来创建嵌套层级，说白了在内存中构建对象树，据此渲染到浏览器中成为dom树，这个时候一个节点是什么时候真正渲染到页面中就变得重要起来，因为只有这个时候你才能真正和浏览器环境内的对象和方法交互，同样离开的时候也需要清理监听器等防止干扰后续逻辑，因此钩子函数，也可以说是生命周期函数就有了存在的意义。 　　先上代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Document</title> <script crossorigin src="https://unpkg.com/react