Vue | Vue.js Composition API

️ Vue .js专栏：Vue .js 初级知识 Composition API
‍ 个人简介：一个不甘平庸的平凡人

✨ 个人主页：CoderHing的个人主页

格言: ☀️ 路漫漫其修远兮,吾将上下而求索☀️

你的一键三连是我更新的最大动力❤️

---

目录

一、认识CompositionAPI

Options API的弊端

认识Composition API

二、Setup函数的基本使用

setup函数的参数

setup函数的返回值

三、Setup中数据的响应式

Reactive API(不常用,但是是核心)

Ref API

四、Reactive知识点补充

认识readonly(了解)

readonly的应用

Reactive判断的API(了解)

五、Ref知识点补充

toRefs(偶尔使用)

toRef

六、setup中禁用this

setup不可以使用this

---

一、认识CompositionAPI

Options API的弊端

在Vue2中 编写组件的方式是Options API

        Options API的一大特点就是在 对应的属性 中编写 对应的功能模块

        如 data定义数据 methods中定义方法 computed中定义计算属性 watch中监听属性改变 也包括生命周期钩子

这种代码有很大的弊端:

        当我们 实现某一个功能 时 这个功能 对应的代码逻辑 会被 拆分到各个属性 中

        当组件变得更大更复杂时 逻辑关注点的列表 就会增长, 那么 同一个功能的逻辑就会被拆分的很分散;

        尤其对于那些一开始 没有编写这些组件的人 来说 这个组件的代码 是难以阅读和理解的

认识Composition API

为了使用Composition API 我们需要一个可以实际使用它(编写代码)的地方

在Vue组件中,这个位置就是 setup函数

setup其实就是组件的另外一个选项:

        这个选项强大到我们可以用它来替代之前所编写的大部分其他选项

        如 methods computed watch data 生命周期等

二、Setup函数的基本使用

setup函数的参数

它主要有两个参数:props和context

prop=>父组件传递过来的属性 放到 props对象中, 我们在setup中如果需要使用 直接通过props参数获取:

        对于 定义props的类型, 我们还是 和之前的规则是一样的,在props选项中定义

        并且 在template中 依然是可以 正常去使用props中的属性,如 message

        我们在setup函数中想要使用props 那么不可以通过this去获取

        因为props有直接作为参数传递到setup函数中,我们可以直接通过参数来使用

context称之为SetupContext 它里面包含三个属性:

        Attrs: 所有的非prop的attribute

        slots:父组件传递过来的插槽

        emit:当我们组件内部需要发出事件时 会用到emit

setup函数的返回值

setup是一个函数,他也有返回值 它的返回值能用来做什么?

        可以在模版template中被使用

        可以通过setup的返回值来替代data选项

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

JavaScript let counter = 100 const addClick = ()=>{   // console.log("123")   //.value 才能拿到里面的数据   counter.value++ } const subClick = ()=>{   // console.log("456")   counter.value-- }

JavaScript return { //  想要绑定谁 就写谁   counter,   addClick,   subClick }

如果我们将 counter 在 addClick 或者 subClick进行操作时 是否可以实现界面的响应式?

        不可以!  对于一个 定义的变量来说 默认情况下,Vue不会跟踪它的变化 来引起界面的响应式操作

三、Setup中数据的响应式

Reactive API(不常用,但是是核心)

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

JavaScript const account = reactive({   username:"xiaoxiong",   password:"123456" })

这是什么原因?为什么就可以变成响应式?

        因为 当我们使用 reactive函数处理我们的数据后,数据再次被使用时就会进行依赖收集

        当 数据发生改变 时 所有收集到的依赖 都是 进行对应的响应式操作(如:更新界面)

        事实上,我们编写的 data选项,也是在内部 交给了reactive函数 将其变成响应式对象的

Ref API

Reactive API 对 传入的类型是有限制的 它要求我们必须传入的是 一个对象或数组类型:

        如果传入一个 基本数据类型 会报一个警告

这个时候 Vue3提供了另外一个API:ref API

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

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

JavaScript const counter = ref(0) const message = ref("Hello World")

注:

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

        但在setup函数内部,他依然是一个ref引用,对其进行操作时 依然需要使用ref.value的方式

四、Reactive知识点补充

认识readonly(了解)

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

        Vue3为我们提供了 readonly的方法

        readonly会返回原始对象的只读代理(它依然是一个Proxy 这是一个proxy的set方法被劫持并且不能对其进行修改)

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

一:普通对象 二:reactive返回的对象 三:ref的对象

readonly的使用

在readonly的使用过程中 有以下规则:

        Readonly 返回的对象都是不允许修改的

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

                如 const info = readonly(obj) info对象是不允许被修改的

                当obj被修改时 readonly返回的info对象 也会被修改

                但是 我们不能去修改readonly返回的对象info

本质上就是 readonly返回的对象是setter方法 被劫持了

 

readonly的应用

        在我们传递给其他组件数据时 往往希望其他组件使用我们传递的内容 但是不允许它们修改 就用readonly.

Reactive判断的API(了解)

isProxy

        检查对象 是否是由 reactive或readonly创建的proxy

isReactive

        检查对象 是否由reactive创建的响应式代理;

        如果 该代理是readonly建的 但是 包裹了由 reactive创建的另一个代理,他也会返回true

isReadonly

        检查对象 是否由readonly创建的只读代理

toRaw

        返回 reactive或readonly代理的原始对象(不建议保留对原始对象的引用,谨慎使用)

shallowReactive

        创建一个响应式代理 他跟踪其自身property的响应性,但不执行嵌套对象的深层响应式转换(深层还是原生对象)

shallowReadonly

        创建一个proxy 使其自身的property为只读,但 不执行嵌套对象的深度只读转换(深层还是可读,可写的)

五、Ref知识点补充

toRefs(偶尔使用)

        如果我们使用ES6的解构语法,对reactive返回的对象进行解构获取值,之后 无论是修改解构后的变量,还是修改reactive返回的info 对象,数据都不再是响应式的:

JavaScript const info = reactive({   name:"xiong",   age:18,   height:1.88 }) const {name,age} = info

那么 我们怎么让解构出来的属性是响应式的?

        Vue提供了一个toRefs的函数,可以将 reactive返回的对象中的属性都转为ref

        那么我们再次进行解构出来的name和age本身就是ref的了

JavaScript // 当我们这样做的时候 会返回两个ref对象,它们是 响应式的 const {name,age} = toRefs(info)

        这种做法相当于在 info.name和ref.value之间建立了 链接 任何一个修改都会引起另外一个变化

toRef

        我们希望只转换一个 reactive对象中的属性ref 那么可以使用toRef的方法:

JavaScript const height = toRef(info,"height")

ref其他的API

unref

        如果我们想要获取一个ref引用中的value,那么可以通过unref方法:

                如果参数是一个ref 则返回内部值,否则返回参数本身;

                这是 val = isRef(val) ? val.value : val 的语法糖函数

isRef

        判断值 是否是一个ref对象

shallowRef

        创建一个 浅层的ref对象

triggerRef

        手动触发和shallowRef相关联的副作用

JavaScript const info = shallowRef({name:"xiong"}); // 下面修改的不是响应式 const changeInfo = ()=>{     info.value.name = "xiaoxiong",     // 手动触发     triggerRef(info) }

六、setup中禁用this

setup不可以使用this

官方在this上有这样一段描述 :

        表达的含义是 this并没有指向当前组件实例;

        并且在setup被调用前,data computed methods等都没有被解析

        所以 无法在setup中获取this