及时行乐

原创 【踩坑】掉进keep-alive 的 include的坑中

今天查看同事写的面包屑标签，发现其使用keep-alive来缓存路由组件，缓存组件输入内容和查询结果。后来我去测试，发现没有起到作用。查看代码，按需缓存逻辑没有错误，router上的name也是正确。于是产生疑惑，这是什么神奇的bug。切记！include配置的name，是组件的name，而不是router上的name！切记！include配置的name，是组件的name，而不是router上的name！切记！include配置的name，是组件的name，而不是router上的name！原来是na

原创 Git常用命令

原创 【原生Js】隐式转换规则

js中的不同的数据类型之间的比较转换规则如下：1. 对象和布尔值比较对象和布尔值进行比较时，对象先转换为字符串，然后再转换为数字，布尔值直接转换为数字[] == true; //false []转换为字符串’’,然后转换为数字0,true转换为数字1，所以为false2. 对象和字符串比较对象和字符串进行比较时，对象转换为字符串，然后两者进行比较。[1,2,3] == '1,2,3' // true [1,2,3]转化为’1,2,3’，然后和’1,2,3’， so结果为true;

原创 记字节一道面试题

<div class="container"> <div class="left"></div> <div class="right"></div></div><style> * { padding: 0; margin: 0; } .container { width: 600px; height: 300px; display: flex; }

原创 Babel知识点

