Vue3的 Composition API（一）

2023-11-19 19:52:52

Composition API（一）

前言： 在options API中，存在许许多多的选项，如：data、methods、computed、watch等等。我们要完成某个逻辑，需要到各个部分去书写相关代码，造成逻辑代码非常分散，阅读代码时跳来跳去，可读性非常差，这时 Composition API 来了。

认识`setup`函数

setup函数也是 vue对象里的一个选项，之前写的data、computed都可以在setup函数找到对应的使用。

setup函数参数:

props：父组件传递过来的属性，在组件内还是得和之前一样，在props选项中定义。因为setup中已经没有了 this 要想在 setup 内使用，就得靠传值传入
context:上下文，这是一个对象，对其进行解构：
- attrs:父组件传过来的所有非prop的attribute。
- slots:父组件传递过来的插槽。
- emit:组件向父组件发出事件时用到。

组件内没有使用对应参数，可以不写。

setup函数的返回值：

setup的返回值是一个对象，可以直接在template内进行使用，就像data返回的一个对象一样使用。

**思考:**挂载在页面上的 info 会不会引起刷新。

不会，因为传出的 info 不是响应式的。

Reactive API 的使用

在setup中提供响应式数据，可以使用 Reactive

reactive只能传参数只能是一个对象或者一个数组

通过导出 reactive返回的是一个响应式对象，在setup内部改变值，会使页面也进行刷。

Ref API 的使用

除了使用Reactive API，Ref API 也可以提供响应式数据。

reactive 传入的值必须是一个对象或者数组，那么普通的数据呢？

通过测试发现： 原始数据是个普通对象，以响应式对象来修改对象数据，可以使原始数据改变，但原始对象修改数据，响应式数据是不改变的。

Ref的自动解包

ref( )的返回值是一个 ref 对象，在使用时得 .value 才能拿到值。

注意：在template内会自动解包，不需要 .value 获取值,写了反而是错的。

细节

在 ref对象嵌套在 reactive内，reactive内的 ref 在 setup 内也会自动解包。

<script>
import {reactive, ref} from 'vue'
export default {
  setup(){   
      const counter = ref(0);
      const state = reactive({
        counter
      });
      const changeCounter =_=>{
         console.log(state.counter);  // 0
         console.log(state.counter.value);  // undefined
      }
      return {
        counter,
        changeCounter
      }
  }
}
</script>

还有一种情况在下面的 readonly内介绍。

readonly 的使用

我们希望只希望对象在另一个地方被使用，但不希望它被修改。----->>> readonly的使用。

传入对象

常见的三种类型：

普通对象
reactive返回的对象
ref的对象

返回值也是一个 Proxy，之所以通过这个返回值不能修改传入的数据，是因为这个 Proxy 对setter方法进行了劫持。

注意： 我们readonly( )传入的对象本身就是一个响应式的数据，修改响应式数据的时候， readonly返回的值也会被更新，通过readonly( )返回值想修改传入对象的值，无论传入的数据本身是不是响应式，都会不允许。

对ref 解包的补充

与 reactive 一样，如果任何 property 使用了 ref，当它通过代理访问时，则被自动解包

Reactive判断的API

isProxy: 检查对象是否由 reactive 或 readonly创建的 proxy。
isReactive：
- 检查对象是否由 reactive 设置的响应式代理。
- 若readonly 包裹了reactive 设置的响应式代理 —>>> true。
isReadonly:检查对象是否是由 readonly 创建的只读代理。
toRaw：返回 reactive 或 readonly 代理的原始对象。
shallowReactive：若对象嵌套了对象，那么Reactive是可以深度响应式的，若我们不想对嵌套对象做响应式，可以使用这个 shallowReactive
shallowReadonly:若我们不想对嵌套对象做只读代理，可以使用这个 shallowReadonly

是可以深度响应式的，若我们不想对嵌套对象做响应式，可以使用这个 shallowReactive

shallowReadonly:若我们不想对嵌套对象做只读代理，可以使用这个 shallowReadonly

码农公寓