petite-vue源码剖析-ref的工作原理
ref
内部的工作原理十分简单,其实就是将指令ref
、:ref
或v-bind:ref
标识的元素实例存储到当前作用域的$refs
对象中,那么我们就可以通过this.$refs
获取对应的元素实例。但由于作用域继承上有点小窍门,所以我们能从this.$refs
获取的元素实例还是需要注意一下。下面让我为你一一道来吧!
深入ref
工作原理
//文件 ./src/directives/ref.ts
export const ref: Directive = ({
el,
ctx: {
scope: { $refs }
},
get,
effect
}) => {
let prevRef: any
effect(() => {
// 获取指向元素的属性名称
const ref = get()
$refs[ref] = el
// 由于属性名称是可以动态生成的(:ref="name"),若新旧对应的属性名称不同,则清理旧属性
if (prevRef && ref != prevRef) {
delete $refs[prevRef]
}
prevRef = ref
})
return () => {
prevRef && delete $refs[prevRef]
}
}
这段实现是不是言简意赅呢?现在让我们把目光转向上下文对象(Context)的构建吧
//文件 ./src/context.ts
export const createScopedContext = (ctx: Context, data = {}) => {
onst parentScope = ctx.scope
const mergedScope = Object.create(parentScope)
Object.defineProperties(mergedScope, Object.getOwnPropertyDescriptors(data))
// $refs构成$refs对象的原型链
mergedScope.$refs = Object.create(parentScope.$refs)
// ......
}
$refs构成$refs对象的原型链,那么我们就可以这样引用元素实例
createApp({
App: {
$template: `
<div ref="container">
<div v-scope="Modal"></div>
</div>
`,
Modal: {
$template: `
<button @click="handleHide">Hide</button>
`,
handleHide() {
this.$refs.container.style.display = 'none'
}
}
}
}).mount('[v-scope]')
总结
下一篇《petite-vue源码剖析-优化手段template详解》我们将着手解决petite-vue在线模板和在线渲染造成用户体验待优化的问题,敬请期待。
尊重原创,转载请注明来自:https://www.cnblogs.com/fsjohnhuang/p/16006899.html 肥仔John
petite-vue源码剖析-ref的工作原理的更多相关文章
- 老李推荐:第14章9节《MonkeyRunner源码剖析》 HierarchyViewer实现原理-遍历控件树查找控件
老李推荐:第14章9节<MonkeyRunner源码剖析> HierarchyViewer实现原理-遍历控件树查找控件 poptest是国内唯一一家培养测试开发工程师的培训机构,以学员 ...
- 老李推荐:第14章5节《MonkeyRunner源码剖析》 HierarchyViewer实现原理-装备ViewServer-查询ViewServer运行状态
老李推荐:第14章5节<MonkeyRunner源码剖析> HierarchyViewer实现原理-装备ViewServer-查询ViewServer运行状态 poptest是国内唯一 ...
- 老李推荐:第14章6节《MonkeyRunner源码剖析》 HierarchyViewer实现原理-装备ViewServer-启动ViewServer
老李推荐:第14章6节<MonkeyRunner源码剖析> HierarchyViewer实现原理-装备ViewServer-启动ViewServer poptest是国内唯一一家培养 ...
- 老李推荐:第14章3节《MonkeyRunner源码剖析》 HierarchyViewer实现原理-HierarchyViewer实例化
老李推荐:第14章3节<MonkeyRunner源码剖析> HierarchyViewer实现原理-HierarchyViewer实例化 poptest是国内唯一一家培养测试开发工程师的培 ...
- 老李推荐: 第14章2节《MonkeyRunner源码剖析》 HierarchyViewer实现原理-HierarchyViewer架构概述
老李推荐: 第14章2节<MonkeyRunner源码剖析> HierarchyViewer实现原理-HierarchyViewer架构概述 HierarchyViewer库的引入让M ...
- 老李推荐:第14章1节《MonkeyRunner源码剖析》 HierarchyViewer实现原理-面向控件编程VS面向坐标编程
老李推荐:第14章1节<MonkeyRunner源码剖析> HierarchyViewer实现原理-面向控件编程VS面向坐标编程 poptest是国内唯一一家培养测试开发工程师的培训机 ...
- 转 Spring源码剖析——核心IOC容器原理
Spring源码剖析——核心IOC容器原理 2016年08月05日 15:06:16 阅读数:8312 标签: spring源码ioc编程bean 更多 个人分类: Java https://blog ...
- 从 RequireJs 源码剖析脚本加载原理
引言 俗话说的好,不喜欢研究原理的程序员不是好的程序员,不喜欢读源码的程序员不是好的 jser.这两天看到了有关前端模块化的问题,才发现 JavaScript 社区为了前端工程化真是煞费苦心.今天研究 ...
- 梳理源码中 View 的工作原理
欢迎Follow我的GitHub, 关注我的掘金. 在View的工作过程中, 执行三大流程完成显示, 测量(measure)流程, 布局(layout)流程, 绘制(draw)流程. 从perform ...
随机推荐
- 解决No artifacts
前言:maven管理项目时显示No artifacts 错误: 第一步:找到Artifacts 第二步:点击添加 第三步:点击exploded,然后点击应用即可 注意: 名字1和名字2一定要相同 最后 ...
- js判断当前浏览设备
前端开发经常遇到需要判断用户的浏览设备,是pc端还是移动端,移动端使用的是什么手机系统?android.ios.ipad.windows phone等等,有时候还需要知道用户浏览页面是在微信中打开还是 ...
- hibernate中的一级缓存与闪照区
首先Hibernate中的一级缓存默认是打开的,并且范围从session创建到session关闭,存储的数据必须是持久态的数据. 1 //从session创建开始,一级缓存也跟着创建 2 Sessio ...
- 如何在 pyqt 中实现全局事件总线
前言 在 Qt 中可以使用信号和槽机制很方便地实现部件之间的通信,考虑下面这样的场景: 我想要点击任意一个专辑卡并通知主界面跳转到专辑界面,那么一种实现方式如上图所示:点击任意一个蓝色方框所示的专辑卡 ...
- 帆软报表(finereport) 饼图联动
饼图联动:点击饼图1,饼图2和饼图3显示饼图1的关联数据,接着点击饼图2,饼图3显示饼图2的关联数据,点击上方清除级联,饼图则恢复默认展示状态 下面以上图示例效果为例,说明制作过程. 1.为每个饼图准 ...
- python解释器的安装以及解释器多版本共存
版本介绍 python创始人:gukido(龟叔) python1.X 原始版本,几乎不用 python2.x 最高版本2.7(2020年之后不再维护) python3.x 最高版本3.9(一般用3. ...
- .NET 7 预览版 1 发布
宣布 .NET 7 预览版 1 Jeremy 2022 年 2 月 17 日 今天,我们很高兴地宣布 .NET 历史上的下一个里程碑.在庆祝社区和 20 年创新的同时,.NET 7 Preview 1 ...
- 通过PEB寻找函数地址
通过PEB的Ldr参数(结构体定义为_PEB_LDR_DATA),遍历当前进程加载的模块信息链表,找到目标模块. 摘自PEB LDR DATA: typedef struct _PEB_LDR ...
- 聊聊DevOps制品管理-不止是存储制品这么简单
什么是制品? 制品是指由源码编译打包生成的二进制文件,不同的开发语言对应着不同格式的二进制文件:这些二进制文件通常用于运行在服务器上或者作为编译依赖,"制品的管理"是配置管理的重要 ...
- 我们一起来学Shell - shell的条件判断
文章目录 Shell 条件测试语法 符号说明 Shell 测试表达式 文件测试表达式 字符串测试表达式 整数操作符 逻辑操作符 测试表达式的区别总结 Shell 条件判断之if语句 单分支 IF 条件 ...