Vue3 ref reactive 的区别和代码演示

35 min read

在 Vue2 中，为了让一个响应式数据，我们需要使用 Vue.observable 或 Vue.observableRef 来创建一个可观察的对象。Vue3 中，提供了两种新的响应式类型，即 ref 和 reactive。

  • ref：用于创建一个响应式引用，将普通变量包装为响应式数据。ref 返回的是一个简单对象，该对象有一个 value 属性，用于获取和修改值。可以通过 .value 访问和修改它的值。
  • reactive：用于创建一个响应式对象，将普通的 JavaScript 对象转换为响应式对象。reactive 返回的是一个拦截器对象，当访问或修改属性时会触发相应的更新。

下面是一个简单的代码演示：

import { ref, reactive } from 'vue'

// 使用 ref 创建一个响应式引用
const count = ref(0)
console.log(count.value) // 输出: 0

count.value++ // 修改值
console.log(count.value) // 输出: 1

// 使用 reactive 创建一个响应式对象
const state = reactive({
  username: 'John',
  age: 25
})

console.log(state.username) // 输出: John

state.age++ // 修改属性值
console.log(state.age) // 输出: 26

使用 ref 和 reactive 创建的数据，在模板中使用时，可以直接使用它们的值，不需要通过 .value 来访问。例如：

<template>
  <div>
    <p>Count: {{ count }}</p>
    <p>Username: {{ state.username }}</p>
    <p>Age: {{ state.age }}</p>
  </div>
</template>

<script>
import { ref, reactive } from 'vue'

export default {
  setup() {
    const count = ref(0)
    const state = reactive({
      username: 'John',
      age: 25
    })

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