一网打尽──Vue3 Composition-api新特性

开发 前端
本篇带大家详细了解一下关于Vue3 Composition-api新特性,在体验Vue3之前,我们先来了解一下Vu3到底有哪些亮点之处。

[[416771]]

写在前面

在体验Vue3之前,我们先来了解一下Vu3到底有哪些亮点之处。

总共有6大特点:

  • Performance(性能比vue2的runtime快2倍左右)
  • Tree shaking support(按需打包模块)
  • Better TypeScript support(更好的TS代码支持)
  • Composition API(组合API)
  • Custom Renderer API(自定义渲染API)
  • Fragment, Teleport, Suspense

一、vue3的起源setup

1.理解:vue3.0的组合api舞台是setup

2.setup所有的数据方法等都配置在setup中

3.setup有两种返回值:

  • 若返回一个对象,则对象中的属性、方法,在模板中均可直接使用
  • 若返回一个渲染函数,则可以自定义渲染内容

4.注意:

  • vue3.0尽量不要和vue2的配置混用
  • vue2配置(data、methods、computed等)是可以访问vue3的setup属性方法
  • setup中不可访问vue2的配置(data、methods、computed等)
  • 如果重名,则vue3为准

5.setup不能是一个async函数,因为返回值不再是return的对象,而是promise,模板看不到return对象中的属性(后期也可以使用suspense和异步组件的配合得到promise)

二、ref函数

作用:用于定义一个响应式数据

语法:const name = ref(initValue)

  • 创建一个包含响应式数据的引用对象(reference对象,简称ref对象)
  • js中操作数据:name.value
  • 模板中读取数据:不需要value,直接<div>{{name}}</div>

注意:

  • 接受的数据:基本类型、对象类型
  • 基本数据类型:响应式是靠Object.defineProperty()的get与set进行设置和取值操作
  • 对象类型的数据:内部使用了vue3中的新函数--reactive函数(其实就是proxy代理)

三、reactive函数

  • 作用:用于定义一个对象类型的响应式数据(基本类型不要用它,要用ref函数)
  • 语法:const 代理对象(proxy) = reactive(源对象)接收一个对象或数组,返回一个代理对象(proxy的实例对象,简称proxy对象)
  • reactive定义的响应式是『深层次的』,对象中的所有对象都是响应式的
  • 内部基于es6的proxy实现,通过代理对象内部数据进行操作
  • 经过reactive处理的对象是不能使用解构语法的,因为会失去响应式特性,可以使用toRefs将reactive每个属性都转成ref响应式,这样就可以进行响应式处理。

ref和reactive的差异

reactive就是用于将对象数据转为响应式,与vue2的observable类似,而ref用于获得单独或为基础数据类型转为响应式。

为什么在vue3中会有两个将数据转为响应式数据的api,我们来进行详细说明:

  • ref接受一个内部值并返回一个响应式且可变的ref对象,对象具有指向内部值的单个property.value
  • reactive接受一个对象,并返回对象的响应式副本,其将对象中的每个元素都转为ref对象

简而言之,reactive可以将对象数据转为响应式,可以将对象中的每个元素都转为ref响应式数据;而ref不仅可以将对象数据转为响应式,还可以处理基础数据类型(string、boolean等)。

之所以会有此差异,那时因为vue3中的响应式是基于proxy实现的,而对于proxy的target必须是引用数据类型,即存放在堆内存中通过指针进行引用的对象。为什么是代理的引用数据类型,那是因为简单数据类型每次赋值都是全新的数据,根本无法进行代理,因此难以实现简单数据类型的响应式。

如果我们想要获取简单数据类型的响应式,应该如何做呢?

vue3中也考虑到这点,可以通过ref进行简单数据类型的响应式处理。ref通过创建内部状态,将值挂到value上,因此ref生成的对象要通过.value获取使用。而重写get/set获得的监听,同时对对象的处理也依赖了reactive的实现。

