前端培训丁鹿学堂：vue3零碎知识点总结（一）shallowReactive和shallowRef的使用 shallow

shallowReactive就是把数据转为浅层次的响应式数据，也就是说只会把对象的第一层编程响应式的，如果对象里面仍然是对象，则第二层对象不是响应式的。

可以类比浅拷贝,下面的count就不是响应式数据。

const data = shallowReactive({
            name:'zhangsan',
            age:18,
            salary:{
                count:1
            }
        })

shallowRef也是把数据类型转为可响应的。

如果传入的是基本数据类型，则和ref没有区别。如果传入的是对象数据类型，那么ref是底层还是调用了reactive编程proxy对象，变成可响应的，而shaloowRef如果传入的是对象数据类型，则不会变成响应式的。

总结：

shallowReactive 只处理对象最外层的响应式数据，适用于对象结构比较深，但是只会最外层发生改变的数据 shallowRef只处理基本类型的响应式，不对对象类型进行处理。适用于与生成新对象替换的场景。

他们主要在一些特殊场景使用，可以优化性能。

readonly是把数据变成只读的，在页面中只能显示不能修改。 shallowReadonly针对第一层数据是只读的，如果有嵌套的对象数据，是可以修改的。

这两个用的都不是很多，主要用于不希望数据被修改的时候使用。