Vue3从零开始学习（三）：揭秘ref和reactive

Vue3从零开始学习（三）：揭秘ref和reactive

前言

在Vue2.x中，我们可以在data中定义数据。但是在Vue3中，我们可以在setup函数中使用ref和reactive来创建响应式数据和管理DOM元素。这两种特性使得Vue3更加强大和灵活，能够构建更加复杂的应用。

揭秘ref

ref是用来管理DOM元素的。它可以将DOM元素暴露给Vue实例，以便我们能够在组件中访问和操作它们。ref的使用非常简单，只需要在模板中使用ref属性，并在setup函数中使用ref.value来访问DOM元素。

例如，以下代码演示了如何使用ref来管理一个按钮元素：

<template>
  <button ref="myButton">点我</button>
</template>

<script>
import { ref } from 'vue'

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

    const handleClick = () => {
      console.log('按钮被点击了')
    }

    return {
      myButton,
      handleClick
    }
  }
}
</script>

在上面的代码中，我们在模板中使用ref="myButton"将按钮元素暴露给Vue实例。然后在setup函数中，我们使用ref.value来访问按钮元素，并将其赋给myButton变量。最后，我们使用myButton.value来注册一个点击事件监听器，当按钮被点击时，控制台会输出"按钮被点击了"。

探索reactive

reactive是用来创建可变的响应式数据的。它可以将一个普通对象转换为一个响应式对象，这意味着当对象中的属性发生变化时，Vue实例会自动更新。reactive的使用也很简单，只需要使用reactive函数将一个普通对象转换为一个响应式对象即可。

例如，以下代码演示了如何使用reactive来创建一个响应式对象：

import { reactive } from 'vue'

const state = reactive({
  count: 0
})

在上面的代码中，我们使用reactive函数将一个普通对象{count: 0}转换为一个响应式对象state。然后，我们就可以在组件中使用state.count来访问和修改count的值。当count的值发生变化时，Vue实例会自动更新。

总结

ref和reactive是Vue3中两个非常重要的特性，它们可以帮助我们构建更加强大和灵活的应用。通过使用ref，我们可以管理DOM元素，通过使用reactive，我们可以创建可变的响应式数据。在接下来的文章中，我们将继续探索Vue3的其他特性，敬请期待！