Coder小鹿-CSDN博客

原创 Vue响应式原理 vue源码(十一)

前言看过很多讲响应式的文章，大多都是告诉你们，有Observer，Dep，Wathcer类，Object.definePorperty，先会触发get中的dep.depend收集依赖，然后数据改变时，会触发set中的dep.notify去通知Wathcer执行它的update方法，这样响应式就完成了这只能说是一个粗略的总结，如果我告诉你，Watcher的update方法其实只是一个调用其他函数的方法而已，它还会进行非常多的操作，其中还会涉及到异步更新的原由！这只是其中的一些小细节，Vue2.0x内部的响

2020-08-14 18:54:56 2892 5

原创 Vue3响应式原理 [Vue3源码系列_xiaolu]

theme: v-greenhighlight: androidstudio前言数据响应式是什么？数据响应式是一种机制，能够侦测到数据的变化，然后响应这个变化到视图而Vue3设计理念是声明式(Declarative)开发,最大的好处：数据驱动，不用关心dom，只用关心状态数据Vue2和Vue3响应式的差别Vue2使用Object.defineProperty实现响应式Vue3使用Proxy实现响应式来看看两者的区别:Object.defineProperty:通过对某个属性的get.

2022-04-15 18:08:41 783

原创 Vue3组件初始化流程(四): 解决todo：applyOptions对Vue2写法的兼容 initProps Slots [Vue3源码系列_xiaolu]

