前言
本文是探讨的是"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来获取一个表单输入框的值。例如，在模板中定义如下：
代码语言：javascript复制<template>
<div>
<label for="username-input">Username:</label>
<input type="text" id="username-input" ref="usernameInput">
</div>
</template>在组件中用this.$refs访问DOM元素的实例：
代码语言：javascript复制export default {
mounted() {
console.log(this.$refs.usernameInput.value);
}
}在Vue 3中，我们可以通过ref将一个变量转换成响应式数据，例如：
代码语言：javascript复制<template>
<div>
<p>Count: {{ count }}</p>
<button @click="increment">Increment Count</button>
</div>
</template>然后在组件中定义如下：
代码语言：javascript复制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元素实例。例如，在组件内部定义如下：
代码语言：javascript复制<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腾讯技术创作特训营第二期有奖征文，瓜分万元奖池和键盘手表
