Vue | Vue.js Composition API

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

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

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

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

一、认识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