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函数的参数

它主要有两个参数:propscontext

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方法 被劫持了

Vue | Vue.js Composition API_第1张图片 

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

你可能感兴趣的:(Vue系列,vue.js,前端,javascript,前端框架,1024程序员节)