五柳

古语有言：“万事开头难”从今年4月份，到现在，前端框架从最早接触Vue.js，到现在掌握了React.js、Node.js、小程序等等，在不知不觉对前端框架的学习已经陷入了一定的瓶颈。早期学这些框架都非常困难！，后期，学这些给我的感觉就是依葫芦画枣，学起来非常容易。总结几点，现阶段的前端框架，只要理清几点，例如路由、路由组件、普通组件、全局状态管理、数据双向绑定、虚拟DOM等等，上手任何一个框架...

前言我想大家都对 Vue 的 Scope CSS 耳熟能详了，但是说起 Vue 的 Scope CSS 实现的原理，很多人应该会说不就是给 HTML、CSS 添加属性吗 ????️？确实是这样的，不过这只是最终 Scope CSS 呈现的结果。而这个过程又是如何实现的？我想能回答上一二的同学应该不多。那么，回到今天本文，我将会围绕以下 3 点，和大家一起从 Vue 的 Scope CSS 的最终呈现结果出发，深入浅出一番其实现的底层原理：什么是 Scope CSSvue-loader 处理组件

引言今年，疫情并没有影响到各种面经的正常出现，可谓是络绎不绝（学不动…）。然后，在前段时间也看到一个这样的关于 Vue 的问题，为什么每个组件 template 中有且只能一个 root？可能，大家在平常开发中，用的较多就是 template 写 html 的形式。当然，不排除用 JSX 和 render() 函数的。但是，究其本质，它们最终都会转化成 render() 函数。然后，再由 re...

引言无论是 React 也好，Vue 也罢，它们都有自己的全局状态管理机制 Redux 和 Vuex。同样地，这也是它们框架的一大特色。并且，对于 Vue 而言，Vuex 和之前我讲的 Vue-Router 一样，是作为插件使用。在认识 Vuex 的 Store 源码之前，我们先来回顾一下 Store 的特点：存储的数据是全局可访问的数据同样是响应式的，即它也是基于订阅者-发布模式（和 ...

引言对于单页应用来说，很重要的一点，它可以被称之为应用，则是因为它内部的跳转不是传统网页的刷新跳转，而是无刷新跳转（网上也称这种跳转方式的实现为 Pjax）。并且，对于 Vue.js 来说，它本身仅仅是提供了数据驱动的能力，它的其他能力则是通过 Vue.use() 来安装注册插件来实现能力的扩展。Pjax 的优点：可以在页面切换间平滑过渡，增加 Loading 动画可以在各个页面间传递数...

引言其实对比起来 Vue 与 React 起来，除了 React 鲜明的函数式的组件、JSX，最大的不同就是 Vue 封装了 v-model 这个语法糖实现了数据的双向绑定。而 v-model 这个语法糖的实现其实也是非常地简单，接下来我们就来认识一下 v-model 在底层中的实现。v-modelv-model 这个指令，在编译的 parse 阶段与 v-bind、v-on 之类的指令一样...

引言Vue 的编译过程总共分为三个步骤：根据 template 生成 AST（抽象语法树）优化 AST根据 AST 可执行的函数（render 函数之类的）这三个步骤其实在源码中，也写的清清楚楚。export const createCompiler = createCompilerCreator(function baseCompile ( template: string,...

计算属性computed 也是属于组件状态的一部分，所以它初始化同样是在 initState 函数中完成的，initState 函数定义在 src/core/instance/state.jsexport function initState (vm: Component) { // 定义一个Watcher数组，即用于收集观察者（依赖收集） vm._watchers = [] //...

nextTickVue 中 nextTick 的实现主要是基于微任务队列，它是通过原生的 Promise.then 或 MutationObserver 实现，需要注意的是 nextTick 更多地会选择 Promise.then 进行触发，因为在 IOS（>= 9.3.3）的时候，MutationObserver 在触发几次后会失效。我想大家对 Promise.then 都有认知，最常...

响应式对象    在 Vue 中响应式的原理是基于 ES5 的 Object.defineProperty（而 Vue 的响应式原理是基于 ES6 中的 Proxy）。数据初始化    在 Vue 的初始化过程中，数据初始化的完成是由 initState 执行的，initState.js 定义在 src/core...

前言    在Vue的渲染过程中都会先将代码中的标签转化成render函数，然后通过render函数中的creatElement来创建Vnode。那么，在Vue中createElement又是怎么定义的？createElement()方法    在Vue.js开发中可以利用createElement方法创建VNo...

Vue构造函数    在开发当中，我们通过会通过 new Vue 创建一个 Vue 实例。而在 Vue 源码中，Vue的构造函数定义在 /src/core/index.js 中。 function Vue (options) { // 如果开发环境不是生产环境且该调用该function的不是Vue的实例 if (process.env.NOD...

前言相信很多和我一样用Vue做开发的时候，是通过template写HTML代码开发项目的。而Vue.js在编译的时候是通过解析template标签，生成对应的render的函数的方式，渲染页面。并且render函数提供了createElement参数，他是一个Function，提供给开发者创建Vritual Dom模板。那么，接下来我们就来认识一下createElement。createEle...

前言在JavaScript中，如果要获取一个DOM的HTML代码，需要这样： var DOM = documnet.getElementById('div1') DOM.innerHTML()而在很多情况下，我们不仅需要获取该DOM包含的HTML代码，还需要这个DOM本身的HTML代码，那么需要这样： var DOM = documnet.getElementById('div1')...

flow由于JavaScript是一门动态类型语言，它并不像Java、C#这类语言具备静态类型的检测。而，flow可实现对JavaScript中静态类型的检测，防止出现类型错误，造成bug的情况出现，并且flow和Babel 和、ESLint有很好的支持。所以，在Vue.js的源码的构建中，就使用了flow来作为静态类型的检测。类型注释类型注释用于声明函数时形参的数据类型，或函数返回的数据类...

简介Diff无疑是Vue.js底层的核心思想之一，它优化了传统的DOM更新渲染的方式，在很大程度上提高页面更新时DOM渲染的性能。它基于虚拟DOM，通过比较新、旧虚拟DOM的区别，来对真实DOM进行打补丁（patch）或DOM位置变换的操作，从而避免了重复创建一样的DOM或重新创建所有DOM的情况。算法思想描述在Diff算法中，DOM节点的比较是同一级DOM节点树之间的比较。首先，它会判断这...