Vue Composition API 第1天

CompositionAPI

前面学的OptionAPI如data()、computed、methods等等都可以用CompositionAPI替代

• 学习之前的那些内容没有用吗？

现在很多公司还是用之前的方式；学习那些东西可以帮助我们了解CompositionAPI替代了哪些内容

• CompositionAPI解决了OptionAPI大组件代码涣散的问题
• 为了开始使用Composition API，我们需要有一个可以实际使用它（编写代码）的地方，这个位置就是 setup 函数
  • setup其实就是组件的另外一个选项
  • 只不过这个选项强大到我们可以用它来替代之前所编写的大部分其他选项；
  • 比如methods、computed、watch、data、生命周期等等(默认不包括props)；
• setup选项nb！！！

mixin

目前我们是使用组件化的方式在开发整个Vue的应用程序，但是组件和组件之间有时候会存在相同的代码逻辑，我们希望对相同的代码逻辑进行抽取。

• 在Vue2和Vue3中都支持的一种方式就是使用Mixin来完成：

  • Mixin提供了一种非常灵活的方式，来分发Vue组件中的可复用功能；
  • 一个Mixin对象可以包含任何组件选项；
  • 当组件使用Mixin对象时，所有Mixin对象的选项将被 混合 进入该组件本身的选项中；

• 使用：

• 全局混入mixin

mixin合并规则

• 如果Mixin对象中的选项和组件对象中的选项发生了冲突，那么Vue会如何操作呢？
  这里分成不同的情况来进行处理；

  • 情况一：如果是data函数的返回值对象

    • 返回值对象默认情况下会进行合并；
    • 如果data返回值对象的属性发生了冲突，那么会保留组件自身的数据；

  • 情况二：如何生命周期钩子函数

    • 生命周期的钩子函数会被合并到数组中，都会被调用；

  • 情况三：值为对象的选项，例如 methods、components 和 directives，将被合并为同一个对象。

    • 比如都有methods选项，并且都定义了方法，那么它们都会生效；
    • 但是如果对象的key相同，那么会取组件对象的键值对；

extends

类似mixin

合并规则同上

setup函数

• 主要有两个参数

  • 第一个参数：props

  • 第二个参数：context

  • 包含三个属性：

    • attrs：所有的非prop的attribute；
    • slots：父组件传递过来的插槽（这个在以渲染函数返回时会有作用，后面会讲到）；
    • emit：当我们组件内部需要发出事件时会用到emit（因为我们不能访问this，所以不可以通过 this.$emit发出事件）；

  • 可以使用对象解构（可以根据当前名称解构，如{ attrs }）的写法

    不能随便解构。比如上面的props解构了就没有响应式了

• 返回值

• setup的返回值可以在模板template中被使用，也就是说我们可以通过setup的返回值来替代data选项；

• 甚至是我们可以返回一个执行函数来代替在methods中定义的方法：

  • 但是，如果我们将 counter 在 increment 或者 decrement进行操作时，是否可以实现界面的响应式呢？
    • 答案是不可以，这是因为对于一个定义的变量来说，默认情况下，Vue并不会跟踪它的变化，来引起界面的响应式操作

Reactive API

我们编写的data选项，也是在内部交给了reactive函数将其编程响应式对象的

如果想为在setup中定义的数据提供响应式的特性，那么我们可以使用reactive的函数

• 原理：

  • 这是因为当我们使用reactive函数处理我们的数据之后，数据再次被使用时就会进行依赖(dependence)收集；

  • 当数据发生改变时，所有收集到的依赖都是进行对应的响应式操作（比如更新界面）；

• 对传入的类型是有限制的，它要求我们必须传入的是一个对象或者数组类型：

  • 如果我们传入一个基本数据类型（String、Number、Boolean）会报一个警告;

  • 这个时候Vue3给我们提供了另外一个API：[ref API](#ref API)

ref API

ref 会返回一个可变的响应式对象，该对象作为一个 响应式的引用 维护着它内部的值，这就是ref名称的来源；

• 它内部的值是在ref的 value 属性中被维护的；

• 这里有两个注意事项：

  • 在模板中引入ref的值时，Vue会自动帮助我们进行解包操作，所以我们并不需要在模板中通过 ref.value 的方式来使用；

    ref的解包是一个浅层解包，在外层包裹上一个(普通JavaScript)对象就不能进行解包了

    • 但如果外层包裹的是一个reactive对象就能进行解包

  • 但是在 setup 函数内部，它依然是一个 ref引用， 所以对其进行操作时，我们依然需要使用 ref.value的方式；

readonly

• 我们通过reactive或者ref可以获取到一个响应式的对象，但是某些情况下，我们传入给其他地方（组件）的这个响应式对象希望在另外一个地方（组件）被使用，但是不能被修改，这个时候如何防止这种情况的出现呢？

• Vue3为我们提供了readonly的方法；

• readonly会返回原生对象的只读代理（也就是它依然是一个Proxy，这是一个proxy的set方法被劫持，并且不能对其进行修改）；

  • 原理:

    const infoProxy = new Proxy(info, {
        get(target,key) { return target[key] },
        set(target,key,value) { warning('不允许修改不可变的值') },
    })
    
    const name = infoProxy.name // hi
    infoProxy.name = "hellow" // 触发警告
    

• 在开发中常见的readonly方法会传入三个类型的参数：

  • 类型一：普通对象；
  • 类型二：reactive返回的对象；
  • 类型三：ref的对象；

readonly的使用

在readonly的使用过程中，有如下规则：

• readonly返回的对象都是不允许修改的；

• 但是经过readonly处理的原来的对象是允许被修改的；

  • 比如 const info = readonly(obj)，info对象是不允许被修改的；
  • 当obj被修改时，readonly返回的info对象也会被修改；
  • 但是我们不能去修改readonly返回的对象info；

• 其实本质上就是readonly返回的对象的setter方法被劫持了而已；