Vue3 响应式 API：揭秘 ref 背后的奥秘

2023-12-31 19:42:21

在我最近研究 Vue3 源代码时，我对响应式 API 产生了浓厚的兴趣，特别是 ref。在这个技术博客文章中，我将深入探讨 ref 的工作原理，帮助你理解它的力量和局限性。

响应式 API：让数据活起来

Vue3 的响应式 API 是一个强大的工具，它允许你轻松地创建动态更新的 UI 组件。当响应式数据发生变化时，响应式 API 将自动更新绑定到该数据的 DOM 元素。

ref：引用对象和DOM元素

ref API 允许你通过特殊属性 :ref="someName" 获取组件或 DOM 元素的引用。此引用存储在组件实例的 $refs 对象中。

<template>
  <div ref="myElement"></div>
</template>

<script>
  export default {
    mounted() {
      console.log(this.$refs.myElement); // DOM元素
    }
  }
</script>

这允许你直接与组件或 DOM 元素进行交互，而无需通过 Vue 实例访问它们。

与其他响应式 API 的协同作用

ref 可以与其他响应式 API 结合使用，例如 v-model，以创建强大的数据绑定解决方案。

v-model 与 ref

v-model 指令提供了一种便捷的方式来管理表单输入和组件状态。将其与 ref 结合使用，你可以访问底层 DOM 元素，从而获得更精细的控制。

<template>
  <input v-model="myData" ref="myInput"></input>
</template>

<script>
  export default {
    mounted() {
      this.$refs.myInput.focus(); // 聚焦输入框
    }
  }
</script>

watch 与 ref

watch API 允许你监视响应式数据的变化。将其与 ref 结合使用，你可以监视组件或 DOM 元素的特定属性。

<template>
  <div ref="myElement"></div>
</template>

<script>
  export default {
    watch: {
      '$refs.myElement.offsetHeight': {
        handler(newValue, oldValue) {
          // 监视 DOM 元素的高度变化
        }
      }
    }
  }
</script>