ue.js是一个流行的JavaScript框架，它提供了一种声明式方式来处理DOM。在Vue.js中，有两种主要的方法来访问DOM元素：ref和$refs。在Vue.js 3.0中，ref和$refs之间有了一些变化，这里将详细探讨它们的区别。
1.Vue.js 2.0中的$refs 在Vue.js 2.0中，可以通过$refs访问组件实例中的子组件和DOM元素。可以将$refs添加到组件实例的template中，并使用$refs属性访问它们。例如，以下代码演示了如何使用$refs访问DOM元素：
<template>
<p>
<input type="text" ref="input">
</p>
</template>
<script>
export default {
mounted() {
this.$refs.input.focus();
}
};
</script>在这个例子中，我们在组件的template中添加了一个输入框，并使用ref属性将它赋值为input。在组件的mounted钩子函数中，我们使用this.$refs.input访问该输入框，并使用focus方法将焦点设置到它上面。
2.Vue.js 3.0中的ref 在Vue.js 3.0中，ref属性发生了变化。现在，ref属性返回一个响应式对象，可以直接在template中使用。这意味着我们不再需要使用this.$refs来访问DOM元素。例如，以下代码演示了如何在Vue.js 3.0中使用ref属性：
<template>
<p>
<input type="text" ref="input">
</p>
</template>
<script>
import { ref, onMounted } from 'vue';
export default {
setup() {
Const input = ref(null);
onMounted(() => {
input.value.focus();
});
return { input };
},
};
</script>在这个例子中，我们使用ref函数创建了一个ref属性，并将其命名为input。在setup函数中，我们在onMounted钩子函数中访问了input.value，并使用focus方法将焦点设置到它上面。
需要注意的是，在Vue.js 3.0中，ref属性也可以在组件实例上使用。例如，以下代码演示了如何在组件实例上使用ref属性：
<template>
<child-component ref="child"></child-component>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent,
},
mounted() {
console.log(this.$refs.child);
},
};
</script>在这个例子中，我们在组件实例的template中使用了ref属性，并将其命名为child。在组件实例的mounted钩子函数中，我们使用this.$refs.child访问了该子组件实例。
3.ref和$refs的区别 在Vue.js 3.0中，ref和$refs之间的最大区别是ref属性是响应式的，而$refs不是。这意味着我们可以在template中直接使用ref属性，而不必
使用this.$refs来访问DOM元素。例如，我们可以在template中使用ref属性来绑定一个DOM元素，并直接在模板中修改它的属性值：
<template>
<p>
<input type="text" ref="input" :value="text" @input="text = $event.target.value">
</p>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const input = ref(null);
const text = ref('Hello, world!');
return { input, text };
},
};
</script>在这个例子中，我们创建了一个ref属性，并将其命名为input。我们还创建了一个响应式变量text，并在template中使用它来设置输入框的值。当用户输入文本时，@input事件会触发，将文本绑定到text变量上。
在Vue.js 2.0中，$refs属性不是响应式的，这意味着我们不能直接在模板中使用$refs属性。相反，我们必须在组件实例中使用this.$refs来访问它们。例如，以下代码演示了如何使用$refs属性来访问子组件和DOM元素：
<template>
<p>
<child-component ref="child"></child-component>
</p>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent,
},
mounted() {
console.log(this.$refs.child);
},
};
</script>在这个例子中，我们在组件实例的template中使用了$refs属性，并将其命名为child。在组件实例的mounted钩子函数中，我们使用this.$refs.child访问了该子组件实例。
另一个区别是，ref属性可以在组件中使用，而$refs属性只能在组件实例中使用。这意味着我们不能在子组件中使用$refs属性访问父组件中的DOM元素。相反，我们需要在父组件中使用ref属性并将其传递给子组件。例如，以下代码演示了如何在子组件中访问父组件的DOM元素：
<template>
<p>
<child-component :parentInputRef="input"></child-component>
</p>
</template>
<script>
import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent,
},
setup() {
const input = ref(null);
return { input };
},
};
</script>在这个例子中，我们在父组件中创建了一个ref属性，并将其命名为input。我们还将input属性传递给了子组件，并将其命名为parentInputRef。在子组件中，我们可以使用props访问parentInputRef属性，并在mounted钩子函数中使用this.$el来访问该DOM元素：
<template>
<p>
<!-- child component template -->
</p>
</template>
<script>
export default {
props: ['parentInputRef'],
mounted() {
console.log(this.$el); // this will be the
DOM element console.log(this.parentInputRef.value);
// this will be the input element
},
};
</script>在这个例子中，我们可以看到，我们使用props访问了父组件传递的parentInputRef属性，并使用this.$el来访问DOM元素。
另一个区别是，ref属性可以引用任何JavaScript值，而$refs属性只能引用DOM元素和子组件实例。这意味着我们不能使用$refs属性来引用JavaScript对象或普通的HTML标记。相反，我们需要使用ref属性来引用它们。例如，以下代码演示了如何使用ref属性来引用一个JavaScript对象：
<template> <p> <input type="text" ref="input" :value="text" @input="text = $event.target.value"> <button @click="addPerson">Add Person</button> </p> </template> <script> import { ref } from 'vue'; export default { setup() { const input = ref(null); const text = ref(''); const people = ref([]); function addPerson() { people.value.push({ name: text.value }); text.value = ''; input.value.focus(); } return { input, text, people, addPerson }; }, }; </script>在这个例子中，我们创建了一个响应式变量people，一个addPerson函数，并使用ref属性来引用input元素。在addPerson函数中，我们将文本绑定到people数组中，并将文本清空。然后，我们使用input.value.focus()将焦点重新设置回输入框中
总结一下，ref属性是Vue.js 3.0中新引入的属性，它可以用来创建响应式的JavaScript引用，并可以引用任何JavaScript值，包括DOM元素和子组件实例。$refs属性是Vue.js 2.0中引入的属性，它用于访问DOM元素和子组件实例，但不是响应式的，并且只能在组件实例中使用。在Vue.js 3.0中，我们应该尽可能使用ref属性来引用JavaScript值，并在需要访问DOM元素或子组件实例时使用$refs属性。