Vue3 | ref 与 reactive 的使用

使用 Vue + TypeScript 时，可以通过引入ref和reactive来实现响应式的数据处理。

ref

ref用于将基本数据类型（如字符串、数字、布尔类型等）转换为可响应式的对象。使用示例如下：

import { ref } from 'vue'

const count = ref(0)

此时的count就是一个可响应式的对象，它有以下属性:

• value: 存储了基本数据类型的值的属性，类似于普通变量
• readonly value: 只读的属性，不能对其进行修改

在模板中使用时，需要对value属性进行访问，示例如下：

<template>
  <div>
    <p>Count: {{ count.value }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script lang="ts">
import { ref } from 'vue'

export default {
  setup() {
    const count = ref(0)

    const increment = () => {
      count.value++
    }

    return {
      count,
      increment
    }
  }
}
</script>

reactive

reactive用于将复杂的对象转换为可响应式的对象，使用示例如下：

import { reactive } from 'vue'

const state = reactive({
  count: 0,
  message: 'Hello, world!'
})

此时的state就是一个可响应式的对象，它包含了两个属性：count和message，这两个属性都是可响应式的。

在模板中使用时，可以直接访问state对象及其属性，示例如下：

<template>
  <div>
    <p>Count: {{ state.count }}</p>
    <p>Message: {{ state.message }}</p>
    <button @click="increment">Increment</button>
    <button @click="updateMessage">Update Message</button>
  </div>
</template>

<script lang="ts">
import { reactive } from 'vue'

export default {
  setup() {
    const state = reactive({
      count: 0,
      message: 'Hello, world!'
    })

    const increment = () => {
      state.count++
    }

    const updateMessage = () => {
      state.message = 'Hello, Vue + TypeScript!'
    }

    return {
      state,
      increment,
      updateMessage
    }
  }
}
</script>

需要注意的是，在使用reactive时，如果需要在函数组件中修改对象的属性，需要使用readonly或readonly ref来声明该属性。这样可以确保属性是只读的，但是还是能够被响应式地更新。