首页
首页
AI Coding
NEW
沸点
课程
直播
活动
AI刷题
APP
插件
搜索历史
清空
创作者中心
写文章
发沸点
写笔记
写代码
草稿箱
创作灵感
查看更多
会员
登录
注册
vue3源码
甘草倚半夏
创建于2022-03-23
订阅专栏
vue3教程&源码实现
等 10 人订阅
共17篇文章
创建于2022-03-23
订阅专栏
默认顺序
默认顺序
最早发布
最新发布
第十三节:vue3 组件的渲染和更新原理
组件的挂载流程 添加组件类型 组件的渲染 processComponent 组件异步渲染 批处理操作scheduler.js
第十二节:vue3 Diff 算法 最长递增子序列
步骤 1、找到索引先放进去(按照默认最优的情况处理) 2、二分查找 在结果集中找到比当前值大的 用当前值的索引将其替换掉 3、前驱节点追溯 (核心点:记录 “要替换的值的 前一个的索引”)找到真正的最
第十一节:vue3 Diff 算法 乱序比对
入口: 接上一章的 patchKeyedChildren 函数 乱序比对 1、找到 新的vnode需要比对区域 打印结果: 2、遍历老的vnode的需要比对区域 打印结果 3、移动位置 倒序插入
第十节:vue3 Diff 算法 顺序比对
入口 patchKeyedChildren 实现 有key的情况下 比较两个子节点的差异 1. sync from start: i <= e1 && i <= e2 2. sync from end
第九节:vue3 Diff 算法 元素比较
更新的逻辑 如果前后元素不一致, 删除老的 添加新的 老的和新的一样,服用。属性可能不一样,比对属性更新属性 比对子集 前后元素不一致 示例 实现 前后元素一致 文本更新 示例 实现 比较两个元素的属
第八节:vue3渲染原理 Runtime Core: vnode、h函数
使用方法 创建runtime-core包 runtime-core/package.json 虚拟节点的实现 形状标识 | 或运算 或运算 1 : 1 + + : + 1 0 0 0 : 16 = =
第七节:vue3渲染原理 Runtime DOM
Vue中为了解耦, 将逻辑分成了两个模块 运行时 核心 (不依赖于平台的 browser test 小程序 app canvas....) 靠的是虚拟dom 针对不同平台的运行时 vue就是针对浏览器
第六节: vue3响应式补充
多次触发更新处理 处理方法 数组 1) 收集索引 处理方法 2) 长度收集 3) 数组方法 访问变异方法会访问数组的长度,会对长度进行依赖,这里我们停止收集调用方法产生的依赖 effect 1). e
第五节:vue3 Ref实现原理
ef的概念 转换结果 Ref & ShallowRef 使用 实现 1、判断如果是对象 使用reactive将对象转为响应式的 2、set的值不等于初始值 判断新值是否是对象 进行赋值 toRef&t
第四节:vue3-WatchAPI实现原理
使用场景 1、监控对象 可以监控数据变化 数据变化了就重新执行 2、可以去监控一个函数,函数的返回值就是老值 更新后获取新值 3、连续触发watch时需要清理之前的watch操作 达到以最后一次返回结
第三节:vue3-Computed实现原理
1、在constructor 中将用户的getter放到effec中, 能对getter函数进行依赖收集 activeEffect会变为 getter 2、创建ReactiveEffect时,传入sc
第二节:vue3-Reactivity模块-effect
使用方法 逻辑 1、默认执行一次 2、如果非激活的状态 只需要执行函数 不是的话 把activeEffect 暴露到全局 方便别的模块取到 3、嵌套执行处理 4、执行的时候 获取数据 进行依赖收集 5
第一节:vue3-Reactivity模块-reactive
Reactivity模块基本使用 编写reactive函数 1、将数据变成响应式的, reactive 只能做对象的代理 2、在set和get中 用Reflect设置值和取值 3、响应式映射表 防止一
搭建VUE3开发环境
Vue3中使用pnpm workspace来实现monorepo (pnpm是快速、节省磁盘空间的包管理器。主要采用符号链接的方式管理模块) 全局安装pnpm pnpm 安装vue3.0 创建.npm
Vue3设计思想
设计思想比对 Vue3.0更注重模块上的拆分,在2.0中无法单独使用部分模块。需要引入完整的Vuejs(例如只想使用使用响应式部分,但是需要引入完整的Vuejs), Vue3中的模块之间耦合度低,模块
vue3.0教程(2)
PS:自己记录用 看过官网的可忽略哦 渲染函数 h() 参数 示例:通过 level prop 动态生成标题 (heading) 的组件 使用 render 函数重写上面的例子 完整实现 注意事项 V
VUE3.0教程(1)
PS:自己记录用 看过官网的可忽略哦 创建一个应用实例 在应用中注册“全局”组件 应用实例暴露的大多数方法都会返回该同一实例,因此允许链式 根组件 mount 不返回应用本身,返回的是根组件实例 v-