别着急，坐和放宽
摘要： 该系统是参考vuejs2.7.14源码搭建的，旨在实现一个简单的响应式框架MiniVue。框架的搭建思路是先初始化数据和方法，然后将数据代理到实例的第一层，接着将数据设置为响应式对象，最后实例化订阅者Watcher并更新数据状态。订阅者的管理由Dep类完成，它负责依赖的收集和更新的派发。
tips: 该系统搭建思路参考自vuejs2.7.14源码 Vue的响应式系统的构建是比较复杂的，在深入探究vue整体实现思路之前，我认为在尽可能保留源码设计逻辑下，自己动手实现一个基础的响应式系统是有必要的。这样对Dep、Watcher和Observer等概念也会有初步的认识。 框架搭建 接下来我们将模拟Vue源码的实现思路，实现一个简单的类响应式框架MiniVue。 参照vue的使用方法，我们在实例化MiniVue时可传递一个配置项。这个配置项需要尽可能简单化。定义入参只由挂载元素el，数据对象data和方法对象methods构成。模拟...
封装 ArrayList 类 通过封装 ArrayList，我们可以让所有排序算法作为其原型方法对其内部数组进行统一验证，而不用写多个函数一个个测试。 class ArrayList { constructor() { this.arr = []; } push(value) { this.arr.push(value); } toString() { return this.arr.join(','); } // 把数组的第i项和第j项交换位置 swap(i, j) { this.arr[i] = [this....
摘要： 在遇到某个依赖重大更新，可能要修改很多代码的时候，你希望在彻底升级成功之前，不搞乱 `node_modules`目录。这时候就要祭出 `git worktree`这个命令。
做nodejs开发，或者vue react等开发的同学，在使用git 做版本管理的时候肯定碰到过这个问题。 按常规做法node_modules 肯定是被添加到.gitignore中不需要被提交的 但是在分支切换的时候就会遇到问题 ，经如你在dev分支下就是升级了某个依赖到最新和版本，这时node_modules下所有的文件被更新，这时你如果切回到master分支，修改一个小错误 ，就会发现，由于node_modules 下的依赖已经是新版本，但是master中还是用的老版本，代码运行就不正常了，所以你不得不npm install一下，记...
前言 这些都是网上收集的方法 验证器 传入的值是否是原始值(Primitive) function isPrimitive(value: any): boolean { return ( typeof value === 'string' || typeof value === 'number' || // $flow-disable-line typeof value === 'symbol' || typeof value === 'boolean' ) } 传入的值是否为空 ``...
代码实现 .parent { background-color: gray; } .parent::before { display: table; content: ' '; } .parent::after { display: table; content: ' '; clear: both; } .parent .children { float: left; margin-top: 100px; width: 500px; height: ...
menu popup after-leave aria-dialog aria-utils clickoutside date-util date dom merge ✔ popper resize-event scroll-into-view ✔ scrollbar-width ✔ shared types ✔ util ✔ vdom vue-popper Types.js 开头先导入了Vue，因为在该模块中需要通过Vue来判断一些状态 `j...
代码实现 前面的章节中我们的PromisePolyfill类实现了Promise(期约)的基本模型，下面介绍一下其静态扩展方法resolve、reject、all、allSettle、race、any的实现。 class PromisePolyfill { constructor(executor) { //... } //该函数一旦执行，将内部的这两个回调函数赋值 then(onFulfilled, onRejected) { //... } //注意这个catch捕获的是最后一个reject ca...
该Promise类实现遵循Promises/A+规范，实现了then、catch、finally的链式调用以及all、allSettled、race、any 静态方法。 实现 class $Promise$ { constructor(executor) { // 初始化状态为pending this.status = 'pending'; // 初始化成功的值为undefined this.value = undefined; // 初始化...
步骤 克隆以下仓库 git@github.com:vuejs/vue.git 修改package.json { "dev": "rollup -w -c scripts/config.js --environment TARGET:web-full-dev --sourcemap" } 完整流程 git clone https://github.com/vuejs/vue.git cd vue npm i 在 dist/vue.js 最后一行追加一行 //# sourceMappingURL=vue.js....
响应性原理 Vue 使用 Object.defineProperty方法进行响应式数据劫持，利用 set、get 访问器描述符来检测数据的读写。 作为MVVM 框架主要包含两个方面，数据变化更新视图，视图变化更新数据。 在vue中每个组件实例都对应一个渲染 watcher 实例，它会在组件渲染的过程中把“接触”过的响应式数据 property 记录为依赖。之后当依赖项...