vue2的ref和$ref

ref是Vue.js中用于给元素或组件添加引用的属性。在vue2中，使用ref属性可以通过this.$refs来访问被引用的元素或组件。根据使用场景的不同，this.$refs得到的对象类型也不同。当ref在简单引用时，this.$refs返回的是VueComponent对象；当ref在v-for指令下使用时，this.$refs返回的是数组对象，且数组长度与v-for中的循环次数相同；当ref在v-show指令下使用时，返回的是多个数组数据；当ref在v-if指令下使用时，返回的是当前显示对象的数组，一直只有一个。

需要注意的是，$refs只有在组件渲染完成后才被填充，初始渲染时不能访问它们，并且$refs是非响应式的，因此不能用它在模板中进行数据绑定。此外，在微信小程序中给DOM元素使用ref是无效的，得到的结果是空对象。

相关问题

vue中ref和$refs怎么配合使用

在Vue中，ref属性用于给DOM元素或子组件添加一个标识，以便在组件的其他部分中可以通过$refs属性引用它们。

要使用ref和$refs配合使用，你可以按照以下步骤进行操作：

1. 在模板中给DOM元素或子组件添加ref属性，例如：

<template>
  <div>
    <input ref="myInput" type="text">
    <button @click="submit">Submit</button>
  </div>
</template>

2. 在组件的JavaScript部分，通过$refs属性来访问ref引用的元素或组件。例如，在submit方法中可以获取输入框的值：

<script>
export default {
  methods: {
    submit() {
      const inputValue = this.$refs.myInput.value;
      // 使用inputValue进行其他操作
    }
  }
}
</script>

通过这种方式，你可以在Vue组件中引用具有ref属性的DOM元素或子组件，并在需要的地方使用$refs来访问它们。需要注意的是，$refs是一个对象，包含了以ref为键名的引用。

vue3使用ref和$refs

在 Vue 3 中，ref 和 $refs 都有了一些变化。

ref：
在 Vue 3 中，ref 不再是一个对象，而是一个函数。我们使用 ref 函数来创建 ref 对象。

import { ref } from 'vue'

const count = ref(0)

在上面的代码中，我们使用 ref 函数创建了一个名为 count 的 ref 对象，并将它的初始值设置为 0。

$refs：
在 Vue 3 中，$refs 仍然可以用来访问组件中的 DOM 元素，但是要注意的是，$refs 中的属性不再是一个对象，而是一个 ref 对象。

<template>
  <div ref="myDiv">Hello World</div>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const myDiv = ref(null)

    return {
      myDiv
    }
  },
  mounted() {
    console.log(this.$refs.myDiv.value)
  }
}
</script>

在上面的代码中，我们首先在模板中使用 ref 属性给 div 元素命名为 myDiv。然后在 setup 函数中，我们使用 ref 函数创建了一个名为 myDiv 的 ref 对象，并将它的初始值设置为 null。最后，我们将 myDiv 对象返回给组件的模板，这样就可以在模板中使用 myDiv.value 来访问 div 元素了。在 mounted 钩子中，我们使用 this.$refs.myDiv.value 来访问 myDiv 对象，从而获取 div 元素的引用。

需要注意的是，在 Vue 3 中，$refs 中的属性只有在组件挂载之后才能访问。因为在组件挂载之前，DOM 元素还没有被创建，所以 $refs 中的属性是 undefined。