08 2021 档案
摘要：vue 改写了数组的七个方法：push、pop、shift、unshift、splice、sort、reverse。使数组改变的时候能够触发响应式，先把原来的 Array.prototype 的方法备份一份，再进行重写。 vue 的数组响应式是如何实现的？ 以 Array.prototype 为原型
阅读全文
摘要：官网的响应式原理图解： 三种框架的数据变化类型： Object.defineProperty() 方法： Object.defineReactive() 方法： let obj = {}; function defineReactive(data, key, val) { Object.define
阅读全文
摘要：这一篇来讲五角星部分，diff算法最精华的内容： 子节点更新策略 一、经典的diff算法优化策略 四种命中查找：（按照顺序排列）（四个指针） 命中一种就不再继续往下命中判断了 如果当前没有命中，就继续往下命中判断 如果都没有命中，就只能用循环来寻找了 1. 新前与旧前 2. 新后与旧后 3. 新后与
阅读全文
摘要：一、感受 diff 算法 当父节点发生改变时，比如 ul 变为 ol ，里面的 li 不发生改变，diff 算法是会暴力删除的。 2. diff 算法处理新旧节点不是同一个节点时。 snabbdom 判断是否是相同的虚拟节点： 创建节点时，所有子节点需要递归创建的。 二、手写第一次上树时 1. 目录
阅读全文
摘要：h 函数支持以下写法，此次手写 h 函数，只支持后面 3 种写法（低配版） 文件结构： vnode.js // 函数的功能非常简单，就是透传参数 export default function (sel, data, children, text, elm) { return { sel, data
阅读全文
摘要：1. 安装 npm init npm i -S snabbdom webpack配置虚拟打包路径： 运行git首页的 snabbdom 示例代码：（放到 index.js 中）： index.html 里要放一个 id 为 container 的 div： 将这两个函数先替换成 空函数： 代码运行成
阅读全文
