其他的Composition API

1.shallowReactive与shallowRef

  • shallowReactive:只处理对象最外层属性的响应式(浅响应式)只考虑第一层数据的响应式。
  • shallowRef:只处理基本数据类型的响应式,不进行对象的响应式处理,传递基本数据类型的话跟ref没有任何区别,ref是可以进行对象的响应式处理的

我们正常的ref创建的数据,里面的.value是一个proxy,而shallowRef创建的数据 .value里面是一个object数据类型,所以不会响应式数据

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

2.readonly与shallowReadonly

  • readonly:让一个响应式的数据变成只读的(深只读)
  • shallowReadonly: 让一个响应式数据变成只读的(浅只读)
  • 应用场景:不希望数据被修改的时候
<script>
    import { reactive,readonly,shallowReadonly } from 'vue'
    export default {
        name: 'test9',
        setup(){
            let person = reactive({
				name: '张三',
				job:{
					salary: '20k',
				}
			})
			person = readonly(person) //这个时候修改人的信息就不会改变了,所有的都不能改
			/**
			* 页面不进行响应式的改变,一般存在两种情况:
			* 1.setup里面定义的数据改变了,但是vue没有检测到,这个时候是不会改变的
			* 2.setup里面定义的数据压根儿就不让你改,这个时候也没法响应式
			*/
			person = shallowReadonly(person) //只有最外层不能修改是只读的,但是job还是可以改的
            return {
                person
            }
        }
    }
</script>
版权声明:本文采用知识共享 署名4.0国际许可协议 [BY-NC-SA] 进行授权
文章名称:《其他的Composition API》
文章链接:https://zhuji.vsping.com/4558.html
本站资源仅供个人学习交流,请于下载后24小时内删除,不允许用于商业用途,否则法律问题自行承担。