看完vue3，我对ref, refs ,reactive,与 toRefs 的一点思考？

「Offer 驾到，掘友接招！我正在参与2022春招系列活动-经验复盘，点击查看 活动详情 即算参赛

前言

大家好，我是zz,太久没和大家见面啦，最近业务繁忙，又在看机会，写文的时间被严重挤压。金三银四，vue3可以卷起来啦。

引言

最近在看vue3,发现composition-api的出现到底解决了什么问题呢，祖师爷这么设计的动机是什么呢，为啥会有composition-api的出现呢。 其实大家在用vue2的时候都知道存在几个问题。业务复杂，功能增长，代码量增多，越来越难以维护。vue3的出现，可以基于「逻辑功能」去组织代码，而不是 data 放在一块，method 放在一块，这样和用 Vue2 没什么本质上的区别

setup

组合式api的入口，执行时机，组件创建之前执行,一旦props被解析就会执行setup。

在 setup 中你应该避免使用 this，因为它不会找到组件实例。setup 的调用发生在 data property、computed property 或 methods 被解析之前，所以它们无法在 setup 中被获取。

执行顺序如下

setup用法

使用setup接收两个参数： 1.props:组件传入的属性 2.content 我们打印下。

props 是响应式的，你不能使用 ES6 解构，它会消除 prop 的响应性。 content是一个普通的对象,context中就提供了中三个属性：attrs、slot 和emit，分别对应 Vue2.x 中的 $attr属性、slot插槽 和$emit发射事件。

setup 函数的特点

1. setup 函数return 的内容,在模板中可以直接使用，包括变量和方法
2. setup不能使用this关键字

reactive, ref, toRef 与 toRefs

看到这里是不是大大的脑袋，冒出一堆问号，这都有什么区别呢，别着急，我们往下看。

ref

reactive

reactive 相当于 Vue2.x 的 Vue.observable () API，经过 reactive 处理后的函数能变成响应式的数据。注意：只能返回对象的响应式数据，不能创建基本类型。 语法

const 代理对象 = reactive(源对象);接收一个引用类型的对象（或数组），返回一个代理对象（proxy对象）

toRef

官网是这么解释的,可以用来为源响应式对象上的某个 property 新创建一个 ref。然后，ref 可以被传递，它会保持对其源 property 的响应式连接。按我的理解就是要将响应式对象中的某个属性单独给外部使用时候。

toRef()函数用来把一个响应式对象的某个key值转换成ref,是这么实现的。

    function toRef(target, key) {
      return {
        isRef: true,
        get value() {
          return target[key];
        },
        set value(newVal) {
          target[key] = newVal;
        },
      };
    }

toRefs

toRefs和toRef 功能是一致的，但是可以批量创建多个ref对象。

toRefs()的实现

    function toRefs(target) {
      const ret = {};
      for (const key in target) {
        ret[key] = toRef(target, key);
      }
      return ret;
    }

思考题

1. Vue3.0里为什么要用Proxy API替代defineProperty API？

Object.defineProperty只能通过遍历对象属性的方式进行数据劫持，而Proxy则直接可以劫持整个对象，相当于我们直接操作这个对象就可以达到相应式目的；除此之外，除此之外Object.defineProperty API，只能劫持getter和setter，Proxy除getter和setter外还可以劫持apply、has等13种劫持方法

2. Vue3响应式实现原理

通过Proxy(代理)：拦截对象中任意属性的变化，包括属性值的填写,属性值的添加，删除操作。 通过Reflect(反射)：对源对象的属性进行操作

3. ref和reative到底有什么区别？ vue3利用proxy实现响应式，而proxy不能代理基础类型，vue3就只能给他包装成一个对象再进行代理，所以大家可以看到基础类型变成响应式读取值的时候需要.value啦

最后

总之，希望看完这篇文章的你，能够更加喜欢 Vue3。最后再次强调一下，不要在我的文章评论下引战vue好还是react好。他们都有着各自的优缺点，一起进步。