Vue3中composition API中ref和reactive函数的使用
ref函数
我们知道，在vue3.0引入了composition API,setup函数是其核心函数
在setup函数中，可以使用ref函数，用于创建一个响应式数据，当数据发生改变时，Vue会自动更新UI 例如：使用ref函数定义一个变量count
import { ref } from 'vue'; function useChangeCount() { let count = ref(0); function change_count() { count.value += 1; } return { count, change_count } } export default useChangeCount; 复制代码然后在组件中引入该模块：import useChangeCount from "./composition_tiny_js/count" 并且在组件的setup中使用，并通过return的形式将外界需要用到的变量和函数暴露出去
setup() { let { count, change_count } = useChangeCount(); return { count, change_count }; } 复制代码这样上面暴露的count变量,change_count方法就可以在外界使用了
<template> <div> <h1>{{ count }}</h1> <button @click="change_count">点我</button> </div> </template> 复制代码需要注意的是：
在
setup中定义的变量或方法，都必须通过return {xxx,xxx}暴露出去，外界才能使用ref函数仅能监听基本类型的变化，不能监听复杂类型的变化（比如对象、数组）
reactive函数
reactive的用法与ref的用法相似，也是将数据变成响应式数据，当数据发生变化时UI也会自动更新。不同的是ref用于基本数据类型，而reactive是用于复杂数据类型，比如对象和数组 例如：定义一个对象类型的变量user
<template> <div> <p>{{ user }}</p> <button @click="increase">click me! one year later</button> </div> </template> <script> import { reactive } from "vue"; export default { name: "reactive", setup() { const user = reactive({ name: "Alice", age: 12 }); function increase() { ++user.age } return { user, increase }; }, }; </script> 复制代码如上，当点击按钮时，让数据user.age加1，当Vue发现数据发生变化，UI会自动更新 那我们验证了，确实reactive函数可以将一个复杂数据类型变成响应式数据。我们不妨将reactive函数执行的结果打印出来看下，看看它返回值是什么 我们发现，
reactive执行结果是将传递的对象包装成了proxy对象
接下来我们测试一下，如果传递基本数据类型呢？
<template> <div> <p>{{ userAge }}</p> <button @click="increase">click me! one year later</button> </div> </template> <script> import { reactive } from "vue"; export default { name: "reactive", setup() { let userAge = reactive(12); function increase() { console.log(userAge); ++userAge; } return { userAge, increase }; }, }; </script> 复制代码运行发现，基本数据传递给reactive，reactive并不会将它包装成porxy对象，并且当数据变化时，界面也不会变化
需要注意的是，reactive中传递的参数必须是json对象或者数组，如果传递了其他对象（比如new Date()），在默认情况下修改对象，界面不会自动更新，如果也需要具有响应式，可以通过重新赋值的方式实现
作者：Andy_W
链接：https://juejin.cn/post/7023939997778575373