介绍

vue3中加入了Composition API，为了区分功能及业务逻辑的处理，让代码风格更加的优雅。

Composition API提供了两种组件中存储数据的方法，ref和reactvie。这两个方法类似于vue2中的data数据存储函数。本文将介绍如使用该方法进行vue3的写法。

示例是直接用script标签定义了setup函数执行，另一种写法也是可以定义setup()函数进行return返回。

vue2风格的`data`

这种风格就是原本vue2的使用data，所有的数据都由data方法中返回，进行数据的定义。

data示例代码：

<template>
  <div>
    data count is:
    <button type="button" @click="count++">{{ count }}</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      count: 0
    }
  }
}
</script>

vue3的`ref`

在vue3的加入了ref的Composition API，看下来自官网vue3文档的说明：

ref接受一个内部值并返回一个响应式且可变的 ref 对象。ref 对象仅有一个 .value property，指向该内部值。

就是说ref可以定义的值用于读取，且其内部只有一个value值是可变的。

ref示例代码：

<template>
  <div>
    ref count is: <button type="button" @click="addCount">{{ count }}</button>
  </div>
</template>
<script setup>
import {ref} from 'vue'

const count = ref(0)
const addCount = () => {
  count.value++ //ref的常量不能直接count++
}
</script>

在vue3的变化，不是使用data来存储数据，而是使用setup函数来返回数据。这个新函数取代了data、beforeCreate、和created，并且是使用 Composition API 的地方。
在setup函数中，执行了addCount函数的时候，变量count不能直接进行赋值++,而是进行count.value++，因为ref是一个只读的变量，要使用value进行内部值。

vue3的`reactive`

而在vue3另外添加了reactive的使用。看下来自官网vue3文档的说明：

响应式转换是“深层”的——它影响所有嵌套 property。在基于 ES2015 Proxy 的实现中，返回的 proxy 是不等于原始对象的。建议只使用响应式 proxy，避免依赖原始对象。

就是说reactive可以定义多个嵌套的值，里面可以是ref的变量，将会可以直接读取并赋值。即有点像数组对象的该概念。

相对于ref不同的是，reactive的值是可以直接进行赋值使用的。而不需要进行内部value赋值。

reactive示例代码：

<template>
  <div>
    reactive count is: <button type="button" @click="addCount">{{ state.count }}</button>
  </div>
</template>
<script setup>
import {reactive} from 'vue'

const state = reactive({
  count: 0
})
const addCount = () => {
  state.count++
}
</script>

什么时候使用`ref`或`reactive`

ref通常用于初始化一个值(字符串、数字、布尔值等)
reactive通常用于定义对象或数组，还可以配合toRefs函数使用，前往文档查看
其他的是可以根据业务代码，实际灵活使用

总结

Vue 3 将 Composition API 与单文件组件一起使用，<script setup>建议使用更简洁和符合人体工程学的语法。

利用ref和reactive函数来维护本地状态，开发人员可以使用新工具来编写更易维护和可读的代码，可以更好的进行协同工作，而不会导致一个又一个的问题。

虽然Composition API是可选的，鼓励大家去尝试使用，来自初学者的建议。

vue3 Composition API中的ref和reactive用法

介绍

vue2风格的data

vue3的ref

vue3的reactive

什么时候使用ref或reactive

总结

vue2风格的`data`

vue3的`ref`

vue3的`reactive`

什么时候使用`ref`或`reactive`