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/fsjoh... 肥仔John

《Petite-Vue源码剖析》小册子

《Petite-Vue源码剖析》结合示例从在线渲染、响应式系统和沙箱模型分别对源码逐行解读，其中还对响应式系统中利用JS引擎的SMI优化依赖清理算法作详细分析。绝对是入门Vue3源码前绝佳的踏脚石喜欢的话记得转发、赞赏哦！