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

·  阅读 15133

「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 中被获取。

image.png

执行顺序如下

image.png

setup用法

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

image.png

image.png

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

setup 函数的特点

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

reactive, ref, toRef 与 toRefs

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

ref

image.png image.png

reactive

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

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

image.png

image.png

toRef

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

image.png

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外还可以劫持applyhas等13种劫持方法

2. Vue3响应式实现原理

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

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

最后

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

分类:
前端
收藏成功!
已添加到「」, 点击更改