揭秘 Vue 3 Ref 的奥秘：从原理到实战进阶**

2024-02-08 12:46:51

Vue.js Ref 指令：灵活操作 DOM 的利器

在 Vue.js MVVM 框架中，数据响应性和双向绑定为构建交互式用户界面提供了便利。然而，有时我们需要直接访问和操作 DOM 元素，比如获取元素尺寸、位置或进行拖拽操作。这时，Ref 指令就派上用场了。

Ref 原理剖析

Vue.js 中的 Ref

Ref 指令允许我们将 DOM 元素与 Vue 实例关联起来。当元素绑定了 Ref 指令，Vue 将在该元素的 vnode 对象上创建一个指向该元素的引用，并存储在 Vue 实例的 $refs 对象中。

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

<script>
  export default {
    mounted() {
      // 获取 DOM 节点
      const myElement = this.$refs.myRef;
    }
  }
</script>

通过 $refs 对象，我们可以轻松访问所需的 DOM 节点。

实战应用示例

Ref 指令在 Vue.js 开发中有着广泛的应用场景，以下列举几个常见示例：

1. 获取元素尺寸和位置

// 获取元素宽度和高度
const width = this.$refs.myRef.offsetWidth;
const height = this.$refs.myRef.offsetHeight;

// 获取元素在屏幕中的 X/Y 坐标
const rect = this.$refs.myRef.getBoundingClientRect();
const x = rect.left;
const y = rect.top;

2. 元素聚焦和失焦

// 元素聚焦
this.$refs.myInput.focus();

// 元素失焦
this.$refs.myInput.blur();

3. 元素拖拽

// 绑定拖拽事件
this.$refs.myDiv.addEventListener('mousedown', this.startDrag);

// 拖拽开始处理函数
startDrag(e) {
  // 获取鼠标初始位置
  this.startX = e.clientX;
  this.startY = e.clientY;
}

4. 创建自定义指令

Ref 指令还可以扩展 Vue 的功能，比如创建自定义指令实现元素点击特效：

Vue.directive('click-effect', {
  bind(el) {
    el.addEventListener('click', () => {
      el.classList.add('active');
    });
  },
  unbind(el) {
    el.removeEventListener('click');
  }
});