资讯

历史

科技

环境与自然

成长

游戏

财经

文学与艺术

美食

健康

家居

文化

情感

汽车

三农

军事

旅行

运动

教育

生活

星座命理

深入理解Vue中的ref

创作时间:

作者:

@小白创作中心

深入理解Vue中的ref

引用

CSDN

https://blog.csdn.net/kaka_buka/article/details/145977262

Vue中的ref是一个非常重要的特性，它允许开发者在JavaScript代码中直接访问模板中的DOM元素或组件实例。本文将全面介绍ref的基本概念、原理以及使用场景，帮助读者深入理解这一功能。

什么是ref？

定义

ref是Vue提供的一项特性，主要用于引用模板中的DOM元素或组件实例。在Vue 3中，ref还被扩展为创建响应式引用的API，可以用来存储任意数据。

作用

访问模板中的DOM元素
操作子组件的实例（方法或状态）
在Vue 3中创建响应式变量，存储任意数据

ref的使用场景

1. 访问DOM元素

通过ref，可以轻松获取模板中某个DOM元素的引用，从而直接操作它。以下是一个简单的例子：

<template>
  <div ref="myDiv">Hello, Vue!</div>
</template>
<script>
export default {
  mounted() {
    console.log(this.$refs.myDiv); // 输出DOM元素
  },
};
</script>

2. 操作子组件实例

ref可以用于获取子组件实例，从而调用组件中的方法或访问其公开的属性。

<template>
  <child-component ref="child"></child-component>
  <button @click="updateChild">Update Child</button>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
  methods: {
    updateChild() {
      this.$refs.child.someMethod(); // 调用子组件方法
    },
  },
};
</script>

3. 在Vue 3中创建响应式变量

Vue 3引入了ref API，用于创建响应式变量，并在模板中使用它。

import { ref } from 'vue';
export default {
  setup() {
    const count = ref(0);
    function increment() {
      count.value++;
    }
    return { count, increment };
  },
};

ref的原理解析

Vue 2中的ref

在Vue 2中，ref通常用于获取DOM元素或组件实例。这些引用存储在this.$refs对象中。你可以通过this.$refs.refName来访问它们。

this.$refs.myDiv; // 获取DOM节点
this.$refs.child; // 获取组件实例

Vue 3中的ref

Vue 3中的ref是响应性系统的一部分。本质上，它是一个包含单个值的响应式对象，通过.value来存储和访问值。

import { ref } from 'vue';
const count = ref(0); // 创建一个响应式引用
count.value = 10; // 修改值并触发视图更新

在模板中，Vue会自动解包ref的值，因此可以直接使用{{ count }}，而不需要写成{{ count.value }}。

Vue 3的expose提升封装性

在Vue 3中，默认情况下通过ref获取到的组件实例不会暴露其所有方法和属性。通过expose，我们可以显式指定要暴露的内容。

import { ref, expose } from 'vue';
export default {
  setup(_, { expose }) {
    const message = ref("Hello");
    const changeMessage = (newMsg) => (message.value = newMsg);
    expose({ changeMessage }); // 仅暴露changeMessage方法
    return { message };
  },
};

父组件中：

const childRef = ref(null);
const updateChild = () => {
  childRef.value.changeMessage("Updated Message!");
};

这种设计使得组件更加封装，避免外部直接访问其私有状态。

使用ref的注意事项

避免滥用ref

应优先使用Vue的数据绑定、事件监听等特性。
仅在必要时使用ref，如操作DOM或调用组件的公共方法。

生命周期

Vue 2的$refs在mounted钩子后可用。
Vue 3的DOM引用也需要在onMounted或onUpdated中使用。

限制性

ref不支持动态绑定到条件性渲染的元素。
如果多个元素具有相同的ref名称，$refs会返回一个数组。

示例：结合DOM操作

以下是一个使用ref操作DOM的例子：

<template>
  <div ref="box" style="width: 100px; height: 100px; background: red;"></div>
  <button @click="changeColor">Change Color</button>
</template>
<script>
import { ref, onMounted } from 'vue';
export default {
  setup() {
    const box = ref(null);
    const changeColor = () => {
      if (box.value) {
        box.value.style.background = 'blue';
      }
    };
    return { box, changeColor };
  },
};
</script>