vue3笔记5 响应式API

浅响应式

shallowReactive 只创建第一层数据的响应式
适用于对象结构深，但只需处理最外层属性变化的场景

shallowRef 不处理对象类型的响应式，传对象时不会自动调用reactive
适用于逻辑中不修改对象属性，而替换整个对象的场景

只读

readonly 把响应式数据（ref/reactive）包装为只读的响应式数据
shallowReadonly 浅只读
适用于不希望数据被修改的场景，例如传递响应式数据时，不希望其他组件修改数据

将响应式对象转换为普通对象

toRaw 将reactive对象转换为普通对象
适用于读取响应式对象的数据进行操作，而不希望引起页面更新
markRaw 将普通对象标记为原始数据，防止被转换为响应式数据
适用于防止第三方类库被设置为响应式，或提高渲染不可变的大数据列表性能debounce

自定义ref

可以自行控制建立依赖跟踪和触发更新通知
例如以下防抖函数实现，更新ref值后延迟一定时间才真正更新引用的值，并触发界面更新

<template>
	<input v-model="text" />
</template>
<script>
setup() {
	function useDebouncedRef(value, delay = 200) {
	  let timeout
	  return customRef((track, trigger) => {
	    return {
	      // 从自定义ref中取数了，调用track()触发依赖跟踪，并把value返回
	      get() {
	        // 取数时，通知取数方跟踪此数据变化，建立依赖关系
	        // 不写这个，取数方无法将此ref关联为依赖对象，不会在value更新时重新读取数据处理	        
	        track() 
	        return value
	      },
	      // 向自定义ref设置值，更新value值,并调用更新提醒触发器trigger
	      set(newValue) {
	        clearTimeout(timeout)
	        timeout = setTimeout(() => {
	          value = newValue
	          trigger() // 通知重新解析模板更新界面
	        }, delay)
	      }
	    }
	  })
	}
	return {
		text: useDebouncedRef('hello')
	}
}
</script>

判断响应式数据

isRef
isReactive
isReadonly
isProxy 检查对象是否是由reactive或readonly创建的Proxy对象