ref内部的工作原理十分简单，其实就是将指令ref、:ref或v-bind:ref标识的元素实例存储到当前作用域的 refs获取对应的元素实例。但由于作用域继承上有点小窍门，所以我们能从this.
深入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对象的原型链，那么我们就可以这样引用元素实例
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://cloud.tencent.com/developer/article/1997346 肥仔John