theme: vuepresshighlight: androidstudio解决todo这一章我们来解决前面留下的部分todogetExposeProxygetExposeProxy方法路径: core\packages\runtime-core\src\component.tsexport function getExposeProxy(instance: ComponentInternalInstance) { // 判断exposed是否存在 if (instance.e.

2022-04-03 13:11:28 1223

原创 Vue3组件初始化流程(三): 验证对createApp以及mount的分析，并总结初始化流程 [Vue3源码系列_xiaolu]

搭建验证环境这一章我们来验证前两章的分析首先，在packages/vue/expample下面新建一个文件index.htmlindex.html 路径: core\packages\vue\examples\init.html<div id="app"> <h1>{{title}}</h1> <p>someText</p></div><script src="../dist/vue.global.js"

2022-04-03 12:49:01 1115

原创 Vue3组件初始化流程(二): mountComponent [Vue3源码系列_xiaolu]

分析mopuntConponent的三个方法前一章我们分析到了mountCompoent方法，其内部调用了三个方法:createComponentInstancesetupCompoentsetupRenderEffect现在来看看这三个方法createComponentInstancecreateComponentInstance方法路径: core\packages\runtime-core\src\component.tsexport function createCompo

2022-04-03 12:16:42 2030

原创 Vue3组件初始化流程(一): 从createApp到mountComponent [Vue3源码系列_xiaolu]

文章目录前言分析环境搭建1.获取源码2.安装pnpm3.修改package.json4.安装依赖5.dev打包怎么找入口在哪打断点运行断点createAppensureRenderercreateRendererbaseCreateRenderercreateAppAPIcreateAppAPI返回的createAppmountmount执行renderpatchprocessComponentmountComponet总结前言前不久，Vue3已经成为正式版了，因此打算将Vue3源码分析输出为博客，顺便

2022-04-03 11:10:45 1810

原创简单讲解一下http2的多路复用每日一题系列(八)

多路复用HTTP2采用二进制格式传输，取代了HTTP1.x的文本格式，二进制格式解析更高效。多路复用代替了HTTP1.x的序列和阻塞机制，所有的相同域名请求都通过同一个TCP连接并发完成。在HTTP1.x中，并发多个请求需要多个TCP连接，浏览器为了控制资源会有6-8个TCP连接都限制。HTTP2中同域名下所有通信都在单个连接上完成，消除了因多个 TCP 连接而带来的延时和内存消耗。单个连接上可以并行交错的请求和响应，之间互不干扰在 HTTP/1 中，每次请求都会建立一次HTTP连接，也就是

2020-09-14 19:33:42 469

原创 ES5/ES6 的继承除了写法以外还有什么区别? 每日一题系列(七)

继承的各种写法class 声明会提升，但不会初始化赋值。Foo 进入暂时性死区，类似于 let、const 声明变量。const bar = new Bar(); // it's okfunction Bar() { this.bar = 42;}const foo = new Foo(); // ReferenceError: Foo is not definedclass Foo { constructor() { this.foo = 42; }}clas

2020-09-13 19:06:12 326

原创请分别用深度优先思想和广度优先思想实现一个拷贝函数？每日一题系列(六)

前言在前一篇已经介绍过了深度优先和广度优先现在想通过这两个去实现一个深拷贝深拷贝需要注意一些问题：环状数据先了解过什么是环状数据后，再来进行深拷贝的实现环状数据相信大多数人都是第一次听说这个词，其实挺好理解的，先上代码看一看const obj = { foo: { name: 'foo', bar: { name: 'bar' baz: { name: 'baz', aChild: null //待会让它指向obj.

2020-09-12 10:19:44 1111

原创介绍下深度优先遍历和广度优先遍历，如何实现？每日一题系列(五)

前言深度优先遍历，广度优先遍历，基本上前端人员是很少听说过的，应用场景挺少，并且也没怎么接触过数据结构，因此会觉得陌生应用场景可用于实现深拷贝所以这题目可以只做个了解，其实实现也是挺简单的，无非是一个栈，一个队列深度优先遍历深度优先遍历DFS 与树的先序遍历比较类似。假设初始状态是图中所有顶点均未被访问，则从某个顶点v出发，首先访问该顶点然后依次从它的各个未被访问的邻接点出发深度优先搜索遍历图，直至图中所有和v有路径相通的顶点都被访问到。若此时尚有其他顶点未被访问到，则另选一个未被访问的顶点作起

2020-09-11 10:12:10 988

原创 vue源码(十三) 数组下标改变值的响应式误区以及实现

前言相信大家都知道，在vue2.0x中，使用数组下标改变值时，是不会触发响应式的以下来自:Vue官方文档Vue 不能检测以下数组的变动：当你利用索引直接设置一个数组项时，例如：vm.items[indexOfItem] = newValue当你修改数组的长度时，例如：vm.items.length = newLength但是其实还是有特殊情况的，让我们来分析分析正常情况让我们看看，使用数组下标直接改变数组元素的值，是否会响应式变化(按照官方文档是不可行的)<div id="a

2020-09-10 16:03:52 5588 13

原创介绍下 Set、Map、WeakSet 和 WeakMap 的区别？每日一题系列(四)

前言Set、Map、WeakSet、WeakMap都是ES6新增的数据结构这里只是说说区别，之后会根据ES6的规范来对其详细的特性和方法等进行讲解区别Set成员唯一、无序且不重复[value, value]，键值与键名是一致的（或者说只有键值，没有键名）可以遍历，方法有：add、delete、hasWeakSet成员都是对象成员都是弱引用，可以被垃圾回收机制回收，可以用来保存DOM节点，不容易造成内存泄漏不能遍历，方法有add、delete、hasMap本质上是键值

2020-09-10 10:49:23 314 1

原创什么是防抖和节流？有什么区别？如何实现？每日一题系列(三)

前言函数的防抖与节流也是常见面试题其区别在于防抖：任务频繁触发的情况下，只有任务触发的间隔超过指定间隔的时候，任务才会执行节流：指定时间间隔内只会执行一次任务实现的话可以移步防抖与节流总结这是一个挺简单的实现，只要知道思路后，也可以根据应用场景，自己进行一些更改防抖与节流也是前端性能优化中重要的一环，面试基本上都会问到...

2020-09-09 09:35:53 215

原创 (!(~+[])+{})[--[~+““][+[]][~+[]]+~~!+[]]+({}+[])[[~!+[]]~+[]] javascript类型转换的彩蛋

前言(!(~+[])+{})[--[~+""][+[]]*[~+[]]+~~!+[]]+({}+[])[[~!+[]]*~+[]]大家可以试着运行一下这串代码是不是输出的"sb"让人眼前一惊肯定都会去想这个变相的骂人是怎么实现的原始式子拆分解这种题目，当然要把他们先按运算符给拆分开来，一步一步分析了首先可以将原始的式子分为式子1 (!(~+[])+{})[–[~+""][+[]]*[~+[]]+~~!+[]]式子2 ({}+[])[[~!+[]]*~+[]]并且式子1和式子2

2020-09-08 20:08:37 2638

原创 [‘1‘, ‘2‘, ‘3‘].map(parseInt) what & why ? 每日一题系列(二)

前言[‘1’, ‘2’, ‘3’].map(parseInt)，这看上去，好像就是遍历1，2，3然后将他们都进行parseInt，所以脑海中的答案大概可能是1，2，3，但这是错误的，这里面有一个坑，涉及到parseInt的参数以及规范的问题这也是面试题中常见的一道题目接下来让我们搞清楚其运作原理mapmap方法是ES6新增的数组方法，这是MDN上的map语法var new_array = arr.map(function callback(currentValue[, index[, array

2020-09-08 10:16:52 333

原创 Vue为什么要在列表组件中写key，其作用是什么？每日一题系列(一)

前言相信大家都在v-for中使用过key，脑海中也大概有印象，这个key写在这是为了提升性能的，但是再深一步问，这个key怎么就能优化性能呢？所以这就是今天的题需要探讨的点key的作用在Vue.js官方文档中已经给出了key的作用key这个特殊的属性，主要用于Vue的虚拟dom算法，在新旧 nodes 对比时辨识 VNodes。如果不使用 key，Vue 会使用一种最大限度减少动态元素并且尽可能的尝试就地修改/复用相同类型元素的算法。而使用 key 时，它会基于 key 的变化重新排列元素顺序，

2020-09-07 11:21:08 1908

原创 javascript类型转换(下篇)

前言不多说，这一篇全是题目和解析，直接上题目了，如果不懂得可以看javascript类型转换(上篇)[]+[]首先这两个都是对象类型，所以会执行toPrimitive内部方法，而[[DefaultValue]]的hint值为空，hint值为空相当于hint为number的时候。所以会先执行valueOf，然后根据返回值判断是否执行toString。那么来看看这里的第一个[]，执行valueOf后，因为数组的valueOf会返回数组本身，因此这个返回值还不是基本类型值，因此会执行toString，所

2020-09-04 19:52:53 1068 2

原创 javascript类型转换(上篇)

前言JavaScript中有6种数据类型：数字（number）、字符串（string）、布尔值（boolean）、undefined、null、对象（Object）。其中对象类型包括：数组（Array）、函数（Function）、还有两个特殊的对象：正则（RegExp）和日期（Date）。其中简单数据类型为：number、string、boolean、undefined、null引用数据类型为：object但是Javascript是一门弱类型的语言，它在声明时只有一种类型，只有在运行期间才能确定当前

2020-09-04 17:43:41 1366 2

原创事件驱动原理

事件驱动原理简单地说，就是由于js代码只在一个线程上运行，他容易被阻塞。例如：复杂的算法运算，js进行复杂的dom操作等等。我们试想下如果一打开页面，就有大量IO请求，都是同步执行的话，页面会有多卡，所以事件驱动最终实际上是解决单线程通道阻塞问题，通过事件队列的方式给主通道让路浏览器有两个线程，一个是js线程，一个是ui线程，两线程是互斥的，一旦一个线程阻塞，另一线程无法响应用户的操作用户在界面上进行的操作称之为事件(Event)。由用户操作引发的一连串程序的动作，称之为事件驱动(Event-Dr

2020-09-01 16:36:39 3934

原创防抖与节流

前言防抖与节流的概念通常被用于前端性能优化中了解其概念后，实现他们是很简单的防抖防抖可以举个栗子，比如电梯，在电梯载人的过程中，电梯门自动关闭前，有人要进电梯，这时电梯门会回到原始位置，等这个人进来后，电梯门继续开始自动关闭。一直到电梯门关闭时，都没有人要进电梯，这时电梯门的关闭过程执行完毕。防抖：触发高频事件后n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间function debounce (fn, delay) { // 定时器 let timeout = nu

2020-09-01 16:34:51 311

原创回流与重绘(浏览器渲染原理)

前言回流与重绘，听起来很高深的概念，其实它们两个只是重复执行浏览器渲染的过程而已。所以，此博客将从浏览器渲染机制开始讲起浏览器渲染页面过程这里主要以webkit内核引擎的chrome浏览器进行讲解先将图中的几个名词概念解释一下：DOM Tree: 浏览器将HTML解析成树形的数据结构Style Rules: 浏览器将CSS解析成树形的数据结构(也就是常说的CSSOM)Attachment: 用来连接DOM与CSSOM以构建渲染树Render Tree: Render Tree可以

2020-09-01 15:48:21 2079 4

原创 webpack bundle实现打包原理 webpack(二)

前言这篇博客将会从分析原理到实操写出一个小型的bundle我觉得，想去实现一个东西，不能立刻去敲代码，而是要观察，分析出它的特点，一步步分析，然后跟着这一步步分析，去实现分析出来的每一点，这是一个循序渐进的过程。要分析webpack，肯定要会最简单的打包了，如果不会的同学可以移步这里webpack是什么？以及安装和运行 webpack(一)此篇中，我会给每个分析得出的结论一个二级标题，以便你们迅速查阅(所以不能作为标题去看，而是要依次看下去)搭建分析环境首先我们从最简单的一个打印开始(以防万一，

2020-08-23 20:42:50 2969 7

原创 webpack是什么？以及安装和运行 webpack(一)

webpack是什么webpack是一个打包模块化Javascript的工具，它会从入口模块触发，识别出源码中的模块化导入语句，递归地找出入口文件的所有依赖，将入口和其所有的依赖打包到一个单独的文件中，也是工程化、自动化思想在前端开发中的体现webpack安装// 初始化package.jsonnpm init -y // 安装webpacknpm install webpack webpack-cli -D // 安装完后检测是否成功 npx查找本地的npx webpack -vnpx

2020-08-20 23:33:07 1129 3

原创 vue源码(十二) compileToFunctions

开启compile在分析完响应式原理后，让我们接着vue源码八()链接继续分析，上次说到，在$mount内部，在没有render函数的情况下，会将template进行一系列操作后，最后对这个template执行compileToFunctions操作，因此我们从compileToFunctions开始分析，compileToFunctions的查找这是来自src\platforms\web\entry-runtime-with-compiler.js Vue.prototype.$mount内部的/

2020-08-18 11:28:16 627 1

原创 vue源码(十) 进行响应式前的准备大纲以及Observer文件夹逐行注释

今日达成：大纲准备完毕大纲准备花4天将这些整理完毕，分享给大家，因此下一期将在4天后！这里先把所有文件的注释奉上Object.defineProperty发布订阅模式Observer类方法构造函数内部实现数组和对象的响应式protoAugmentcopyAugmentarray.js 数组方法响应式walkobserverArraydefineReactive深层遍历 childOb = !shallow && observe(val)get方

2020-08-10 18:08:33 255

原创 vue源码(九) 响应式入口 observer/index.js分析

今日目标：找到响应式文件（憋一发大的）路径：src\core\observer\index.js在之前提到过流程中，出现过许多次“将其添加到观察者中”、“将其响应化”、“通过defineReactive将其添加到观察者中”诸如此类的描述这些其实就是对vue响应式的描述，提到过这么久的响应式，今天将带领大家进入这神奇的世界，看看他的入口入口src\core\instance\state.js在initData中，可以看到最后通过Observe将data变成响应化observe(data, true

2020-08-08 15:11:24 328

原创 vue源码(八) new Vue时发生的那些事

一段时间的总结今天就从new一个Vue实例开始，把一些过程捋一遍调试首先github上下载2.6.9版本的源码接下来就是怎么开启调试了：按照以下步骤来npm i 安装依赖(用cnpm yarn都可)// 因为vue是通过rullup进行打包npm install rullup -g 全局安装rullup打包工具// package.json 中修改scripts中的dev 加上--sourcemap"dev": "rollup -w -c scripts/config.js --envir

2020-08-06 21:31:08 1304

原创 vue源码(七) state.js data、props、watch、computed、methods属性的初始化和响应化

今日目标：state.js路径：src\core\instance\state.js今天就分析这十三个函数，任务艰巨！首先，有一个共享属性定义// 共享属性定义const sharedPropertyDefinition = { enumerable: true, configurable: true, get: noop, //空函数 set: noop}proxy作用：做一层代理，将app.data.name变成app.name这种类型，并会给其添加共享属性//

2020-08-04 11:10:39 928 2

原创 Promise分析与实现(中篇)

完成catch和一些静态方法对原生Promise进行分析1.catch方法let promise1 = new Promise((resolve, reject) => { resolve('1')})promise1.then(res => { reject('1')}).catch(err => { console.log(err)})这里故意调用reject出错再来看这个let promise1 = new Promise((resolve,

2020-08-02 21:38:59 220 1

原创 vue源码(六) inject.js provide和inject

今日目标：inject.js 算是划水的一篇路径：src\core\instance\inject.js今天就分析这三个函数来自官方文档：provide 和 inject 主要在开发高阶插件/组件库时使用。并不推荐用于普通应用程序代码中。这对选项需要一起使用，以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效。initProvideprovide，通常用来实现组件间通信，可以是对象或返回对象的函数，在src\core\instance\

2020-08-02 11:40:00 1792

原创 Promise分析与实现(上篇)

Promise分析与实现分析原生Promise1.Promise接受一个参数，且参数只能为函数，其函数的参数为两个函数let p = new Promise((resolve, reject) => { })参数只能为函数，否则抛出错误var res = 1let p = new Promise(res)2. Promise本身就是一个状态机，其有三种状态：pending, fullfilled, rejected. 还可以得出两个内部属性：[[PromiseStat

2020-08-02 00:10:00 2031 4

原创 vue源码(五) render.js与$nextTick的异步

今日目标：render.js 额外目标：$nextTick的异步路径：src\core\instance\render.js今天就分析这两个函数，有一个是测试用，咱不管initRenderinitRender最主要干了两件事：1、_c和createElement2、createElement 2、createElement2、attrs $listeners的响应化_c是由vue自带的complier编译解析的，而$createElement是我们自己写的render中的h函数然后就

2020-07-31 11:12:46 1521

原创 vue源码(四) event.js initEvents

今日目标：events.js路径：src\core\instance\events.js今天就分析这6个函数当然，我们这里没有按照初始化执行的顺序来，响应式那些还没提及，不急，慢慢来，之后我会将其全部连起来的。initEvents在_init中触发，在initLifeCycle之后触发，初始化事件队列以及监听器// 初始化事件export function initEvents (vm: Component) { // 初始化_events事件队列 vm._events = Ob

2020-07-29 10:45:15 954

原创 vue源码(三) lifecycle.js

今日目标：lifecycle.js路径：src\core\instance\lifecycle.js今天就分析这9个函数setActiveInstance// 设置active实例export function setActiveInstance(vm: Component) { // 记录之前的activeInstance const prevActiveInstance = activeInstance // 将传入的赋给activeInstance activeInstan

2020-07-27 12:21:30 648 1

原创 JavaScript面试题总结(一)

JavaScript面试题1.JavaScript 中 undefined 和 not defined 的区别JavaScript 未声明变量直接使用会抛出异常：var name is not defined如果没有处理异常，代码就停止运行了但是，使用typeof undeclared_variable并不会产生异常，会直接返回 undefined.2.下面的代码输出什么？var y = 1;if (function f(){}) { y += typeof f;}consol

2020-07-25 17:51:13 522

原创 Vue源码(二)

主线和支线上次我们讲到src\platforms\web\entry-runtime-with-compiler.js，已经分析了这个文件，那只是帮助大家对源码难度有个大概的了解，今天的主线就是去寻找到vue的初始化文件，当然还会有几个支线。entry-runtime-with-compiler.js中引入的Vue在 src\platforms\web\entry-runtime-with-compiler.js 中第7行我们可以看到引入了Vue，import Vue from './runti

2020-07-25 17:44:06 342

原创 Vue源码(一)

目录今天开始，我将和大家一起探索vue源码，大家一起学习！首先去git下载一份vue，我这里是v2.6.9版本的，如果要跟着一起分析的话，推荐使用同一版本！刚下载的vue的目录结构是这样的dist是打包生成的各种版本的vue，分为AMD，UMD，CMD，以及CommonJS四种打包格式examples是一些测试用例flow 是vue2用来进行静态类型检查的，这里文件是对flow语法的支持types 是对ts的支持packages是一些单独切出来的包，像weexscripts 是关于打包

2020-07-23 11:30:24 2012

原创前端的发展

前端的发展今儿，来讲讲前端的发展吧，从以前人们口中的"切图仔"到现在的web前端工程师，这种称呼的改变，是这二十几年的前端的一直光速迭代发展带来的1990年，HTML被发布，但是要是说前端的历史起点的话，应该是1994年，这一年网景推出了第一版Navigator，W3C的创建，CSS的诞生。在当时，大多数的web网页是被用于技术交流的，Document(文档)因此而来，Document就是用标记语言和超链接写成的由文字和图片构成的HTML的页面，当然，没有样式，但是这并不妨碍用于学习交流。这时候，网页

2020-07-16 21:36:00 360

原创 ES6的filter、map、reduce

提出问题现在有一个需求：给一个数字数组，我们要对其进行一些操作首先，将所有小于60的数取出来，然后将这些数都乘以2，最后将乘以2后的数全部加起来，最后打印加起来的值其实这个需求挺简单的，无非就是几个循环，创建几个新数组保存一下，然后进行累加打印就行了。好，既然提出了解决方法，那么直接撸代码let arr = [30, 50, 142, 305, 20, 16, 66, 77, 88]let arr1 = []let arr2 = []let sum = 0// 这个循环把所有小于60的数放

2020-07-12 21:01:30 502 1

原创原型原型链构造函数继承（下）

原型链同样，分析一段代码，一个函数声明，通过new Xiaolu()创建一个xiaolu1的对象，然后进行相关打印function Xiaolu() { this.name = "小鹿"}Xiaolu.prototype.code = function () { return this.name + '在敲代码'}var xiaolu1 = new Xiaolu()//访问xiaolu1的name属性//打印结果：小鹿console.log(xiaolu1.name)//调用xi

2020-07-11 12:09:31 449

vue流程分析.xmind

空空如也