Vue3中Composition的API用法详解
作者:会说法语的猪
一、 Reactive判断的API
1. isProxy
检查对象是否由reactive或者readonly创建的proxy ,返回一个布尔值
<script setup> import { reactive, readonly, isProxy } from 'vue' let foo = readonly({ name: 'WFT1' }) // 其中的属性不可修改 let bar = reactive({ name: 'WFT2' }) console.log(isProxy(foo)) // true console.log(isProxy(bar)) // true </script>
2. isReactive
检查对象是否是由reactive创建的响应式代理
如果该代理是readonly创建的,但包裹了由reactive船舰的另一个代理,它也会返回为true
<script setup> import { reactive, readonly, isReactive } from 'vue' let foo = reactive({ name: 'WFT2' }) let bar = readonly(reactive({ name: 'WFT1' })) let info = readonly({ age: 18 }) console.log(isReactive(foo)) // true console.log(isReactive(bar)) // true console.log(isReactive(info)) // false </script>
3. isReadonly
检查对象是否是由readonly创建的只读代理
<script setup> import { readonly, isReadonly } from 'vue' let foo = readonly({ name: 'WFT1' }) console.log(isReadonly(foo)) // true </script>
4. toRaw
返回 reactive 或 readonly代理的原始对象(不建议保留对原始对象的持久引用,请谨慎使用)
<script setup> import { reactive, readonly, toRaw } from 'vue' let obj1 = { name: 'WFT1' } let obj2 = { name: 'WFT2' } let foo = reactive(obj1) let bar = readonly(obj2) let myObj1 = toRaw(foo) let myObj2 = toRaw(bar) console.log(myObj1 === obj1) // true console.log(myObj2 === obj2) // true </script>
5. shallowReactive
创建一个响应式代理,它跟踪其自身property的响应性,但不执行嵌套对象的深层响应式转换(深层还是原生对象)
<template> <div class="main"> <h3>{{ obj.info.name }}</h3> <button @click="edit">深层修改</button> </div> </template> <script setup> import { shallowReactive } from 'vue' let obj = shallowReactive({ info: { name: 'WFT' } }) const edit = () => { obj.info.name = '哈哈哈' console.log(obj) } </script>
上面代码,当点击深层修改按钮时 页面并没有改变,但是控制台打印的obj其中的info.name已经修改。如果换成reactive包裹就会发生改变
6. shallowReadonly
创建一个proxy,使其自身的property为只读,但不执行嵌套对象的深度只读转换(深层还是可读、可写的)
<script setup> import { readonly } from 'vue' let obj = readonly({ info: { name: 'WFT' } }) const edit = () => { obj.info.name = '哈哈哈' } </script>
看这段儿代码,我们去修改其中属性在控制台会给出警告,为一个只读属性,不可修改
但是将readonly换成 shallowReadonly 就可以修改了,当然浅层是不能修改的,深层还是可以修改
<script setup> import { shallowReadonly } from 'vue' let obj = shallowReadonly({ info: { name: 'WFT' } }) const edit = () => { obj.info.name = '哈哈哈' } </script>
二、Ref相关的API
1.isRef
检查对象是否是由ref创建的响应式代理
<script setup> import { ref, isRef } from 'vue' const name = ref('WFT') console.log(isRef(name)) // true </script>
2. toRefs
这个就是,当我们使用了reactive定义了响应式对象的时候,我们想通过es6语法解构出来使用的华,这时候的解构出来的就不是响应式数据。如果想解构出来的也是响应式数据,就要使用toRefs了,使用toRefs包裹之后,再解构出来,里面的每个属性都相当于通过ref包裹了一层的
<template> <div class="main"> <h3>{{ info.age }}</h3> <h3>{{ age }}</h3> <button @click="edit">修改age</button> </div> </template> <script setup> import { reactive, toRefs } from 'vue' let info = reactive({ age: 18 }) let { age } = toRefs(info) const edit = () => { age.value++ } </script>
就像上面的代码示例
3. toRef
这个和toRefs有着一样的功能,只不过这个是将里面的某一个属性转为响应式,该方法接受两个参数,第一个参数就是目标reactive对象,第二个就是我们要操作的属性
<template> <div class="main"> <h3>{{ info.age }}</h3> <h3>{{ age }}</h3> <button @click="edit">修改age</button> </div> </template> <script setup> import { reactive, toRef } from 'vue' let info = reactive({ name: 'wft', age: 18 }) let age = toRef(info, 'age') const edit = () => { age.value++ } </script>
<script setup> import { reactive, toRef } from 'vue' const state = reactive({ name: 'wft', age: 18 }) // 如果我们只希望转换一个reactive对象中的属性为ref响应式变量,那么可以使用toRef方法 const name = toRef(state, 'name') const { age } = state // 这个age不是响应式数据 const changeName = () => state.name = 'WFT' </script>
4. unref
如果我们想要获取一个ref引用中的value,那么也可以通过unref
如果参数是一个ref,则返回内部值,否则返回参数本身;
这是 val = isRef(val) ? val.value : val 的语法糖函数
<script setup> import { ref, unref } from 'vue' const name = ref('WFT') test(name) test('这个名字不是由ref方法包裹的') function test(name) { console.log(unref(name)) } </script>
5. shallowRef
创建一个浅层的ref对象 和 shallowReactive类似
<template> <div class="main"> <h3>{{ obj.info.age }}</h3> <button @click="editAge">修改age</button> </div> </template> <script setup> import { shallowRef } from 'vue' const obj = shallowRef({ info: { name: 'wft', age: 18 } }) const editAge = () => { obj.value.info.age++ console.log(obj.value.info.age) // 19 但是页面没有更新 } </script>
6. triggerRef
手动触发和shallowRef相关联的副作用
还是上面的代码,我们使用shallowRef包裹的浅层ref对象,修改深层变量的时候页面不会进行更新,这时候我们手动调用triggerRef就可以强制更新
<template> <div class="main"> <h3>{{ obj.info.age }}</h3> <button @click="editAge">修改age</button> </div> </template> <script setup> import { shallowRef, triggerRef } from 'vue' const obj = shallowRef({ info: { name: 'wft', age: 18 } }) const editAge = () => { obj.value.info.age++ triggerRef(obj) } </script>
7. customRef (使用极少)
创建一个自定义的ref,并对其依赖项跟踪和更新触发进行显示控制
它需要一个工厂函数 ,该函数接受 track 和 trigger函数作为参数;
并且应该返回一个带有get 和 set的对象
其实上面真正使用到的时候就不多,这个的使用就更少了,所以我也没有很深入去研究这个api,所以这个不做案例代码了,知道有这个东西就好了,大家感兴趣可以自己去百度找一些案例看看,一般做第三方库的时候可能会使用这个api
以上就是Vue3中Composition的API用法详解的详细内容,更多关于Vue3 Composition API的资料请关注脚本之家其它相关文章!