前端工程师面试指南-腾讯云开发者社区

开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

前端工程师面试指南

专栏成员

29

文章

19066

阅读量

13

订阅数

vue源码分析-响应式系统(三)

编程算法 vue.js 渲染

在之前介绍数据代理章节，我们已经详细介绍过Vue数据代理的技术是利用了Object.defineProperty,Object.defineProperty让我们可以方便的利用存取描述符中的getter/setter来进行数据的监听,在get,set钩子中分别做不同的操作，达到数据拦截的目的。然而Object.defineProperty的get,set方法只能检测到对象属性的变化，对于数组的变化(例如插入删除数组元素等操作)，Object.defineProperty却无法达到目的,这也是利用Object.defineProperty进行数据监控的缺陷，虽然es6中的proxy可以完美解决这一问题，但毕竟有兼容性问题，所以我们还需要研究Vue在Object.defineProperty的基础上如何对数组进行监听检测。

2022-10-31

5030

vue源码分析-v-model的本质

ast data input message model

由于v-model和前面介绍的插槽，事件一致，都属于vue提供的指令，所以我们对v-model的分析方式和以往大同小异。分析会围绕模板的编译，render函数的生成，到最后真实节点的挂载顺序执行。最终我们依然会得到一个结论，v-model无论什么使用场景，本质上都是一个语法糖。

2022-10-26

7570

vue源码分析-响应式系统工作原理

http react 编程算法 vue.js

上一章，我们讲到了Vue初始化做的一些操作，那么我们这一章来讲一个Vue核心概念响应式系统。

2022-10-19

4740

vue源码分析-从new Vue开始

vue.js 网络安全

那你觉得是不是很有意思，咱们new Vue之后，就可以使用他那么多的功能,可见Vue是暴出来的一个一个功能类函数，我们进入源码一探究竟：

2022-10-19

5850

vue源码分析-keep-alive原理（上）

node.js 缓存 vue.js 渲染

简单的结果如下，动态组件在child1,child2之间来回切换，当第二次切到child1时，child1保留着原来的数据状态，num = 5。

2022-10-19

5570

vue源码分析-动态组件

c++node.js vue.js 打包

动态组件我相信大部分在开发的过程中都会用到，当我们需要在不同的组件之间进行状态切换时，动态组件可以很好的满足我们的需求，其中的核心是component标签和is属性的使用。

2022-10-19

8620

vue源码分析-diff算法核心原理

node.js vue.js 编程算法渲染

之前讲到Vue在渲染机制的优化上，引入了Virtual DOM的概念，利用Virtual DOM描述一个真实的DOM,本质上是在JS和真实DOM之间架起了一层缓冲层。当我们通过大量的JS运算,并将最终结果反应到浏览器进行渲染时，Virtual DOM可以将多个改动合并成一个批量的操作，从而减少 dom 重排的次数，进而缩短了生成渲染树和绘制节点所花的时间，达到渲染优化的目的。之前的章节，我们简单的介绍了Vue中Vnode的概念，以及创建Vnode到渲染Vnode再到真实DOM的过程。如果有忘记流程的，可以参考前面的章节分析。

2022-10-18

4880

vue源码分析-事件机制

node.js 打包 vue.js android jquery

Vue在挂载实例前，有相当多的工作是进行模板的编译，将template模板进行编译，解析成AST树，再转换成render函数，而有了render函数后才会进入实例挂载过程。对于事件而言，我们经常使用v-on或者@在模板上绑定事件。因此对事件的第一步处理，就是在编译阶段对事件指令做收集处理。

2022-10-18

7000

vue源码分析-插槽原理

node.js 打包渲染

插槽的原理，贯穿了整个组件系统编译到渲染的过程，所以首先需要回顾一下对组件相关编译渲染流程，简单总结一下几点：

2022-10-18

7350

vue源码分析-v-model的本质

node.js 编程算法

由于v-model和前面介绍的插槽，事件一致，都属于vue提供的指令，所以我们对v-model的分析方式和以往大同小异。分析会围绕模板的编译，render函数的生成，到最后真实节点的挂载顺序执行。最终我们依然会得到一个结论，v-model无论什么使用场景，本质上都是一个语法糖。

2022-10-18

1K0

vue源码分析-响应式系统(三)

编程算法 vue.js

在之前介绍数据代理章节，我们已经详细介绍过Vue数据代理的技术是利用了Object.defineProperty,Object.defineProperty让我们可以方便的利用存取描述符中的getter/setter来进行数据的监听,在get,set钩子中分别做不同的操作，达到数据拦截的目的。然而Object.defineProperty的get,set方法只能检测到对象属性的变化，对于数组的变化(例如插入删除数组元素等操作)，Object.defineProperty却无法达到目的,这也是利用Object.defineProperty进行数据监控的缺陷，虽然es6中的proxy可以完美解决这一问题，但毕竟有兼容性问题，所以我们还需要研究Vue在Object.defineProperty的基础上如何对数组进行监听检测。

2022-10-17

4090

vue源码分析-响应式系统(二)

