Ancecis的博客

为了追求更好的用户体验，很多公司的业务页面都会采用SSR进行渲染，将渲染的结果返回给浏览器，浏览器能够不经过实例化Vue，直接解析HTML代码展示，这样可以减少首屏时间，提高用户体验。0.Server Side Render使用0.1上手SSR​ Vue提供一个npm包叫做vue-server-renderer，它是在vue源码中的server目录中单独打包出来作为服务端渲染的依赖包，包的名称已经讲清楚了它的作用：作为一个服务端渲染器，将Vue实例中所有需要展示的内容进行渲染。​ 举一个很简单的服务

Router的从初始化到触发更新时候的流程如果没有相应的Router源码阅读经历（如React Router的阅读经历），那么可能不需要通过了解整个流程就可以知道大致的实现方式，但是对于没有类似的经历的，那么很难做到窥一斑而知全豹。如果一开始就直接按点来进行讲解的话，那么很多时候都会很懵，因为不知道作用。所以在进行讲解之前，先看一下Vue Router的工作流程。初始化在项目初始化的时候，会先进行VueRouter的安装，只需要记住安装的时候会在Vue中混入了一个生命周期钩子函数，将根组件的_rout

我们在使用Vue框架的时候，最亲切的感觉是莫过于它将组件开发中的HTML、CSS、JS代码分割开来，保持着原生开发的习惯。并且template语法提供比原生更加强大的功能，对于事件监听来说，他提供@click.left、@click.preventDefault等等修饰方法，有没有想过框架的内部是如何实现的呢？下面就来讲解，尽量少讲代码，多讲流程和方法，因为这一部分代码就很多中情况考虑的多，多讲代...

前言在本文章学习之前，你需要掌握的内容有：ProxyReflect1.ES6数组的原生方法有哪些？ES6数组的操作的原生方法有如下：Vue3.0相比于Vue2.0支持的观察的数组的原生方法更多，并且不需要通过写特定的方法来进行支持，对数组原生方法的观测可以合并到对数组下标、对象属性的响应代码里面。这是什么原理呢？这篇文章就来给你们揭秘！2.数组的代理对象一些有趣的现象首先，我...

1.整个响应式系统的架构1）整体的文件结构baseHandlers.ts // 基础型对象代理handlerscollectionHandlers.ts // 容器型对象代理handlerscomputed.ts // 计算选项处理，由于computed选项最后会处理成为一个响应式数据effect.ts // 影响因...

主题：依赖绑定以及触发依赖的执行策略ps：多代码预警，本节因为涉及到的流程重要代码比较多，所以贴出了核心代码。1.代理对象和影响因子effect如何绑定？（track）​ 上一篇文章讲的是响应型数据的诞生。而前面说过，响应数据的诞生和它绑定观察者是两回事。那么响应型对象和影响因子effect是如何进行绑定依赖的呢？依赖的添加是在track方法中，下面来进行讲解：什么时候进行调用track...

主题：响应型数据诞生（不考虑ReadOnly响应数据）1.哪些类型的数据会被设置成响应型数据？​ Vue2.0中能够被设置成响应型数据的无非就两种：纯对象（说白了就是new Object()或者{}或者Object.create(null)等定义的键值对对象）、数组。而Vue3.0中能够被设置成响应型数据的多了容器型对象：// makeMap方法是将字符串用String.prototype....

主题：对象及数据结构分析1.全局实例对象1）存放所有对象依赖筐的实例对象（在effect.ts文件顶部）​ 存放所有对象依赖筐的实例对象只有一个，叫做targetMap，它是分成三层的树状数据结构，第一二层是Map数据类型，第三层是Set数据类型。它大体上是按照如下的结构进行组织的：在讲解上面数据结构之前，先说明清楚两点：在Vue的数据响应系统中，数据对象变成响应型数据和被观察的数是...

主题：绪论引言​ 首先笔者问自己，为什么要阅读一下你这个教程，网络上有很多教程，然而这个教程有什么亮点？​ 网络上是有不少Vue3.0、Vue2.0源码阅读的教程，我也有去看了一下，有的写得也很不错，但是他们有一个共同的点，就是逐行代码进行解释讲解。这样好不好？好，但是还是差了点东西：逐行代码进行讲解的话，阅读的人能够很清楚知道每一行代码的作用、每一个方法的作用。但是东西讲的越细致，就很难有...

1.数据与影响因子Effect互相绑定的存储结构（targetMap）构建代码/** * @description 追踪就是依赖的添加过程，相当于2.0的observer过程 * @param target 代理对象 * @param type 观察的类型，在开发环境中使用 * @param key 想要被观察的属性，也就是effect函数中访问的对象的属性 */functio...

针对于现在存在的很多源码解析文章，以及个人之前的文章中，会存在以下问题：示例代码太多这可能是源码解析写作的通病吧。其实大多数人从vue和react这样框架的生命周期API就可以大致猜出内部流程是什么，示例代码太多反而会产生枯燥感，而且部分示例代码又长又臭，甚至不得不加上大段的注释，严重降低了阅读体验。解析流水账既然代码是给计算机看的流水账，那解析就不能再是给人看的流水账。对于源码解析来说...

理清Vue响应式系统中的Watcher一、什么是响应系统中的Watcher，它的作用是什么？响应系统中的Watcher即这个系统的观察者，它是响应系统中观察者模式的载体，当响应系统中的数据发生改变的时候，它能够知道并且执行相应的函数以达到某种业务逻辑的目的。打个比方，如果你是一个商家，要寄一批货分别给不同的客户，那么watcher就是一个个快递员，发出的动作就是数据发生改变。你只需要负责寄出去...

从源码上来看，Vue对象的每个生命周期钩子前都干了什么？一、从官方文档查看的Vue的生命周期钩子上面的图片是从Vue的官网里面找到的，如果单从这张图去查看生命周期干了什么，我们只能知道：在beforeMount前会对给出的模板进行编译（仅仅是在用Vue.js打包的时候会进行编译，在用脚手架的时候，在打包过程中会把模板编译成为渲染函数，这样可以避免每次创建一个Vue对象的时候进行编译模板）...