组合式api中ref和reactive的区别

ref和reactive是Vue3中用来实现数据响应式的API 一般情况下，定义基本数据类型，定义引用数据类型 ref本质上是reactive的再封装reactive定义引用数据类型（以对象和数组举例），它能够将复杂数据类型的内部属性或者数据项声明为响应式数据，所以reactive的响应式是深层次的，其底层是通过ES6的来实现数据响应式，相对于Vue2的，具有能监听增删操作，能监听对象属性的变化等优点使用reactive定义对象数据类型举例

博主简介🛌某神秘组织成员前端小白，前端优质创作者，阿里云博主，一个开朗的网友有一个名为山鱼社区的社区，收录许多优秀博主的创作内容创作不易希望能得到您的支持，您的支持是我创作的动力✌。

在setup函数中，返回的值是不能够被改变的，通过响应式API（ref和reactive）的响应式代理，可以实现传递动态变化的值。响应式API可以让setup中的非响应数据，传递出来，并使其可以响应，从而实现页面的动态编辑，我们可以把ref和reactive看成对数据的特殊赋值，

setup是vue3中的一个新的配置项vue2中写法可以读取到新写法中的东西，所以setup执行在data之前，可以在ref定义基本类型数据，对象类型的响应式数据reactive定义对象类型数据响应式数据。

1️⃣ reactive和ref函数的共同作用是什么？用函数调用的方式生成响应式数据reactive不能处理简单类型的数据ref参数类型支持更好但是必须通过.value访问修改ref函数的内部实现依赖于reactive函数3️⃣ 在实际工作中推荐使用哪个？推荐使用ref函数，更加灵活。

避免直接修改计算属性的值，计算属性应该是只读的，特殊情况可以配置get set。watch( [ref对象1，ref对象2],(newArr,oldArr) => {...} )watch(ref对象，（newValue,oldValue) => {...} )const 计算属性 = computed (() => {注意：计算属性不应该有“副作用”，比如异步请求/修改dom。作用：侦听一个或者多个数据的变化，数据变化时执行回调函数。注意：脚本中访问数据，需要通过.value。

监视ref定义的基本类型数据{{ sum }} +1监视ref定义的对象类型数据{{ person.name }} {{ person.age }}

组合式 API 是 Vue 3 中的一种新特性，它允许我们通过函数来组织组件的逻辑，而不是依赖于选项式 API 中的选项对象。这使得代码更易于组织和重用，并且可以提高开发效率。

第二步，执行函数，传入一个对象类型的参数，变量接收，返回值state为一个响应式对象，挂载在dom里面改变的时候可以实时更新。如果state后面的对象不用reactive函数包裹的话，点击按钮的话视图时不会更新的。ref函数里面接收一个简单类型或者对象类型的数据，并返回一个响应式的对象。reactive函数只能支持对象类型的函数。返回的结果是一个响应式对象。ref函数包装的变量，修改值的时候必须添加.value属性进行修改。

在 Vue3.0 中，使用 ref() 函数除了可以对某个原始值创建响应式代理对象，还可以获取模板中的指定 DOM 元素。要获取指定 DOM 元素，首先需要为该元素添加一个 ref 属性，然后在 setup() 函数中声明一个名称与 ref 属性值相同的变量，并传入一个空值 null，再通过“变量名.value”的形式就可以获取到该元素。

核心认识ref与reactive并非完全可互换，而是分别针对“独立值/整体替换”和“复合对象/逐字段更新”场景设计。理解两者语义、访问方式和解构注意。建议先分析业务需求：状态是单一值还是多字段聚合？是否需要整体替换或只是字段更新？是否会在多个地方解构或传递？按需选择：简单标志、计数、页码、loading、Boolean、ID 等用ref；多个字段组合成配置、表单、购物车列表、复杂详情对象等用reactive。若有整体替换需求，也可用ref包对象。若用 reactive，注意用或手动清理以触发响应。

Vue是一个渐进式JavaScript框架，具有响应式数据绑定、组件化开发等核心特性。面试常见问题包括：双向数据绑定原理（Vue2使用Object.defineProperty，Vue3改用Proxy）、生命周期钩子（如created、mounted）、组件通信方式（props/emit、provide/inject等）、计算属性与监听器的区别、v-if与v-show的适用场景等。Vuex用于状态管理，包含state、mutations等核心概念；Vue Router支持hash和history两种路由模式

一个小需求让我写这么多代码，可恶！

在之前的 Vue2与Vue3响应式原理与依赖收集详解 一文中，我们讲述了 Vue 2 与 Vue 3 在实现数据响应式处理的设计思路与他们的不同之处，也分析了 Vu

在vue3中，虽然也能写vue2的computed，但还是更推荐使用vue3语法的computed。computed是一个函数。它的参数接收一个函数，这个函数可以是普通函数，也可以是箭头函数，由于vue3中没有this，所以无需关注函数类型对this指向的影响。这个函数就是计算的方法函数。但是通过这种方式定义的计算属性，是只读的，无法对属性进行修改。如果计算属性同时需要读取和修改，要通过下面这种形式：传入computed的参数是一个对象，在对象中配置get和set。

AntDesignVue的Modal组件是一个功能丰富的弹窗控件，支持自定义显示/隐藏(title、width)、遮罩层(mask)和关闭行为(closable、maskClosable)。提供按钮配置(okText、cancelText)和事件监听(@ok、@cancel)。可通过v-model绑定visible状态，支持模板内声明式调用或服务端API方式(Modal.info/success/confirm)。典型使用场景包括信息展示、表单提交和操作确认，支持内容自定义和回调处理，是构建交互式界面的常用

查看项目。