Vue | Vue.js Composition API

简介: Vue | Vue.js Composition API

一、认识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方法 被劫持了

69141b3c469b4652a755f03cf78bfc9d.png

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

相关文章
|
13小时前
|
JavaScript 安全 API
深入理解Vue 3中的Composition API
深入理解Vue 3中的Composition API
13 3
|
1天前
|
JavaScript
Vue中动态Class实战
Vue中动态Class实战
7 0
|
1天前
|
前端开发 JavaScript
Vue+Swiper实现轮播图效果
Vue+Swiper实现轮播图效果
7 1
|
1天前
|
JavaScript 前端开发
vue实现选中效果
vue实现选中效果
6 0
|
1天前
|
JavaScript
Vue中如何实现组件的动态注册?
Vue中如何实现组件的动态注册?
12 2
|
1天前
|
JavaScript 前端开发
Vue中的内置指令有哪些?
Vue中的内置指令有哪些?
10 2
|
1天前
|
缓存 JavaScript 开发者
Vue中的自定义指令有什么作用?
Vue中的自定义指令有什么作用?
10 0
|
1天前
|
JavaScript
在Vue中,如何保证事件监听器的注册和清除操作在正确的生命周期执行?
在Vue中,如何保证事件监听器的注册和清除操作在正确的生命周期执行?
10 2
|
1天前
|
开发框架 JavaScript 前端开发
vue首次加载白屏问题
vue首次加载白屏问题
9 0
|
1天前
|
JavaScript 前端开发 开发者
vue组件化开发,与渐进式框架讲解
vue组件化开发,与渐进式框架讲解
8 3

热门文章

最新文章

相关产品

  • 云迁移中心