Vue 3.0 的 ref 和 reactive 实现 Todolist 的艺术

前端

2023-07-12 18:54:35

Vue 3.0 中的 ref 和 reactive：提升组件开发

导言

Vue 3.0 带来了激动人心的功能，例如 ref 和 reactive，它们彻底改变了 Vue.js 应用程序的开发方式。ref 和 reactive 是强大的工具，可帮助您控制和操作组件中的数据，从而实现更灵活、更响应式的组件。

什么是 ref？

ref 指的是一个特殊指令，它允许您获取组件中任何元素或子组件的引用。有了 ref，您就可以轻松地访问 DOM 元素并与其进行交互。这在各种场景中非常有用，例如表单验证、动画和动态更新 DOM。

ref 的使用方法

要在组件中使用 ref，只需将 ref 指令附加到您要引用的元素或组件：

<template>
  <input ref="myInput" />
</template>

然后，您可以在组件的 setup() 方法中使用 ref.value 访问元素的引用：

import { ref } from 'vue'

export default defineComponent({
  setup() {
    const inputRef = ref(null)

    // ...

    return {
      inputRef,
    }
  },
})

什么是 reactive？

reactive 是一个函数，它将普通对象转换为响应式对象。响应式对象会自动跟踪其属性中的更改，并相应地更新视图。这意味着您无需手动处理 DOM 更新，从而简化了组件开发。

reactive 的使用方法

要将对象转换为响应式对象，请使用 reactive() 函数：

import { reactive } from 'vue'

const todos = reactive([
  { text: 'Learn Vue 3.0', completed: false },
  { text: 'Build a Todolist app', completed: false },
  { text: 'Write a blog post', completed: false },
])

ref 和 reactive 的共同使用

ref 和 reactive 通常结合使用，以实现更强大的功能。例如，您可以将 ref 用于获取 DOM 元素的引用，然后使用 reactive 跟踪该元素的属性：

const inputRef = ref(null)
const inputValue = reactive({ value: '' })

// ...

watch(() => inputRef.value.value, (newValue) => {
  inputValue.value = newValue
})

实现 Todolist

让我们通过实现一个 Todolist 组件来展示 ref 和 reactive 的实际应用：

Todolist 组件

import { defineComponent, ref, reactive } from 'vue'

export default defineComponent({
  setup() {
    const todos = reactive([
      { text: 'Learn Vue 3.0', completed: false },
      { text: 'Build a Todolist app', completed: false },
      { text: 'Write a blog post', completed: false },
    ])

    const inputValue = ref('')

    const addTodo = () => {
      todos.push({ text: inputValue.value, completed: false })
      inputValue.value = ''
    }

    const removeTodo = (todo) => {
      const index = todos.indexOf(todo)
      todos.splice(index, 1)
    }

    const toggleTodo = (todo) => {
      todo.completed = !todo.completed
    }

    return {
      todos,
      inputValue,
      addTodo,
      removeTodo,
      toggleTodo,
    }
  },
})

模板

<template>
  <div>
    <h1>Todolist</h1>
    <input v-model="inputValue" placeholder="Add a new todo" />
    <button @click="addTodo">Add</button>
    <ul>
      <li v-for="todo in todos" :key="todo.text">
        <input type="checkbox" v-model="todo.completed" />
        <span>{{ todo.text }}</span>
        <button @click="removeTodo(todo)">X</button>
      </li>
    </ul>
  </div>
</template>

使用 Todolist 组件

import Todolist from './Todolist.vue'

export default defineComponent({
  components: { Todolist },

  setup() {
    return {
      // ...
    }
  },
})