从样例中了解Vue2和Vue3中的ref的区别

前言

本文是探讨的是"Vue2和Vue3中的ref的区别"

此文章是个人学习归纳的心得 , 如有不对, 还望指正, 感谢!

个人体会

我先说一下我自己的体会：

在vue2中，ref主要是用来标识结点和组件的，相当于dom里面的id

在vue3中，vue团队重写了ref,主要通过ref来创建响应式元素，并且继承了vue2中的标识作用

详细解释

在Vue 2中

在Vue 2中，ref的主要作用是在模板中获取DOM元素或组件实例。在Vue 3中，除了可以获取DOM元素或组件实例，还可以将一个基本类型的变量转换成响应式的数据，并且不用再通过复杂的步骤来访问响应式数据。Vue 3的ref还支持对象属性和数组索引来访问组件属性或DOM元素。

在Vue 2中，ref是一个帮助我们在模板中访问DOM元素或组件实例的API。例如，我们可以使用ref来访问一个表单输入框的值或组件实例的方法。在Vue 2中，ref还可以用于在父子组件之间进行通信，通过在父组件中使用ref为子组件创建引用来访问子组件实例。

在Vue 3中

在Vue 3中，ref的用途和Vue 2中一样，但它还有一些重要的新功能。在Vue 3中，ref可以包含更多类型的值，例如普通的Javascript变量、响应式的数据和一个函数。此外，Vue 3中的ref还可以用作类似于reactive函数的入口，将一个基本数据类型转换为响应式数据。而且Vue 3中的ref在访问响应式数据时，会自动进行解包和提取值，免去了Vue 2中通过$refs访问的繁琐步骤。最后，Vue 3中的ref还可以通过对象属性和数组索引来访问组件的属性或组件内的DOM元素。

具体样例

好的，接下来分别举例Vue 2和Vue 3中ref的使用：

在Vue 2中，我们可以使用ref来获取一个表单输入框的值。例如，在模板中定义如下：

<template>
  <div>
    <label for="username-input">Username:</label>
    <input type="text" id="username-input" ref="usernameInput">
  </div>
</template>

在组件中用this.$refs访问DOM元素的实例：

export default {
  mounted() {
    console.log(this.$refs.usernameInput.value);
  }
}

在Vue 3中，我们可以通过ref将一个变量转换成响应式数据，例如：

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment Count</button>
  </div>
</template>

然后在组件中定义如下：

import { ref } from 'vue';

export default {
  setup() {
    const count = ref(0);

    function increment() {
      count.value++;
    }

    return {
      count,
      increment
    };
  }
}

在上面的例子中，我们使用了Vue 3的setup函数，并通过ref将一个普通的Javascript变量count转换成了响应式数据。并且可以在组件中直接修改count的值。

除此之外，Vue 3中的ref还可以用于访问组件的属性或组件内的DOM元素实例。例如，在组件内部定义如下：

<template>
  <div>
    <button ref="submitButton" @click="$emit('submit')">Submit</button>
  </div>
</template>

然后在组件外部，我们就可以通过$refs.submitButton来访问这个按钮DOM元素的实例并添加事件监听了。

和传统Dom绑定Api的区别

看到这，就有人会问了如果说在vue3中，ref只是用来创建对象或者数组，字符串之类的变量的？

像let var const一样？

这句话并不完全正确，ref在Vue 3中是用来包装任何JavaScript值的数据结构，包括对象、数组、字符串、数字等等。它可以将任何值变成响应式的，使得值的变化可以自动触发组件的重新渲染。但它并不是专门用来创建对象或数组的，可以用来包装任何类型的数据。

Vue.js 2中的ref不是用作创建对象或数组的。在Vue.js 3中，ref被重构成更通用的响应式数据包装器，可以用于包装任何类型的JavaScript值。

在Vue 3中，ref除了可以用来创建响应式数据包装器之外，也可以像Vue 2中一样，用于在模板中标识DOM元素或组件实例。在Vue 3中，你可以通过在模板中将ref属性设置为一个字符串或一个函数来绑定DOM元素或子组件实例到Vue实例，例如：

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

<child-component ref="myComponent"></child-component>

你可以通过this.$refs来访问这些元素或组件实例，就像在Vue 2中一样：

const myElement = this.$refs.myElement;

const myComponent = this.$refs.myComponent;

需要注意的是，如果你使用了ref属性来标识DOM元素或子组件实例，那么你就无法使用ref来创建响应式数据包装器，因为Vue不知道你的ref是用来标识DOM元素还是创建响应式数据包装器。如果你需要同时使用ref来标识DOM元素和创建响应式数据包装器，你可以使用ref的对象形式来进行定义，例如：

<div :ref="{ element: 'myElement', value: myValue }"></div>

<child-component :ref="{ component: 'myComponent', value: myValue }"></child-component>

在这种情况下，你仍然可以使用this.$refs来访问你的DOM元素和组件实例，但是在访问响应式数据包装器时，你需要使用this.$refs.element.value或this.$refs.component.value，以明确你要访问的是响应式数据包装器的值。

我正在参与2023腾讯技术创作特训营第二期有奖征文，瓜分万元奖池和键盘手表