剖析Vue3中的ref和reactive用法：入门详解

2023-11-20 02:40:34

在Vue3中，ref和reactive是两个极其重要的特性，用于管理响应式数据，帮助您轻松构建动态、交互式的应用程序。本文将从入门到精通，详细剖析ref和reactive的用法，带您深入了解Vue3响应式数据操作的奥秘。

ref：精准获取DOM元素

ref属性允许您在Vue组件中直接访问DOM元素。通过ref，您可以轻松操作DOM元素，添加事件监听器，或执行其他DOM操作。ref的使用非常简单，只需要在组件模板中为HTML元素添加一个ref属性，并指定一个唯一的引用变量即可。

<template>
  <div ref="myDiv">
    <h1>Hello Vue!</h1>
  </div>
</template>

<script>
export default {
  mounted() {
    console.log(this.$refs.myDiv) // 输出：<div ref="myDiv">...</div>
  }
}
</script>

reactive：打造响应式数据对象

reactive则可以将普通JavaScript对象转换为响应式对象。这意味着，当对象的属性发生改变时，Vue将自动更新组件的状态，从而实现数据的实时更新。reactive的使用也非常简单，只需要将要转换的对象传递给reactive函数即可。

const obj = reactive({
  name: 'John Doe',
  age: 30
})

obj.name = 'Jane Doe' // Vue将自动更新组件的状态

ref和reactive的联手合作

ref和reactive可以联手合作，实现更加强大的功能。例如，您可以使用ref来获取DOM元素，然后使用reactive来操作该元素的属性。这样，您就可以轻松实现组件状态与DOM元素的双向绑定。

<template>
  <input ref="myInput" v-model="message">
</template>

<script>
export default {
  data() {
    return {
      message: ''
    }
  },
  mounted() {
    this.$refs.myInput.focus() // 使用ref获取DOM元素并调用其方法
  }
}
</script>