响应式对象（响应式对象的理解）

本文目录一览：

• 1、vue-watch
• 2、vue响应式数据原理
• 3、22.compositionApi中的ref,reactive,readonly讲解
• 4、vue3教程
• 5、vue3的ref和reactive以及toRef和toRefs的区别。

vue-watch

1、很多情况下，computed和watch可以实现相同的功能；当需要在数据变化时执行异步或开销较大的操作时，使用watch会更好一些。因为computed会立即返回，此时异步操作可能还没有完成；因为数据是响应式的，使得watch有意义。

2、在vue中，使用watch来响应数据的变化。监测 Vue 实例变化的一个表达式或方法。回调函数得到的参数为新值和旧值，用一个函数取代。简洁的说：watch的作用可以监控一个值的变换，并调用因为变化需要执行的方法。

3、watch中的几个常见属性 ：可以在watch中执行复杂的异步操作等；这些是computed不能胜任的。具体可以参考官网的案例 注意 ：在变更 (不是替换) 对象或数组时，旧值将与新值相同，因为它们的引用指向同一个对象/数组。

vue响应式数据原理

1、vue响应式基本原理是基于Object.defineProperty(obj，prop，descriptor)，descriptor里面可以定义get和set方法，可以在获取属性值事触发get方法（可以收集依赖），设置属性值时触发set方法（更新依赖）。

2、Vue响应式原理核心是 数据劫持，采用 ES5 的 object.defineproperty 的 getter 和 setter 方法。

3、当一个vue实例加载时，会进行初始化，将他的配置项options和mixins的内容合并，以options为主，而在初始化data时，会对data对象进行数据劫持，并做代理，通过Object。

4、引言：vue、react 框架的核心都是数据驱动视图也就是model = view，实现的核心也就是 数据响应。

22.compositionApi中的ref,reactive,readonly讲解

reactive API 很好地解决了 Vue2 通过 defineProperty 实现数据响应式时的缺陷。使用也非常简单：当将 ref 分配给 reactive property 时，ref 将被自动解包，无需再用 .value 访问。

vue3（或者vue2 + @vue/composition-api )后，我们更多的关注到了数据的 reactive 特性。比如用 ref 或者 reactive 关键字来构造一个响应式的对象。

解决： 利用 toRefs 可以将一个响应式 reactive 对象的所有原始属性转换为响应式的 ref 属性 利用ref函数获取组件中的标签元素 provide ：向子组件以及子孙组件传递数据。

vue3教程

将回调推迟到下一个 DOM 更新周期之后执行。在更改了一些数据以等待 DOM 更新后立即使用它。

setup 是所有 Composition API 的容器，值为一个函数。

可能要令你有点失望。vue主要是侧重于数据端的。他的目的就是渲染数据和在前端调整一下数据逻辑。他不是像jquery那样让你用来做特技的。就算你要做特技。你也应该通过css3/canvas而不是dom。

接收的参数是页面传递的数据，是一个 object 类型。

我们打开 ElementUI 的官网，根据官网的教程一步步学习。

vue3的ref和reactive以及toRef和toRefs的区别。

即使源 property 不存在， toRef 也会返回一个可用的 ref。这使得它在使用可选 prop 时特别有用，因为可选 prop 并不会被 toRefs 处理。

reactive reactive主要为对象添加响应式对象，接收一个对象作为参数，可以用于为表单等数据做统一响应式处理 toRefs toRefs 用于将响应式对象转换为结果对象，其中结果对象的每个属性都是指向原始对象相应属性的ref。

reactive返回对象的响应式副本。这个比较好理解，跟以前x时代差别不大。

toRef和toRefs可以理解为给 一个响应式对象 的一个或多个 属性创建ref对象 。ref的值会和响应式对象的值保持同步。 区别就是toRef是创建一个，toRefs是一下创建多个。

综上所述，在 vue3 的初始化项目中，与 vue2 对比的最大差异其实就是两点：setup 函数也是 Composition API 的入口函数，我们的变量、方法都是在该函数里定义的，不再使用vue2中的data而是setup。