- 博客(45)
- 收藏
- 关注
原创 【踩坑】掉进keep-alive 的 include的坑中
今天查看同事写的面包屑标签,发现其使用keep-alive来缓存路由组件,缓存组件输入内容和查询结果。后来我去测试,发现没有起到作用。查看代码,按需缓存逻辑没有错误,router上的name也是正确。于是产生疑惑,这是什么神奇的bug。切记!include配置的name,是组件的name,而不是router上的name!切记!include配置的name,是组件的name,而不是router上的name!切记!include配置的name,是组件的name,而不是router上的name!原来是na
2020-11-18 11:12:35
2295
4
原创 【原生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;
2020-07-13 09:21:18
602
原创 记字节一道面试题
<div class="container"> <div class="left"></div> <div class="right"></div></div><style> * { padding: 0; margin: 0; } .container { width: 600px; height: 300px; display: flex; }
2020-05-27 09:15:23
187
原创 Babel知识点
不会很详细说明每个东西该怎么用,大概介绍Babel这个大家族的一些常见知识点Babel编译三个阶段:1、解析2、转换3、生成Babel自6.0开始就只负责解析和生成了,转换代码需要插件完成"plugins": [ "transform-es2015-template-literals" // 转译模版字符串的 plugins 利用这个插件做模板字符串的转换先执行plugins再执行presetsplugins从左到右执行presets从右到左执行Babel常见plugin简介ba
2020-05-20 16:43:30
361
2
原创 【Vue】Vue源码第五步——响应式原理(nextTick)
我本人的源代码是比较新的,以前的源码中,nextTick是使用microTimerFunc 和 macroTimerFunc 2 个变量控制异步任务队列的,这里只分析我本地的源码执行流程。src\core\util\next-tick.js文件定义了一些主要的变量callbacks:保存回调函数的一个数组flushCallbacks:拿到callbacks保存的数组,遍历执行timerF...
2020-05-08 10:14:55
285
原创 【Vue】Vue源码第五步——响应式原理(派发更新)
很久之前的文章说到,依赖收集是通过defineReactive方法中,对对象设置get方法并通过dep.depend()方法,添加到watcher上。派发更新操作,主要就是在对象的set方法中。src\core\observer\index.jsset: function reactiveSetter (newVal) {const value = getter ? getter.call...
2020-05-06 10:11:10
231
原创 【Vue】Vue源码第五步——响应式原理(依赖收集)
根据之前对Vue初始化的分析,我们可以得知,初始化数据的方法在initState中,分别对props,methods,data,computed,watch进行了初始化:export function initState (vm: Component) { vm._watchers = [] const opts = vm.$options if (opts.props) initP...
2020-04-29 11:42:04
495
原创 【Vue】Dll plugin使用
最近工作较忙没时间更新博客,今天在搭建公司新项目,顺便分享一下这个提高编译性能的pluginwebpack里面自带dll plugin项目使用的是vue-cli 3.0构建出来的项目安装:npm install webpack-cli clean-webpack-plugin --dev项目根目录新增dll配置文件,用于生成提取出来公共模块webpack.dll.conf.jsco...
2020-04-22 15:40:31
2558
原创 【Vue】Vue源码第四步——组件化(组件注册、组件生命周期)
在Vue中,组件分为全局组件和局部组件,首先先看看全局组件Vue是怎么注册的。全局组件在Vue中其实内置了很多全局组件,在init做option合并的时候我们可以看到Vue内置组件,比如keep-live、transition具体调试位置是init时候,把组件options和Vue的option合并时候我们注册全局组件的时候都是使用如下方式注册:const Hello = Vue.com...
2020-03-09 11:32:40
387
原创 【Vue】Vue源码第四步——组件化(patch)
代码逻辑来看,我们Vue实例的时候会执行this._init方法,_init方法执行到最后会进行挂载,即执行mount;mount;mount;mount其实是执行mountComponent函数的结果,mountCopoment函数在src\core\instance\lifecycle.js中定义;mountComponent中有个vm._update,而这个_update方法是在lifecy...
2020-03-04 14:56:17
651
原创 【Vue】Vue源码第四步——组件化(createComponent)
我们在创建Vue实例的时候,经常会这样写new Vue({ data: { count : 1 }, render: (h) => h(App)}})之前初始化章节已经讲过,render函数的参数是createElementcreateElement作用十分重要,并且会有两种情况:1、如上例子,接收组件2、把template编译成rend...
2020-02-28 17:54:39
632
原创 【Vue】Vue源码第三步——初始化(eventsMixin、renderMixin)
eventsMixinon监听当前实例上的自定义事件。事件可以由vm.emit触发。回调函数会接收所有传入事件触发函数的额外参数如果是数组,迭代调用emit触发。回调函数会接收所有传入事件触发函数的额外参数如果是数组,迭代调用emit触发。回调函数会接收所有传入事件触发函数的额外参数如果是数组,迭代调用on方法,在当前实例的events上添加事件监听注意,事件如果由$emit触发,那么f...
2019-12-26 08:56:13
812
原创 【Vue】Vue源码第三步——初始化(lifecycleMixin、stateMixin)
为了帮助更好理解,本人做了一个思维导图,大家可以搭配思维导图享用。Vue初始化源码——思维导图LifecycleMixin_update第一次和后面的更新使用不同的__patch__根据prevEl来设定属性,prevEl就是旧节点的el属性根据vm.el属性根据vm.el属性根据vm.el来设定属性,vm.$el是经过__patch__打补丁过的,可能删除了也可能变换了内容Vue....
2019-12-18 09:13:01
911
原创 【Vue】Vue源码第三步——初始化(initMixin)
为了帮助更好理解,本人做了一个思维导图,大家可以搭配思维导图享用。Vue初始化源码——思维导图Vue创建实例vue-dev\src\core\instance\index.jsimport { initMixin } from './init'import { stateMixin } from './state'import { renderMixin } from './rende...
2019-12-12 16:12:19
569
原创 【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...
2019-12-11 09:38:07
195
原创 【Vue】Vue源码第一步——目录结构
开始学习探索源码之前,要先熟悉整个源码的目录结构以及整个文件的架构是怎么组成的,所以第一章先看目录结构目录结构Vue.js 的源码都在 src 目录下,其目录结构如下。src├── compiler # 编译相关├── core # 核心代码├── platforms # 不同平台的支持├── server # 服务端...
2019-12-11 09:36:04
201
原创 【Vue】Vue 的 Props 如何初始化
1.为什么props在html模板中要使用kebab-case (短横线分隔命名),而在Vue的options里面声明props却要用camelCase (驼峰命名法)?2.Vue中是如何初始化props属性的?HTML层面:代码层面:在_init初始化过程中,如果Vue实例有props属性时候,会对props的属性进行遍历操作,把props里的内容(数组、对象)变成Vue实例的prop...
2019-11-27 09:39:58
4681
原创 【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...
2019-11-14 16:00:30
4522
原创 【小程序】基础知识
登陆button按钮上面的open-type设置为getUserInfo,则可以让用户点击按钮时候进行授权,然后通过当前button的bindgetuserinfo属性设置回调方法,bindgetuserinfo的参数就是用户的信息。<button open-type="getUserInfo" bindgetuserinfo="userLogin" size="mini" ...
2019-11-08 15:16:05
363
原创 【JS】JS中的运算符
概念术语:一元运算符、二元运算符、运算元运算元:被运算符作用的单位叫做运算元。比如:let a = 1 + 2上面运算公式中,被 + 加号 作用的 1、2 就是运算元一元运算符:只有一个运算元的运算符。比如:let a = +1 // a=1上面运算公式中,运算符加号只有一个运算元,所以 + 是一元运算符。同理二元运算符是let a = 1 + 1细节(1)运算符有...
2019-10-29 11:20:14
268
原创 【WEB安全】SQL注入 点击劫持
ClickJacking点击劫持点击劫持是一种视觉欺骗的攻击手段。攻击者将需要攻击的网站通过 iframe 嵌套的方式嵌入自己的网页中,并将 iframe 设置为透明,在页面中透出一个按钮诱导用户点击。比如,通过iframe标签把某博客网站的点赞按钮放置在一个图片上,然后设置成透明,当你点击图片时候其实是点击到iframe图层的点赞按钮,默认发送信息出去。防御点击劫持手段:1、X-FRA...
2019-10-15 20:06:31
267
原创 【WEB安全】XSS和XSRF介绍及防御手段
XSS跨站脚本攻击(cross site scripting)XSS攻击分为:反射型、存储型、DOM型反射型利用页面缺陷,执行脚本,从而获取用户信息。比如:页面获取用户输入信息(用户输入),服务端未经过字符串转义或处理,直接返回到客户端。浏览器就很容易受到XSS攻击,比如可以在页面添加脚本,把用户Cookie信息发送到黑客服务器上。这样黑客就可以获得用户登录态,进行模拟登陆。存储型...
2019-10-11 10:30:14
669
原创 【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"...
2019-09-24 10:15:34
204
原创 【JS】CommonJS 和 ES6模块定义
最近项目赶,笔记较少,先更一点CommonJS1、模块定义CommonJS 模块只有一个出口,即module.exportsCommonJS导出的其实是module对象下的exports属性导出的时候可以写成exports.a = ‘im a’可以在exports上面新增属性但是不能使用exports = ‘im a’这样会覆盖module.exports的内容是不允许的2、模块...
2019-09-11 16:27:51
277
原创 【Node】Mysql2和sequelize
mysql2安装npm i --save mysql2创建连接var mysql = require(‘mysql’);//1.创建连接配置var connection = mysql.createConnection({ host : 'localhost', user : 'me', password : 'secret', database : '...
2019-08-28 15:49:08
1877
原创 websocket socket socket.io的区别
websocket socket socket.io的区别Socket是应用层与TCP/IP协议族通信的中间软件抽象层,它是一组接口。在设计模式中,Socket其实就是一个门面模式,它把复杂的TCP/IP协议族隐藏在Socket接口后面,对用户来说,一组简单的接口就是全部,让Socket去组织数据,以符合指定的协议。Socket是传输控制层协议,WebSocket是应用层协议,Socket.i...
2019-08-20 16:10:07
4919
2
原创 【Node】Koa2 常用请求API
请求requestrequest.header请求标头对象。request.method请求方法。request.url获取请求 URL.request.origin获取URL的来源,包括 protocol 和 host。比如:http://localhost:3000/index 返回 http://localhost:3000request.originalUrl获取请求...
2019-08-13 11:00:12
947
原创 【读书笔记】《JS函数式编程指南》(一)
纯函数纯函数:函数的返回值由传入的参数决定,即相同的参数返回相同的结果。slice和splice,表现作用相似。slice浅复制,返回复制之后的数组splice删除数组元素,返回删除元素slice执行之后元素组还是一致,是纯函数;splice执行后是改变了的原数组所以slice是纯函数,而splice是具有副作用的不纯函数副作用副作用是计算结果过程中,系统状态的一种变化,或者与外部...
2019-08-05 16:17:18
281
原创 【React】React Hooks 笔记
useState添加组件内部的Statecount State名setCount State的修改方法initValue State的初始值const [count, setCount] = useState(initValue);修改State不会把新的和旧的合并,只会覆盖。useEffect数据获取、订阅、修改DOM等是“副作用”操作,和componentDidMoun...
2019-07-31 10:00:00
272
原创 Babel浅析
// .babelrc 文件 { "plugins": [ "transform-es2015-template-literals" // 转译模版字符串的 plugins ], "presets": ["env", "stage-2"] }Babel编译三个阶段:1、解析2、转换3、生成Babel自6.0开始就只负责解析和生成了,转换代码需要插件完成...
2019-07-26 14:54:27
177
原创 Node.js 常用变量与模块
特点:(1)前后端都用js编写容易实现全栈(2)非阻塞 i/o (最重要)(3)完善的生态(4)使用v8引擎劣势:nodejs不适合计算密集型程序,只适合 i/o 密集型程序运行node:(1)进入到当前文件所在路径(2)运行node必须使用命令行,node+文件名字运行异步:代码不是一行一行执行的回调:当做完一件事的时候,马上反馈这件事相对路径:“.”或者“无”开头的就是相对...
2019-07-23 14:45:33
405
原创 【Vue】部署、测试
vue-cli环境变量配置四种方式来制定环境变量:在根目录添加.env文件,配置所有情况下都会用到的配置(不知道这个存在的意义,所有的都需要的也就不需要配置了吧)。在根目录添加.env.local 文件,配置所有情况下都会用到的配置,与.env的区别是只会在本地,该文件不会被git跟踪。在根目录添加.env.[mode] 文件,配置对应某个模式下的配置,比如:.env.developmen...
2019-07-21 09:26:41
272
原创 笔记与记忆技巧分享
自己用空余时间会上网看一些文档或者文章,为了方便自己记忆与查找,都会把一些自己不懂不理解的知识点记录到笔记本上(本人用的是:有道云笔记)。自己做的笔记也不少,现在总结一些自己做笔记的技巧吧:1、笔记标题笔记的标题是自己日后查找知识点的醒目标志,有了这个笔记的标题那么就能准确定位到自己想要查找的内容,我一般都会使用加粗红色的字体来进行标注,红色给人警示能让我更加关注红色的字体。2、笔记主体笔...
2019-07-18 10:16:53
314
原创 GPU概念
GPU在正式讲解GPU之前,我们先来讲讲上文中提到的一个概念——并行计算。并行计算(Parallel Computing)是指同时使用多种计算资源解决计算问题的过程,是提高计算机系统计算速度和处理能力的一种有效手段。它的基本思想是用多个处理器来共同求解同一问题,即将被求解的问题分解成若干个部分,各部分均由一个独立的处理机来并行计算。并行计算可分为时间上的并行和空间上的并行。时间上的并行是指...
2019-07-15 15:42:56
995
原创 【CSS】CSS动画硬件加速原理
过去几年,我们常常会听说硬件加速给移动端带来了巨大的体验提升,但是即使对于很多经验丰富的开发者来说,恐怕对其背后的工作原理也是模棱两可,更不要合理地将其运用到网页的动画效果中了。在本文中,我会和大家分享有关硬件加速的前端技巧。硬件加速的工作原理浏览器接收到页面文档后,会将文档中的标记语言解析为DOM树。DOM树和CSS结合后形成浏览器构建页面的渲染树。渲染树中包含了大量的渲染元素,每一个渲染元...
2019-07-15 15:39:37
483
原创 HTTP学习笔记总结
HTTP简介HTTP协议是Hyper Text Transfer Protocol(超文本传输协议)的缩写,是用于从万维网(WWW:World Wide Web )服务器传输超文本到本地浏览器的传送协议。HTTP是一个基于TCP/IP通信协议来传递数据(HTML 文件, 图片文件, 查询结果等)。HTTP是一个属于应用层的面向对象的协议,由于其简捷、快速的方式,适用于分布式超媒体信息系统。它...
2019-07-13 13:19:57
202
原创 【JS】前端请求方法总结
JQuery同步异步:async : true,(异步,默认)请求实例var url = "/test/check"; $.ajax({ type: "post", url: url,// data: "para="+para, 此处data可以为 a=1&b=2类型的字符串 或 json数据。 data: {"p...
2019-07-12 09:57:15
3122
原创 【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 ...
2019-07-11 09:29:54
786
原创 【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...
2019-07-07 13:40:36
437
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人