不会很详细说明每个东西该怎么用，大概介绍Babel这个大家族的一些常见知识点Babel编译三个阶段：1、解析2、转换3、生成Babel自6.0开始就只负责解析和生成了，转换代码需要插件完成"plugins": [ "transform-es2015-template-literals" // 转译模版字符串的 plugins 利用这个插件做模板字符串的转换先执行plugins再执行presetsplugins从左到右执行presets从右到左执行Babel常见plugin简介ba

原创 【Vue】Vue源码第五步——响应式原理（nextTick）

我本人的源代码是比较新的，以前的源码中，nextTick是使用microTimerFunc 和 macroTimerFunc 2 个变量控制异步任务队列的，这里只分析我本地的源码执行流程。src\core\util\next-tick.js文件定义了一些主要的变量callbacks：保存回调函数的一个数组flushCallbacks：拿到callbacks保存的数组，遍历执行timerF...

原创 【Vue】Vue源码第五步——响应式原理（派发更新）

很久之前的文章说到，依赖收集是通过defineReactive方法中，对对象设置get方法并通过dep.depend（）方法，添加到watcher上。派发更新操作，主要就是在对象的set方法中。src\core\observer\index.jsset: function reactiveSetter (newVal) {const value = getter ? getter.call...

原创 【Vue】Vue源码第五步——响应式原理（依赖收集）

根据之前对Vue初始化的分析，我们可以得知，初始化数据的方法在initState中，分别对props,methods,data,computed,watch进行了初始化：export function initState (vm: Component) { vm._watchers = [] const opts = vm.$options if (opts.props) initP...

原创 【Vue】Dll plugin使用

最近工作较忙没时间更新博客，今天在搭建公司新项目，顺便分享一下这个提高编译性能的pluginwebpack里面自带dll plugin项目使用的是vue-cli 3.0构建出来的项目安装：npm install webpack-cli clean-webpack-plugin --dev项目根目录新增dll配置文件，用于生成提取出来公共模块webpack.dll.conf.jsco...

原创 【Vue】Vue源码第四步——组件化（组件注册、组件生命周期）

在Vue中，组件分为全局组件和局部组件，首先先看看全局组件Vue是怎么注册的。全局组件在Vue中其实内置了很多全局组件，在init做option合并的时候我们可以看到Vue内置组件，比如keep-live、transition具体调试位置是init时候，把组件options和Vue的option合并时候我们注册全局组件的时候都是使用如下方式注册：const Hello = Vue.com...

原创 【Vue】Vue源码第四步——组件化（patch）

代码逻辑来看，我们Vue实例的时候会执行this._init方法，_init方法执行到最后会进行挂载，即执行mount；mount；mount；mount其实是执行mountComponent函数的结果，mountCopoment函数在src\core\instance\lifecycle.js中定义；mountComponent中有个vm._update，而这个_update方法是在lifecy...

原创 【Vue】Vue源码第四步——组件化（createComponent）

我们在创建Vue实例的时候，经常会这样写new Vue({ data: { count : 1 }, render: (h) => h(App)}})之前初始化章节已经讲过，render函数的参数是createElementcreateElement作用十分重要，并且会有两种情况：1、如上例子，接收组件2、把template编译成rend...

原创 【Vue】Vue源码第三步——初始化（eventsMixin、renderMixin）

eventsMixinon监听当前实例上的自定义事件。事件可以由vm.emit触发。回调函数会接收所有传入事件触发函数的额外参数如果是数组，迭代调用emit触发。回调函数会接收所有传入事件触发函数的额外参数如果是数组，迭代调用emit触发。回调函数会接收所有传入事件触发函数的额外参数如果是数组，迭代调用on方法，在当前实例的events上添加事件监听注意，事件如果由$emit触发，那么f...

原创 【Vue】Vue源码第三步——初始化（lifecycleMixin、stateMixin）

为了帮助更好理解，本人做了一个思维导图，大家可以搭配思维导图享用。Vue初始化源码——思维导图LifecycleMixin_update第一次和后面的更新使用不同的__patch__根据prevEl来设定属性，prevEl就是旧节点的el属性根据vm.el属性根据vm.el属性根据vm.el来设定属性，vm.$el是经过__patch__打补丁过的，可能删除了也可能变换了内容Vue....

原创 【Vue】Vue源码第三步——初始化（initMixin）

为了帮助更好理解，本人做了一个思维导图，大家可以搭配思维导图享用。Vue初始化源码——思维导图Vue创建实例vue-dev\src\core\instance\index.jsimport { initMixin } from './init'import { stateMixin } from './state'import { renderMixin } from './rende...

原创 【Vue】Vue源码第二步——入口文件

我们之前提到过 Vue.js 构建过程，在 web 应用下，我们来分析 Runtime + Compiler 构建出来的 Vue.js，它的入口是 src/platforms/web/entry-runtime-with-compiler.js/* @flow */import config from 'core/config'import { warn, cached } from 'c...

原创 【Vue】Vue源码第一步——目录结构

开始学习探索源码之前，要先熟悉整个源码的目录结构以及整个文件的架构是怎么组成的，所以第一章先看目录结构目录结构Vue.js 的源码都在 src 目录下，其目录结构如下。src├── compiler # 编译相关├── core # 核心代码├── platforms # 不同平台的支持├── server # 服务端...

原创 【Vue】Vue 的 Props 如何初始化

1.为什么props在html模板中要使用kebab-case (短横线分隔命名)，而在Vue的options里面声明props却要用camelCase (驼峰命名法)？2.Vue中是如何初始化props属性的？HTML层面：代码层面：在_init初始化过程中，如果Vue实例有props属性时候，会对props的属性进行遍历操作，把props里的内容（数组、对象）变成Vue实例的prop...

原创 【Vue】Vue的自动化测试之Jest 基础知识

单测（unit testing）Jest新建一个vue项目vue create test-example1、依赖安装1、依赖安装vue-jest、Vue Test Utils、babel-jest、babel-preset-envnpm install --save-dev vue-jest Vue Test Utils babel-jest babel-preset-envvu...

原创 【小程序】基础知识

登陆button按钮上面的open-type设置为getUserInfo，则可以让用户点击按钮时候进行授权，然后通过当前button的bindgetuserinfo属性设置回调方法，bindgetuserinfo的参数就是用户的信息。<button open-type="getUserInfo" bindgetuserinfo="userLogin" size="mini" ...

原创 【JS】JS中的运算符

概念术语：一元运算符、二元运算符、运算元运算元：被运算符作用的单位叫做运算元。比如：let a = 1 + 2上面运算公式中，被 + 加号 作用的 1、2 就是运算元一元运算符：只有一个运算元的运算符。比如：let a = +1 // a=1上面运算公式中，运算符加号只有一个运算元，所以 + 是一元运算符。同理二元运算符是let a = 1 + 1细节（1）运算符有...

原创 【WEB安全】SQL注入 点击劫持

ClickJacking点击劫持点击劫持是一种视觉欺骗的攻击手段。攻击者将需要攻击的网站通过 iframe 嵌套的方式嵌入自己的网页中，并将 iframe 设置为透明，在页面中透出一个按钮诱导用户点击。比如，通过iframe标签把某博客网站的点赞按钮放置在一个图片上，然后设置成透明，当你点击图片时候其实是点击到iframe图层的点赞按钮，默认发送信息出去。防御点击劫持手段：1、X-FRA...

原创 【WEB安全】XSS和XSRF介绍及防御手段

XSS跨站脚本攻击(cross site scripting)XSS攻击分为：反射型、存储型、DOM型反射型利用页面缺陷，执行脚本，从而获取用户信息。比如：页面获取用户输入信息（用户输入），服务端未经过字符串转义或处理，直接返回到客户端。浏览器就很容易受到XSS攻击，比如可以在页面添加脚本，把用户Cookie信息发送到黑客服务器上。这样黑客就可以获得用户登录态，进行模拟登陆。存储型...

原创 【ES6】常用语法与特性

let和const 解构赋值 字符串扩展1、新增unicode编码表示方法2、字符串能被for in 遍历for (let codePoint of 'foo') { console.log(codePoint) } // "f" // "o" // "o"3、新增at()，可识别编号大于0xFFFF的字符，返回正确字符'abc'.charAt(0) // "a"...

原创 【JS】CommonJS 和 ES6模块定义

最近项目赶，笔记较少，先更一点CommonJS1、模块定义CommonJS 模块只有一个出口，即module.exportsCommonJS导出的其实是module对象下的exports属性导出的时候可以写成exports.a = ‘im a’可以在exports上面新增属性但是不能使用exports = ‘im a’这样会覆盖module.exports的内容是不允许的2、模块...

原创 【Node】Mysql2和sequelize

mysql2安装npm i --save mysql2创建连接var mysql = require(‘mysql’);//1.创建连接配置var connection = mysql.createConnection({ host : 'localhost', user : 'me', password : 'secret', database : '...

原创 websocket socket socket.io的区别

websocket socket socket.io的区别Socket是应用层与TCP/IP协议族通信的中间软件抽象层，它是一组接口。在设计模式中，Socket其实就是一个门面模式，它把复杂的TCP/IP协议族隐藏在Socket接口后面，对用户来说，一组简单的接口就是全部，让Socket去组织数据，以符合指定的协议。Socket是传输控制层协议，WebSocket是应用层协议，Socket.i...

原创 【Node】Koa2 常用请求API

请求requestrequest.header请求标头对象。request.method请求方法。request.url获取请求 URL.request.origin获取URL的来源，包括 protocol 和 host。比如：http://localhost:3000/index 返回 http://localhost:3000request.originalUrl获取请求...

原创 【读书笔记】《JS函数式编程指南》（一）

纯函数纯函数：函数的返回值由传入的参数决定，即相同的参数返回相同的结果。slice和splice，表现作用相似。slice浅复制，返回复制之后的数组splice删除数组元素，返回删除元素slice执行之后元素组还是一致，是纯函数；splice执行后是改变了的原数组所以slice是纯函数，而splice是具有副作用的不纯函数副作用副作用是计算结果过程中，系统状态的一种变化，或者与外部...

原创 【React】React Hooks 笔记

useState添加组件内部的Statecount State名setCount State的修改方法initValue State的初始值const [count, setCount] = useState(initValue);修改State不会把新的和旧的合并，只会覆盖。useEffect数据获取、订阅、修改DOM等是“副作用”操作，和componentDidMoun...

原创 Babel浅析

// .babelrc 文件 { "plugins": [ "transform-es2015-template-literals" // 转译模版字符串的 plugins ], "presets": ["env", "stage-2"] }Babel编译三个阶段：1、解析2、转换3、生成Babel自6.0开始就只负责解析和生成了，转换代码需要插件完成...

原创 Node.js 常用变量与模块

特点：（1）前后端都用js编写容易实现全栈（2）非阻塞 i/o （最重要）（3）完善的生态（4）使用v8引擎劣势：nodejs不适合计算密集型程序，只适合 i/o 密集型程序运行node：（1）进入到当前文件所在路径（2）运行node必须使用命令行，node+文件名字运行异步：代码不是一行一行执行的回调：当做完一件事的时候，马上反馈这件事相对路径：“.”或者“无”开头的就是相对...

原创 【Vue】部署、测试

vue-cli环境变量配置四种方式来制定环境变量：在根目录添加.env文件，配置所有情况下都会用到的配置（不知道这个存在的意义，所有的都需要的也就不需要配置了吧）。在根目录添加.env.local 文件，配置所有情况下都会用到的配置，与.env的区别是只会在本地，该文件不会被git跟踪。在根目录添加.env.[mode] 文件，配置对应某个模式下的配置,比如：.env.developmen...

原创 笔记与记忆技巧分享

自己用空余时间会上网看一些文档或者文章，为了方便自己记忆与查找，都会把一些自己不懂不理解的知识点记录到笔记本上（本人用的是：有道云笔记）。自己做的笔记也不少，现在总结一些自己做笔记的技巧吧：1、笔记标题笔记的标题是自己日后查找知识点的醒目标志，有了这个笔记的标题那么就能准确定位到自己想要查找的内容，我一般都会使用加粗红色的字体来进行标注，红色给人警示能让我更加关注红色的字体。2、笔记主体笔...

原创 GPU概念

GPU在正式讲解GPU之前，我们先来讲讲上文中提到的一个概念——并行计算。并行计算(Parallel Computing)是指同时使用多种计算资源解决计算问题的过程，是提高计算机系统计算速度和处理能力的一种有效手段。它的基本思想是用多个处理器来共同求解同一问题，即将被求解的问题分解成若干个部分，各部分均由一个独立的处理机来并行计算。并行计算可分为时间上的并行和空间上的并行。时间上的并行是指...

原创 【CSS】CSS动画硬件加速原理

过去几年，我们常常会听说硬件加速给移动端带来了巨大的体验提升，但是即使对于很多经验丰富的开发者来说，恐怕对其背后的工作原理也是模棱两可，更不要合理地将其运用到网页的动画效果中了。在本文中，我会和大家分享有关硬件加速的前端技巧。硬件加速的工作原理浏览器接收到页面文档后，会将文档中的标记语言解析为DOM树。DOM树和CSS结合后形成浏览器构建页面的渲染树。渲染树中包含了大量的渲染元素，每一个渲染元...

原创 HTTP学习笔记总结

HTTP简介HTTP协议是Hyper Text Transfer Protocol（超文本传输协议）的缩写,是用于从万维网（WWW:World Wide Web ）服务器传输超文本到本地浏览器的传送协议。HTTP是一个基于TCP/IP通信协议来传递数据（HTML 文件, 图片文件, 查询结果等）。HTTP是一个属于应用层的面向对象的协议，由于其简捷、快速的方式，适用于分布式超媒体信息系统。它...

原创 【JS】前端请求方法总结

JQuery同步异步：async : true,（异步，默认）请求实例var url = "/test/check"; $.ajax({ type: "post", url: url,// data: "para="+para, 此处data可以为 a=1&b=2类型的字符串 或 json数据。 data: {"p...

原创 【Vue】Vue源码--createElement

createELementVue.js 利用 createElement 方法创建 VNode，它定义在 src/core/vdom/create-elemenet.js// wrapper function for providing a more flexible interface// without getting yelled at by flowexport function ...

原创 【Vue】Vue源码阅读笔记（1）

本文主要记录了VUE源码中的三部分：VUE初始化流程VUE中响应式实现VUE对数组做特殊处理初始化流程入口src\platforms\web\entry-runtime-with-compiler.js扩展$mount const options = this.$options // resolve template/el and convert to render fu...