Vue 3
文章平均质量分 75
Vue3专栏
兰亭古墨
这个作者很懒,什么都没留下…
展开
-
《Vue.js 技术与实现》第 11 章 快速 diff 阅读总结
第 11 章主要讲解了 Vue3 在 更新子节点的实现原理。实现原理上使用了快速 diff,它源起于 ivi 和 inferno 这两个框架,Vue 借鉴并扩展它。本章主要解决如下问题:处理相同的前置元素处理相同的后置元素判断是否需要进行DOM移动操作如何移动 DOM 元素处理相同的前置元素function patchKeyedChildren(n1, n2, container) { const newChildren = n2.children; const oldChildr原创 2022-04-02 21:44:23 · 565 阅读 · 0 评论 -
Vue3 最长递增子序列详解
Vue3 最长递增子序列研究本文初衷彻底讲清楚 Vue3 源码中实现最长递增子序列的算法。概念名词**最长递增子序列:**在一个给定的数值序列中,找到一个子序列,使得这个子序列元素的数值依次递增,并且这个子序列的长度尽可能地大。最长递增子序列中的元素在原序列中不一定是连续的。比如:序列 [10, 9, 2, 5, 3, 7, 101, 18] 的最长递增子序列是 [2, 3, 7, 101] 或 [2, 3, 7, 18]。序列 [3, 2, 8, 9, 5, 6, 7, 11, 15, 4]原创 2022-04-01 21:03:15 · 3042 阅读 · 0 评论 -
《Vue.js 技术与实现》第9章 简单 diff 阅读总结
上一章已经基本实现了一个渲染器了,但遗留了一个问题:一组节点和一组节点如何更新?上一章其实已经给出了解决方案:暴力循环,先将旧节点全部 unmount,再将新节点全部 mount但这看上去并不优雅那么,如何解决一组旧节点和一组新节点的比对方案呢?这看上去似乎是个比较复杂的问题针对旧节点的子节点和新节点的子节点数量不一的情况,给出如下方案:取出新旧子节点长度的最小值,Math.min(oldLen, newLen)循环公共长度,进行 patch 更新如果新的子节点长度 大于 旧的子节点长度,.原创 2022-03-30 16:39:49 · 1015 阅读 · 0 评论 -
《Vue.js 技术与实现》第4章 响应式系统的作用和实现 阅读总结
☁️ 2022.03.20 15:30这一章题序中上来就抛出了如下问题:什么是响应式数据和副作用函数?实现中如何避免无限递归?为什么需要嵌套的副作用函数?两个副作用函数之间会产生哪些影响?花费一个晚上+一个下午读完了这一章,读完的第一感觉是信息量巨大。即使之前自己实现过一遍属于自己的 mini-vue,看完本章依然觉得填补了我很多知识盲区,收获很多,但一时很难消化。此刻难消化的原因:很难在头脑中重现源码中针对哪些问题给出了哪些解决方案?对于看完之后合上书本让人感觉虚空的问题,决定用自己方原创 2022-03-24 21:10:22 · 1487 阅读 · 0 评论 -
Vue3 Proxy Reflect
为什么 Vue3 中 Proxy 的 get 中使用的是 Reflect 获取属性值呢?来看一段代码:const target = { name: "yang", get alias() { console.log("this", this); // 打印的是 target return this.name; },};const proxy = new Proxy(target, { get(target, key, receiver) { console.原创 2022-03-20 12:29:56 · 548 阅读 · 0 评论 -
手写 Vue3.0 源码——响应式 api
@vue/reactivity本结实现响应式相关 api,包括如下@vue/reactivity/src/index.tsexport { ref, shallowRef, toRef, toRefs } from "./ref";export { effect } from "./effect";export { computed } from "./computed";export { reactive, shallowReactive, readonly, shallowR原创 2021-07-04 18:24:04 · 297 阅读 · 2 评论 -
手写 Vue3.0 源码 —— 搭建基础开发环境
搭建基础开发环境github: https://github.com/hefeng6500/build-your-own-vue3文档: https://hefeng6500.github.io/vue3.0-analysis/mini-vue3/base-env.html搭建 mini-vue3 基础开发环境全部按照 Vue-next 配置进行操作,删繁就简为实现一个简洁、可用、高效的环境!创建完成后目录如下build-your-own-vue3├─ .gitignore├─ doc│原创 2021-06-12 23:05:30 · 388 阅读 · 6 评论 -
Vue 3.0新特性学习
vue3-appv-model 指令// vue 2.x<ant-input v-model="inputValue"></ant-input>// vue 3.x<ant-input v-model:inputValue="inputValue"></ant-input>v-model 指令在 vue 2.x 和 vue 3.0 存在一些差别2.x 中 v-model 语法糖底层使用的是 :value 和 emit(‘input’),原创 2020-09-05 14:21:54 · 1121 阅读 · 0 评论