Vue3学习(六)-其他Composition API(一)

542 阅读1分钟

今天继续学习一些其他Composition API。。

shallowReactive与shallowRef

简单介绍

它们都表示浅响应式,reactive和ref是深响应
shallowReactive:只处理了对象第一层属性的响应式(只响应第一层)
shallowRef:只有重新赋值时才是响应式(不响应内部数据,只响应整体)

使用方法

当然使用的前提都是先引入。 image.png

image.png

image.png

readonly与shallowReadonly

简单介绍

它们表示只读代理对象
readonly:1.深度只读,2.设置readonly后,修改响应式数据会报错。
shallowReadonly:1.浅只读,2.设置shallowReadonly后,修改响应式数据的第一层属性会报错,第二层及其一下可读写。
应用场景:在某些特定情况下,我们可能不希望对数据进行更新的操作,那就可以包装生成一个只读代理对象来读取数据,而不能修改或删除。

使用方法

当然使用的前提都是先引入 image.png

image.png

image.png

toRaw与markRaw

简单介绍

1.toRaw

返回reactive或readonly对象的原始数据
这是一个还原方法,可用于临时读取,得到的数据不具有响应式

2.markRaw

标记一个对象,使其不具有响应式
应用场景:
    有些值不应被设置为响应式的,例如复杂的第三方类实例或Vue组件对象
    当渲染具有不可变数据源的大列表时,跳过代理转换可以提高性能

使用方法

当然使用的前提都是先引入 image.png

image.png image.png

image.png

image.png 先更新一部分,后面会继续更新,敬请期待。