在构建简易式响应式系统的时候，我们引出了几个重要的概念，他们都是响应式原理设计的核心，我们先简单回顾一下：

2022-10-17

3170

vue源码分析-响应式系统(一)

vue.js node.js 数据库一体机 TData

回顾一下之前的内容，我们对Vue源码的分析是从初始化开始，初始化_init会执行一系列的过程，这个过程包括了配置选项的合并，数据的监测代理，最后才是实例的挂载。而在实例挂载前还有意忽略了一个重要的过程，数据的初始化(即initState(vm))。initState的过程，是对数据进行响应式设计的过程，过程会针对props,methods,data,computed和watch做数据的初始化处理，并将他们转换为响应式对象，接下来我们会逐步分析每一个过程。

2022-10-17

2960

vue源码分析-组件

vue.js webpack 打包渲染 node.js

Vue作为单页面应用遇到最棘手的问题是首屏加载时间的问题，单页面应用会把页面脚本打包成一个文件，这个文件包含着所有业务和非业务的代码，而脚本文件过大也是造成首页渲染速度缓慢的原因。因此作为首屏性能优化的课题，最常用的处理方法是对文件的拆分和代码的分离。按需加载的概念也是在这个前提下引入的。我们往往会把一些非首屏的组件设计成异步组件，部分不影响初次视觉体验的组件也可以设计为异步组件。这个思想就是按需加载。通俗点理解，按需加载的思想让应用在需要使用某个组件时才去请求加载组件代码。我们借助webpack打包后的结果会更加直观。

2022-10-17

6100

vue源码分析-挂载流程和模板编译

打包 ide 渲染编程算法 vue.js

在正文开始之前，我们先了解一下vue基于源码构建的两个版本，一个是runtime only(一个只包含运行时的版本)，另一个是runtime + compiler(一个同时包含编译器和运行时的版本)。而两个版本的区别仅在于后者包含了一个编译器。

2022-10-10

5760

vue源码分析-基础的数据代理检测

vue.js 网络安全编程算法 android http

数据代理的另一个说法是数据劫持，当我们在访问或者修改对象的某个属性时，数据劫持可以拦截这个行为并进行额外的操作或者修改返回的结果。而我们知道Vue响应式系统的核心就是数据代理，代理使得数据在访问时进行依赖收集，在修改更新时对依赖进行更新，这是响应式系统的核心思路。而这一切离不开Vue对数据做了拦截代理。然而响应式并不是本节讨论的重点，这一节我们将看看数据代理在其他场景下的应用。在分析之前，我们需要掌握两种实现数据代理的方法： Object.defineProperty 和 Proxy。

2022-10-10

8470

vue源码中的渲染过程是怎样的

node.js 渲染 vue.js 编程算法

当浏览器接收到一个Html文件时，JS引擎和浏览器的渲染引擎便开始工作了。从渲染引擎的角度，它首先会将html文件解析成一个DOM树，与此同时，浏览器将识别并加载CSS样式，并和DOM树一起合并为一个渲染树。有了渲染树后，渲染引擎将计算所有元素的位置信息，最后通过绘制，在屏幕上打印最终的内容。JS引擎和渲染引擎虽然是两个独立的线程，但是JS引擎却可以触发渲染引擎工作，当我们通过脚本去修改元素位置或外观时，JS引擎会利用DOM相关的API方法去操作DOM对象,此时渲染引擎变开始工作，渲染引擎会触发回流或者重绘。下面是回流重绘的两个概念：

2022-10-04

6460

从vue源码中学习观察者模式

观察者模式（Observer）：通常又被称作为发布-订阅者模式。它定义了一种一对多的依赖关系，即当一个对象的状态发生改变的时候，所有依赖于它的对象都会得到通知并自动更新，解决了主体对象与观察者之间功能的耦合。

2022-10-04

6310

深度学习Vue源码-模板编译原理

编程算法 html vue.js ide 打包

上一篇咱们主要介绍了 Vue 数据的响应式原理对于中高级前端来说响应式原理基本是面试 Vue 必考的源码基础类如果不是很清楚的话基本就被 pass 了那么今天咱们手写的模板编译原理也是 Vue 面试比较频繁的一个点而且复杂程度是高于响应式原理的里面主要涉及到 ast 以及大量正则匹配大家学习完可以看着思维导图一起手写一遍加深印象哈

2022-10-03

3810

上帝视角看Vue源码整体架构+相关源码问答

vue.js node.js javascript 编程算法

这段时间利用课余时间夹杂了很多很多事把 Vue2 源码学习了一遍，但很多都是跟着视频大概过了一遍，也都画了自己的思维导图。但还是对详情的感念模糊不清，故这段时间对源码进行了总结梳理。

2022-10-03

1.8K0

点击加载更多

社区活动

Python精品学习库

代码在线跑，知识轻松学

博客搬家 | 分享价值百万资源包

自行/邀约他人一键搬运博客，速成社区影响力并领取好礼

技术创作特训营·精选知识专栏

往期视频·干货材料·成员作品最新动态