正是如此,ref既可以处理简单数据类型,又可以将引用数据类型进行响应式处理。在实践中,我们应该避免将reactive当作vue2的data在顶部将所有变量进行声明,而是应该结合具体的应用和逻辑进行就近声明。

  1. class RefImpl<T> { 
  2.   private _value: T 
  3.  
  4.   public readonly __v_isRef = true 
  5.  
  6.   constructor(private _rawValue: T, public readonly _shallow = false) { 
  7.     this._value = _shallow ? _rawValue : convert(_rawValue) 
  8.   } 
  9.  
  10.   get value() { 
  11.     track(toRaw(this), TrackOpTypes.GET, 'value'
  12.     return this._value 
  13.   } 
  14.  
  15.   set value(newVal) { 
  16.     if (hasChanged(toRaw(newVal), this._rawValue)) { 
  17.       this._rawValue = newVal 
  18.       this._value = this._shallow ? newVal : convert(newVal) 
  19.       trigger(toRaw(this), TriggerOpTypes.SET'value', newVal) 
  20.     } 
  21.   } 
  22. ... 
  23. const convert = <T extends unknown>(val: T): T => 
  24.   isObject(val) ? reactive(val) : val 
  25. ... 

四、Vue3中的响应式原理

vue2的响应式原理:

  • 对象类型:通过Object.defineProperty()对属性的读取、修改进行拦截(数据劫持)
  • 数组类型:通过重写更新数组的一系列方法来实现拦截。(对数组的变更方法进行包裹)
  1. Object.defineProperty(data,"count",{ 
  2.   get(){}, 
  3.   set(){} 
  4. }) 

存在问题:

  • 新增属性、删除属性,界面不会同步更新
  • 直接通过下表修改数组,界面不会自动更新

vue3的响应式原理

  • 通过proxy代理:拦截对象中任意属性的变化,包括:属性值的读写、属性值的添加、删除等
  • 通过reflect反射:对被代理对象的属性进行操作

五、reactive和ref的差异

定义数据

  • ref:用于定义基本数据类型
  • reactive:用于定义引用数据类型
  • 注意:ref也可以用于定义引用数据类型,内部会自动通过ractive转为代理对象

原理

  • ref:通过Object.defineProperty()的set和get属性实现响应式(数据劫持)
  • reactive:通过Proxy来实现响应式(数据劫持),并通过Reflect操作愿对象内部的数据

使用

  • ref:ref定义的数据需要通过.value进行操作,模板读取数据时不需要使用.value
  • reactive:reactive定义的数据无需.value,即可进行设置和读取

六、计算属性和监视

与vue2中的computed配置功能一致

写法:

  1. import {computed} from "vue"
  2. setup(){ 
  3.   const sum = computed(()=>{ 
  4.     return num1 + num2; 
  5.   }) 
  1. import {computed,reactive} from "vue" 
  2. setup(){ 
  3.   const person = reactive({ 
  4.     firstName:"wen"
  5.     lastName:"bo" 
  6.   }) 
  7.   //简写 
  8.   let fullName = computed(()=>{ 
  9.     return person.firstName + "-" + person.lastName; 
  10.   }); 
  11.    
  12.   //完整 
  13.   let fullName = computed(()=>{ 
  14.     get(){ 
  15.       return person.firstName + "-" + person.lastName; 
  16.     }, 
  17.     set(value){ 
  18.       const newArr = value.split("-"); 
  19.       person.firstName = nameArr[0]; 
  20.       person.lastName = nameArr[1]; 
  21.     } 
  22.   }) 

七、watch函数

与vue2中的watch配置功能一致

注意:

  • 监视reactive定义的响应式数据时,oldValue无法正确获取,强制开启了深度监视(deep配置失败)
  • 监视reactive定义的响应式数据中某个属性时,deep配置有效
  1. let person = reactive({ 
  2.   name:"wenbo"
  3.   age:18, 
  4.   job:{ 
  5.     job1:{ 
  6.       salary:20 
  7.     } 
  8.   } 
  9. }) 
  10.  
  11. // 情况一:监视ref定义的响应式数据 
  12. watch(sum,(newValue,oldValue)=>{ 
  13.   console.log("sum变了",newValue,oldValue); 
  14. },{immediate:true}) 
  15.  
  16. // 情况二:监视多个ref定义的响应式数据 
  17. watch([sum,msg],(newValue,oldValue)=>{ 
  18.   console.log("sum或msg变了",newValue,oldValue); 
  19. }) 
  20.  
  21. /*情况三:监视reactive定义的响应式数据 
  22.   若watch监视的是reactive定义的响应式数据,则无法正确获得oldValue 
  23.   若watch监视的是reactive定义的响应式数据,则强制开启了深度监视 
  24.   此时的deep不生效 
  25. */ 
  26. watch(person,(newValue,oldValue)=>{ 
  27.   console.log("perosn变了",newValue,oldValue); 
  28. },{immediate:true,deep:false}) 
  29.  
  30. //情况四:监视reactive所定义的一个响应式数据中的某个属性 
  31. watch(()=>person.age,(newValue,oldValue)=>{ 
  32.   console.log("person的age变化了",newValue,oldValue) 
  33. }) 
  34.  
  35. //情况五:监视reactive所定义的一个响应式数据中的某些属性 
  36. watch([()=>person.name,()=>person.age],(newValue,oldValue)=>{ 
  37.   console.log("person的name或age变化了",newValue,oldValue) 
  38. }) 
  39.  
  40. //特殊情况-监听的对象的属性还是个对象,此时deep生效,可以进行深度监听 
  41. watch(()=>person.job,(newValue,oldValue)=>{ 
  42.   console.log("person的job变化了",newValue,oldValue) 
  43. },{deep:true}) 

注意:

watch监听reactive定义的对象有五种情况

watch监听ref定义的响应式数据有两种情况:

  • ref定义的是基本类型数据,此时不能对.value进行监听。如const num = ref(0),此时对num.value监听的话相当于直接对num的值(0)进行监听了,想想0有啥变化的。
  • ref定义的是对象数据类型,此时ref处理后的数据是ref实例的。要监听对象的变化,需要对对象的.value进行监听,因为ref对象.value是借助reactive处理的响应式数据proxy。

八、watchEffect函数

watch的套路:既要指明监视的属性,又要指明监视的回调

watchEffect的套路:不用指明监视的哪个属性,监视的回调中用到哪个属性,就监视哪个属性

watchEffect有点类似computed:

  • computed注重的是计算的值,即回调函数的返回值,所以必须要写返回值
  • watchEffect注重的是计算的过程,即回调函数的函数题,所以不用写返回值
  1. let person = reactive({ 
  2.   name:"wenbo"
  3.   age:18, 
  4.   job:{ 
  5.     job1:{ 
  6.       salary:20 
  7.     } 
  8.   } 
  9. }) 
  10.  
  11. // warchEffect所指定的回调中用到的数据只要发生变化,则直接重新执行回调 
  12. watchEffect(()=>{ 
  13.   const x = person.name 
  14.   const y = person.job.job1.salary 
  15.   console.log("watchEffect触发了"
  16. }) 

九、自定义hooks函数

  • hook函数:本质上是一个函数,把setup函数中是用的组合api进行封装
  • 类似于vue2中mixins
  • 优点:复用代码、使得setup中的逻辑更清晰易懂
  1. <div>pageX:{{point.pageX}},pageY:{{point.pageY}}<div> 

hooks文件 usePoint.js

  1. import {reactive} from "vue" 
  2.  
  3. const handleClickPoint = ()=>{ 
  4.   //实现鼠标“打点”相关数据 
  5.   let point = reactive({ 
  6.     pageX:0, 
  7.     pagey:0 
  8.   }) 
  9.    
  10.   //实现鼠标“打点”相关方法 
  11.   const handlePoint = (event)=>{ 
  12.     point.pageX = event.pageX; 
  13.     point.pageY = event.pageY; 
  14.     console.log(event.pageX,event.pageY) 
  15.   } 
  16.   //实现鼠标打点的相关周期函数 
  17.   onMounted(()=>{ 
  18.     window.addEventListener("click",handlePoint) 
  19.   }) 
  20.    
  21.   onBeforeUnmounted(()=>{ 
  22.     window.removeEventListener("click",handlePoint) 
  23.   }) 

十、toRef函数

  • 经过ref、reactive处理的对象不能直接使用解构进行处理,否则就会失去响应式特性
  • 作用:创建一个ref对象,其value值指向另一个对象中的某个属性
  • 语法:const name = toRef(person,"name")
  • 应用:要将响应式对象中的某个属性单独提供给外部使用时
  • 扩展:toRefs与toRef功能一致,但是可以批量创建多个ref对象,语法:toRefs(person)

十一、VUE3生命周期

图片
图片

其它组合式api

1. shallowReactive与shallowRef

shallowReactive:只处理对象最外层属性的响应式(浅响应式)

shallowRef:只处理基本数据类型的响应式,不进行对象的响应式处理

使用时机:

  • 如果有一个对象数据,结构比较深,但变化时只是外层属性变化==》shallowReactive
  • 如果有一个对象数据,后续功能不会修改该对象中的属性,而是生成新的对象来替换==》shallowRef

2. readonly与shallowReadonly

  • readonly:让一个响应式数据变为只读数据(深只读)
  • shallowReadonly:让一个响应式数据变为只读(浅只读)
  • 应用场景:不希望数据被修改时

3. toRaw与markRaw

toRaw

  • 作用:将一个由reactive生成的响应式对象转为普通对象
  • 使用场景:用于读取响应式对象对应的普通对象,对这个普通对象的所有操作,不会引起页面的更新

markRaw

  • 有些值不应该被设置为响应式的,例如:复杂的第三方库
  • 当渲染具有不可变数据源的大列表时,跳过响应式转换可以提高性能
  • 作用:标记一个对象,使其永远不会称为响应式对象
  • 应用场景:

4. customRef

作用:创建一个自定义ref,并对其依赖项跟踪和更新触发进行显式控制

示例:

  1. <template> 
  2.   <input type="text" v-model="str"/> 
  3.   <h1>当前的值:{{str}}</h1> 
  4. </template> 
  5.  
  6.   <script> 
  7.   import {ref, customRef} from "vue"
  8.   export default { 
  9.     setup(){ 
  10.       // 自定义一个ref:myRef 
  11.       const myRef = (value)=>{ 
  12.         return customRef((track,trigger)=>{ 
  13.           return
  14.             get(){ 
  15.               console.log(`有人从myRef中读取了此数据${value}`); 
  16.               track(); 
  17.               return value; 
  18.             }, 
  19.             set(newValue){ 
  20.               console.log(`有人把myRef的数据改为了新数据${newValue}`); 
  21.               value = newValue; 
  22.               trigger();//通知vue去重新解析模板 
  23.             } 
  24.           } 
  25.         }); 
  26.       } 
  27.       const str = myRef("hello"); 
  28.       return
  29.         str 
  30.       } 
  31.     } 
  32.   } 
  33.   </script> 

5. provide与inject

  •  作用:实现祖孙组件间的通信
  • 应用场景:父组件有一个provide选项提供数据,子组件有一个inject来获取使用数据

6. 响应式数据的判断

  •  isRef:检查一个值是否为ref对象
  •  isReactive:检查一个值是否为reactive创建的响应式代理
  •  isReadonly:检查一个对象是否是由readonly创建的只读代理
  •  isProxy:检查一个对象是否是由reactive或readonly创建的代理

vue3中使用hook注意点

hook中存在异步问题

其实在使用中可以发现,其实hook本质上就是进行抽取的函数,灵活性比较高,但是在涉及到异步逻辑时考虑不周全就会导致很多问题。hook是可以覆盖异步情况的,但是必HTML须在setup当中执行时返回有效对象不能被阻塞。

通常异步具有两种风格:

外部没有其它依赖,只是交付渲染的响应变量。对于此种情况,可以通过声明、对外暴露响应变量,在hook中使用异步修改的方式。

外部具有依赖,需要在使用侧进行加工。对于此种情形,可以通过对外暴露Promise的方式,使得外部获取到同步操作的能力。

this的问题

由于setup处于生命周期的beforeCreate和created阶段之间,因此不能获取到this。当然我们可以通过setup的第二个参数context获取到类似与this的部分能力,但是对于想操作路由、vuex等能力则受到了限制,为此最新的router@4、vuex@4都提供了组合式的api。

由于vue2底层限制使得无法使用这些hook,为此可以通过引用实例的方式获取一定的操作能力,也可以通过getCurrentInstance获得组件实例上挂载的对象。

虽然组合式api的响应式原理是通过Object.defineProperty改写属性的,与vue的响应式原理相同,但是在具体实现方式上存在差异,因此在setup中与vue原生的响应式并不互通。正因此,导致即使拿到相应的实例也没有办法监听它们的响应式,只能通过在选项配置进行使用。

vue3中常见的组件

1. Fragment组件

在vue2中:组件必须有一个根标签

在vue3中:组件可以没有根标签,内部会将多个标签包裹在Fragment虚拟元素中

好处:减少标签层级,减少内存占用

2. Teleport

Teleport时倚重能够将组件html结构移动到指定位置的技术

语法:

main.vue

  1. <div name="modal"></div> 
  2. <Modal :isOpen="isOpen" @closeModal="closeModal"/> 
  3. <button @click="openModal" >open modal</button> 

modal.vue

  1. <teleport to='#modal'
  2.    <div class="modal-box" v-if="isOpen"
  3.      <slot>this is a modal</slot> 
  4.      <button @click="handleCloseModal">close</button> 
  5.    </div> 
  6.  </teleport> 

3. suspense

等待异步组件时渲染一些额外内容,让应用有更好的用户体验。

使用步骤:

  • 异步引入组件
  • 使用suspense包裹组件,并配置好default与fallback。
  1. import {defineAsyncComponent} from "vue" 
  2. const child =defineAsyncComponent(()=>import("./components/child.vue")) 

【编辑推荐】

 

责任编辑:姜华 来源: 前端万有引力
相关推荐

2021-08-05 06:54:05

流程控制default

2024-02-27 10:11:36

前端CSS@规则

2020-09-19 21:15:26

Composition

2021-10-11 07:55:42

浏览器语法Webpack

2013-08-02 10:52:10

Android UI控件

2011-12-02 09:22:23

网络管理NetQos

2010-08-25 01:59:00

2013-10-16 14:18:02

工具图像处理

2023-04-06 09:08:41

BPM流程引擎

2021-05-20 11:17:49

加密货币区块链印度

2020-02-21 08:45:45

PythonWeb开发框架

2021-10-29 09:32:33

springboot 静态变量项目

2019-07-24 15:30:00

SQL注入数据库

2023-09-06 18:37:45

CSS选择器符号

2023-09-26 00:29:40

CSS布局标签

2020-10-19 06:43:53

Redis脚本原子

2009-04-02 10:17:00

交换机产品选购

2023-04-03 08:30:54

项目源码操作流程

2015-06-01 10:37:41

数字取证数字取证工具

2019-12-13 16:00:11

Dubbo面试题Java
点赞
收藏

51CTO技术栈公众号