- 博客(25)
- 收藏
- 关注
RSS订阅原创 vue3.0源码解析，patch&diff过程
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入欢迎使用Markdown编辑器你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Mar
2022-05-14 00:59:00
1110
原创 javaScript v8引擎的垃圾回收（gc）浅析
一、v8数据存放在程序运行时，存放数据地方主要分为堆内存和栈内存栈内存：因为使用的栈结构设计，所以叫栈内存，是一块连续的内存空间，处存储简单的数据，如基本类型（number、boolean、string）的值，复杂类型的堆内存指针也会存储在此，它是一个key、value的储存类型。栈内存的垃圾回收由系统自动直接管理，进行分配以及释放。堆内存：是一块不连续的内存空间，效率不如栈，可以存储栈内存的所有能储存的数据并且存储object数据。需要v8引擎主动去进行垃圾回收，这篇文章讲解的也是堆内存的垃圾回收
2022-05-02 20:11:45
2285
1
原创 vue2.0源码解析，initInjections与initProvide
前言在vue 2.2之后，新增了**(provide / inject) API**，用于跨层级的数据传递。vue官方文档 - provide / inject安定针： provide / inject的源码非常简单下面 (provide / inject) API 的使用方式// 父级组件提供 'foo'// 方式 1 直接传值var Provider = { provide: { foo: 'bar' }, // ...}// 方式 2// 函数式返回值，可变为
2021-07-18 18:59:27
477
1
原创 vue2.0源码解析，initState之initProps
前言在初始化过程中initState主要负责初始化props、methods、data、computed与watch，此篇主要对props初始化的源码解析，避免太长，computed与watch篇会在另一篇文章解释。data与methods的部分前面已有，data导航：vue2.0源码解析，Data，methods导航：vue2.0源码解析，Methods。initState// init.jsinitState(vm);// state.js/*初始化props、methods、d
2021-07-11 14:25:59
644
1
原创 vue2.0源码解析，initRender(初始化render)
注：此章只讨论初始化过程，对render具体渲染不做讨论，在后面会有文章解析render过程。initRender函数/*初始化render*/export function initRender(vm: Component) { // _vnode 组件的真实节点，它的tag就是<template>标签下的第一个节点 vm._vnode = null; // the root of the child tree vm._staticTrees = null; // $vnode
2021-07-06 17:50:22
773
原创 vue2.0源码解析，initEvent(组件事件初始化)
在vue中使用事件// 例子1： vm.$on('test', function (msg) { console.log(msg) // hi})vm.$emit('test', 'hi')// 例子2： // 父组件监听子组件传出事件<my-component v-hook:created="dosomething"></my-component>// 例子3：// 一次监听回调后销毁监听<my-component v-on:click.once
2021-07-04 14:16:33
1026
原创 vue2.0源码解析，Data
源码话不多说，直接放出源码。这里的整体代码也不多，我基本也已做了注释。// 对于process.env.NODE_ENV !== 'production'可以忽略掉，都是开发时候的警告提示处理function proxy (target: Object, sourceKey: string, key: string) { sharedPropertyDefinition.get = function proxyGetter () { return this[sourceKey][key]
2021-06-14 14:03:47
331
原创 vue2.0源码解析，Methods
安定针Methods部分的源码很简单，简单到什么程度，需要看的代码行数不超过20行。妈妈再也不用担心我的学习，芜湖起飞！代码以上基本就是全部的代码（其余可以忽略），在利用bind固定了作用域，使其每次触发，都保持着同一个上下文this，而对于低版本浏览器，使用polyfillBind方法兼容，以下是可以使用Function.prototype.bind()的浏览器版本如图所示，低版本ie浏览器不支持此方法，而兼容的polyfillBind方法，利用闭包保存上下文（ctx参数），灵活运用ap
2021-06-13 16:47:24
246
原创 实现vue2.0响应式原理
很久之前为了面试，看了一些分析源码的博客，没有最近重新看一下vue的源码，匆匆浏览记住一些概念，因为懒惰，后面也没有再去深入探索；前段时间痛定思痛，觉得不能这样下去，过一下vue源码，此文章也是为了记录自己的一些理解。希望的结果数据的读写更变依赖收集观察者（触发后续的视图更新）let vueData = { number: 9999, list: ['a', 'b', 'c'], tree: { user: 111, mo: '1231
2021-06-11 10:40:49
462
原创 金三银四跳槽季，前端面试题记录（2021），VUE
Q、 简述一下对vue的mvvm模型的理解mvvm：model-view-viewmodel，而vue实现了一套响应式系统实现了viewmodel层监听model(data)数据，通知view层patch dom。响应式系统：说响应式系统是因为vue的实现很像观察者/发布订阅模式，但不完全是，这点尤其在vue3.0+的源码上提现更明显Q、 双向绑定的实现vue2.x: 通过Object.defineProperty实现对数据的监听；vue3.x: 通过ES6的扩展对象Proxy实现对数据的监听，
2021-05-04 15:40:30
307
4
原创 金三银四跳槽季，前端面试题记录（2021），JS
JSQ、 script标签中defer和async的区别defer: 中文意思是延迟。用途是表示脚本会被延迟到整个页面都解析完毕后再运行。因此，在script元素中设置defer属性，相当于告诉浏览器立即下载，但延迟执行。HTML5规范要求脚本按照它们出现的先后顺序执行，因此第一个延迟脚本会先于第二个延迟脚本执行,但执行脚本之间存在依赖，需要有执行的先后顺序时，就可以使用defer,延迟执行。我觉得把script脚本放在body底部和defer差不多。defer流程：1.浏览器开始解析HTML
2021-05-02 22:09:19
327
原创 金三银四跳槽季，前端面试题记录（2021），网络 & html & CSS篇
浏览器 & 网络Q、常见的各个状态码理解200 OK： 请求成功**204 No Content: 成功，但不返回响应实体301 Moved Permanently： 永久重定向，资源将永久指向新分配的uri，下次访问将请求新的uri302 Found： 临时重定向，资源临时被分配新的uri，但不是永久移动，下次访问还是会现请求本次uri303 See Other： 与302相同，但303 状态码明确表示客户端应当采用 GET 方法获取资源，比如本次获取是用post请求，返回303，则会
2021-04-17 23:27:59
203
1
原创 猿人学-爬虫刷题：第一题解题思路
缘由前几天在v2ex看到网站的宣传，点开后觉得挺有趣，试着做了一下。下面分享下解题思路。题目链接： 猿人学爬虫第一题思路打开f12看一下登录接口：分页数据接口：看起来只要请求登录接口获取cookie后，再请求五次分页接口后，拿到返回接口，计算得到平均值就ok。但分页接口query参数中有一个字段m，需要注意，是带上的加密参数，需要在网页源码中找到推导加密过程。也是这道题的意义所在。观察参数m的值：5d86db93a825e2a005525f2f7265ef68 通过某种加密得到的加密
2021-04-05 17:37:37
2185
原创 使用css3：pointer-events，允许点击穿透
背景年前产品提了个需求，希望在页面元素最上层加上灯笼与下雪的动画，并且不影响下层元素的滑动与点击操作。于是，这个css3属性就登场了属性介绍pointer-eventsMDN上的属性介绍：The pointer-events CSS property sets under what circumstances (if any) a particular graphic element can become the target of pointer events.我的粗浅理解： 定义了这个属性的元
2021-02-27 21:07:20
1309
原创 typescript学习一一类型
介绍typescript可以看做一个js的强类型超集，js代码可以完全无修改移到.ts（typescript）文件去编译。编译官方推荐使用npm包或者使用vscode中的typescript插件进行编译，学习的时候还可以使用在线编译来编写代码，会将你写的ts代码编译成es5的形式来展示，方便理解。 指定类型这是typescript最有特点的特性—类型检查，指定类型后，会在...
2018-07-03 15:55:33
293
原创 vue.js学习：1.0到2.0的变化（区别）
一、生命周期1、1.0的生命周期: 周期 解释 init 组件刚刚被创建，但Data、method等属性还没被计算出来 created 组件创建已经完成，但DOM还没被生成出来 beforeCompile 模板编译之前 compiled 模板编译之后 ready 组件准备（平时用得较多） attached...
2017-07-04 15:41:48
12913
3
原创 学习笔记一一关于跨域
一、什么的是同源？这是最初由Netscape提出的安全策略，这个策略是为了防止页面使用恶意的方法获取到另一个页面上的敏感信息。所有现代浏览器都会有这个策略。 如果请求数据时浏览器发现请求地址不同源，那么将会不允许这次的请求，报出一个错误。 上图是一个标准的url连接。 有一些还会带有查询（query）、信息片段（fragment），这里不做讨论；而所谓同源，就是通信协议、主机名、端口号必须相同
2017-06-16 13:57:38
778
原创 解决sublime下再次运行node，端口被占用无法再次运行问题
在sublime下运行node的http模块，监听一个地址端口，修改代码后再次运行会出现错误，表示端口已被占用，如下图：这时候想再次运行则需要先结束掉node的进程然后再运行。 方法就是在cmd命令行中输入tskill node 这样就会结束掉node的进程，端口就不会被占用了。 再次运行程序成功！
2017-06-02 10:40:38
2880
转载 学习Javascript闭包（Closure）
转至阮一峰博客：学习Javascript闭包（Closure）闭包（closure）是Javascript语言的一个难点，也是它的特色，很多高级应用都要依靠闭包实现。下面就是我的学习笔记，对于Javascript初学者应该是很有用的。一、变量的作用域要理解闭包，首先必须理解Javascript特殊的变量作用域。变量的作用域无非就是两种：全局变量和局部变量。Javascr
2017-04-14 15:28:58
212
原创 多值缓动动画封装
原理：这个函数支持多种属性（opacity.left.zindex.scrollTop等），我们先从原理说起，以最简单的position-left移动为例子，比如从起点（原始位置）到终点（我们要想要变化到的位置）的距离为X。如果我们想将移动进行缓动的话，就要将每次移动的大小慢慢减少，实现一个视觉差的效果。即每次移动的距离是剩下距离大小的20%；公式：每次移动的距离 =（终点-现在位
2017-04-07 10:17:05
357
原创 JavaScript—特殊数值：NaN和isNaN()方法
NaNNaN是number类型中一个特殊的数值，在JavaScript中它有个奇怪的定义：非数值（Not a Number）,即是一个不是数字的数值，这个数值用于表示一个本来要返回数值的操作数未返回数值的情况。在其他语言中，任何数值在未返回都会得到错误，但在JS中，会返回NaN,这样它就不会抛出错误了，继续解析执行接下来的代码。console.log(typeof NaN); //返回Numbe
2017-03-18 00:11:21
12466
2
原创 JavaScript—变量提升
我们先来看一个例子：var num = 10;fun();function fun(){console.log(num); //输出undefinedvar num = 20;console.log(num); //输出20}这里就有一个疑问了：为什么是undefined而不是10呢？其实在真实的解析过程是这样的：var num = 10;fun();function fun(){
2017-03-17 23:14:45
499
原创 HTML居中的三个小技巧
一：当图片(img元素)远远大于父元素时，如何让图片居中显示呢？1.1方法图片的父元素设置text-align:center.图片（img元素）设置margin:0 -100%;和高度；1.2代码示例 *{
2017-03-13 09:09:24
1376
原创 使用display:flex 弹性布局
这是我写的第一篇博客，文章部分转至网络，部分来自自己的理解，如有错误之处，望指出。文章里所用的大部分图片和部分观点采用来至阮一峰博客《flex布局教程：语法篇》原文地址：flex布局教程：语法篇--阮一峰一般传统的网页布局方式是采用盒模型+浮动+定位等，如需要实现完美的布局，就需要多种方式配合，这样会产生很多代码，不利于维护，为解决这种状况，CSS3的推出多种新的布局方式，来解
2017-03-08 17:53:10
3014
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人