petite-vue原始碼剖析-ref的工作原理

肥仔John發表於2022-03-15
Vue原始碼

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

相關文章