谈 Vue3 模板引用 ref 的内在运作原理

2023-12-13 12:44:23

在 Vue3 的虚拟 DOM 补丁算法中，ref 的实现依赖于两个关键步骤：

模板编译阶段：
- 当 Vue3 编译模板时，它会解析模板中的 ref 属性，并将其转换成一个特殊的 VNode 属性。
- 该 VNode 属性包含一个指向渲染上下文中的 ref 值的引用。
渲染阶段：
- 在渲染阶段，Vue3 会将 VNode 与渲染上下文中的 ref 相关联。
- 渲染上下文中的 ref 是一个普通的 JavaScript 对象，其属性名称对应于模板中 ref 属性的值。
- 当渲染 VNode 时，Vue3 会检查 VNode 是否具有 ref 属性。如果有，它会将 VNode 的相应元素或组件实例分配给渲染上下文中的 ref。

这样，当我们通过 ref 属性引用 DOM 元素或组件实例时，就可以通过渲染上下文中的 ref 直接访问它们。

为了更好地理解 ref 的实现原理，让我们来看一个简单的示例：

<template>
  <div ref="my-div">
    {{ message }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello World!'
    }
  },
  mounted() {
    console.log(this.$refs.myDiv) // => <div>Hello World!</div>
  }
}
</script>