vue3组合API中setup、 ref、reactive的使用大全

Vue 3 组合式 API 中 setup、ref、reactive 的使用大全

Vue 3 是 Vue.js 的最新版本，全面升级了组件系统并引入了新的组合 API，使得 Vue.js 在开发复杂应用时更加灵活可维护。其中 setup、ref、reactive 是 Vue 3 组合式 API 中最常用的三个方法，可以帮助我们快速地实现组件的数据响应式和逻辑处理。下面是它们的完整使用攻略：

1. setup 方法

setup 是 Vue 3 组件中必需的方法，接受两个参数：props 和 context。props 为组件传递的属性集合，context 提供了一些实用的上下文信息。

setup(props, context) {
  // 组件的逻辑处理
}

示例一：对组件属性进行处理

在 setup 中，我们可以对组件的属性进行处理，例如将属性的值进行求和：

<template>
  <div>
    <p>{{ result }}</p>
  </div>
</template>

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

export default {
  props: {
    a: Number,
    b: Number
  },
  setup(props) {
    const result = ref(props.a + props.b)
    return { result }
  }
}
</script>

示例代码中，我们通过 ref 函数来将值设置成响应式的，然后在 return 语句中将其返回，从而在模板中实现双向数据绑定。

示例二：使用 context 对象

在 setup 中，我们还可以使用 context 对象来获得上下文信息，例如访问组件的 $emit 方法：

<template>
  <button @click="handleClick">Click Me</button>
</template>

<script>
import { setup, useContext } from 'vue'

export default {
  setup() {
    const { emit } = useContext()

    const handleClick = () => {
      emit('click-event')
    }

    return { handleClick }
  }
}
</script>

示例代码中，我们使用 useContext 函数来获取上下文对象。然后，我们可以使用 emit 方法触发 click-event 事件。

2. ref 方法

ref 是 Vue 3 组件中创建响应式数据的函数，可以接受任何 JavaScript 原始类型、对象和数组。通过使用 ref，我们可以很容易地将普通数据变成响应式数据。

const count = ref(0)

示例一：创建响应式数据

在 Vue 3 组件中，我们通过 ref 函数来创建响应式数据，并把它赋值给组件对象：

<template>
  <div>
    <p>{{ count }}</p>
    <button @click="handleClick">Click me</button>
  </div>
</template>

<script>
import { ref } from 'vue'

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

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

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

示例代码中，我们在 setup 方法中使用 ref 函数创建了 count 变量，并将其初始值设置为 0。然后，我们将 count 和 handleClick 函数设置为组件对象的属性，从而实现了数据的响应式和事件处理。

示例二：直接使用 ref 的限制

需要注意的是，直接使用 ref 函数所创建出来的变量在进行操作时，需要通过 .value 属性进行访问修改。

const count = ref(0)
count.value++

3. reactive 方法

reactive 是 Vue 3 组件中创建响应式对象的函数，可以将一个 JavaScript 对象转化为响应式数据。不同于 ref 函数所创造的变量，ref 中可以直接声明并用 .value 进行修改的特性，reactive 函数所生成的是对象。

const state = reactive({ count: 0 })

示例一：创建响应式对象

在 Vue 3 组件中，我们通过 reactive 函数来创建响应式对象：

<template>
  <div>
    <p>{{ state.count }}</p>
    <button @click="handleClick">Click me</button>
  </div>
</template>

<script>
import { reactive } from 'vue'

export default {
  setup() {
    const state = reactive({ count: 0 })

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

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

示例代码中，我们在 setup 方法中使用 reactive 函数创建了 state 变量，包含一个 count 属性。然后，我们将 state 和 handleClick 函数设置为组件对象的属性，从而实现了数据的响应式和事件处理。

示例二：多层嵌套对象的响应式更新

当 reactive 函数所生成的对象里还存在嵌套的对象时，需要使用 .value 进行打开，或是用来访问当前 reactive 数据的属性值。示例如下：

const state = reactive({
  count: 0,
  person: {
    age: 0,
    name: ''
  }
})

state.count++
state.person.age++
state.person = {
  age: 20,
  name: 'Tom'
}
state.person.age++

示例代码中，我们在 state 中定义了一个 person 对象，包含 age 和 name 两个属性。然后，我们通过 reactive 函数将 state 对象转化为响应式数据，并进行了一系列的操作。需要注意的是，当我们重新赋值一个新的对象时，它同样需要是响应式数据。