vue里ref和$refs详细说明

发布时间：2025-09-21 00:53:38 阅读量： 0 来源： 互联网转载

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><ｓｃｒｉｐｔ>export default {  mounted() {    this.$refs.input.focus();  }};</ｓｃｒｉｐｔ>

在这个例子中，我们在组件的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><ｓｃｒｉｐｔ>import { ref, onMounted } from 'vue';export default {  setup() {    Const input = ref(null);    onMounted(() => {      input.value.focus();    });    return { input };  },};</ｓｃｒｉｐｔ>

在这个例子中，我们使用ref函数创建了一个ref属性，并将其命名为input。在setup函数中，我们在onMounted钩子函数中访问了input.value，并使用focus方法将焦点设置到它上面。

需要注意的是，在Vue.js 3.0中，ref属性也可以在组件实例上使用。例如，以下代码演示了如何在组件实例上使用ref属性：

<template>  <child-component ref="child"></child-component></template><ｓｃｒｉｐｔ>import ChildComponent from './ChildComponent.vue';export default {  components: {    ChildComponent,  },  mounted() {    console.log(this.$refs.child);  },};</ｓｃｒｉｐｔ>

在这个例子中，我们在组件实例的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><ｓｃｒｉｐｔ>import { ref } from 'vue';export default {  setup() {    const input = ref(null);    const text = ref('Hello, world!');    return { input, text };  },};</ｓｃｒｉｐｔ>

在这个例子中，我们创建了一个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><ｓｃｒｉｐｔ>import ChildComponent from './ChildComponent.vue';export default {  components: {    ChildComponent,  },  mounted() {    console.log(this.$refs.child);  },};</ｓｃｒｉｐｔ>

在这个例子中，我们在组件实例的template中使用了$refs属性，并将其命名为child。在组件实例的mounted钩子函数中，我们使用this.$refs.child访问了该子组件实例。

另一个区别是，ref属性可以在组件中使用，而$refs属性只能在组件实例中使用。这意味着我们不能在子组件中使用$refs属性访问父组件中的DOM元素。相反，我们需要在父组件中使用ref属性并将其传递给子组件。例如，以下代码演示了如何在子组件中访问父组件的DOM元素：

<template>  <p>    <child-component :parentInputRef="input"></child-component>  </p></template><ｓｃｒｉｐｔ>import { ref } from 'vue';import ChildComponent from './ChildComponent.vue';export default {  components: {    ChildComponent,  },  setup() {    const input = ref(null);    return { input };  },};</ｓｃｒｉｐｔ>

在这个例子中，我们在父组件中创建了一个ref属性，并将其命名为input。我们还将input属性传递给了子组件，并将其命名为parentInputRef。在子组件中，我们可以使用props访问parentInputRef属性，并在mounted钩子函数中使用this.$el来访问该DOM元素：

<template>  <p>    <!-- child component template -->  </p></template><ｓｃｒｉｐｔ>export default {  props: ['parentInputRef'],  mounted() {console.log(this.$el); // this will be theDOM element console.log(this.parentInputRef.value);// this will be the input element}, }; </ｓｃｒｉｐｔ>

在这个例子中，我们可以看到，我们使用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> <ｓｃｒｉｐｔ> 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 }; }, }; </ｓｃｒｉｐｔ>

在这个例子中，我们创建了一个响应式变量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属性。

上一篇: 微信外链规划：战略部署，建立强大外链网络

下一篇: 大连网站建设人员怎么规划站点结构

vue里ref和$refs详细说明

热门文章