vue3响应式高阶用法
1、shallowRef() 浅层更新
ref的浅层作用形式。shallowRef与普通的ref的区别在于，shallowRef不会对对象进行深度的响应式处理，也就是shallowRef包含的对象内部的属性发生变化时，shallowRef本身不会触发重新渲染或响应式更新，所以使用shallowRef时只关心顶层的引用变化。
constdata= shallowRef({ name:'哈哈', age:18});
data.value= { name:'Bob', age:20}; // 修改顶层引用会触发响应式更新
data.value.age=30; // 修改内部属性不会触发响应式更新
2、triggerRef() 内部强制更新
用于强制执行依赖于 shallowRef 的副作用。也就是说当使用shallowRef响应式时只能修改顶层数据，但特殊情况使用 triggerRef可以强制修改内层属性，大大提高灵活性。
constdata= shallowRef({ name:'哈哈', age:18});
data.value.age=30; // 修改内部属性不会触发响应式更新
triggerRef(data); //调用 triggerRef 强制更新
3、customRef() 自定义更新 异步更新、条件性更新、防抖、节流等
customRef可以创建自定义的ref对象，这些对象可以有更复杂的依赖跟踪和依赖更新逻辑。具体是customRef接收一个工厂函数，该函数必须要返回一个具有get和set方法的对象。这些方法用于读取和修改引用值，并且通过get和set里面的逻辑可以显式地控制依赖关系的跟踪和响应式更新。
import{ customRef }from'vue';
functiondebouncedRef(initialValue, delay) {
let timeoutId;
return customRef(
(track, trigger) =>(
{
get() {
returninitialValue; // 使用 track 函数标记依赖track();
},
set(newValue) {
clearTimeout(timeoutId);
timeoutId =setTimeout(() =>{
initialValue = newValue;
trigger();// 使用 trigger 函数触发依赖更新
}, delay);
}
})
);
}
// 使用自定义的ref
const myDebouncedRef =debouncedRef('Hello Word',500);
setup() {
const myDebouncedRef =debouncedRef('Hello Word',500);
onMounted(() =>{// 在组件挂载后，可以通过 .value 访问 ref 的值
console.log(myDebouncedRef.value);// 时间到之后返回 'Hello Word'
});
},
当用户频繁地进行某些操作，如输入搜索、调整窗口大小等，如果不加以控制，可能会频繁触发相关的事件处理函数，这不仅会加重浏览器的负担，还可能导致服务器资源的过度消耗。通过使用防抖技术，可以在用户停止操作一段时间（如几秒内）后再执行相应的操作，这样可以避免在用户频繁操作时过度请求服务器资源，从而提高应用的响应速度和用户体验。
4、shallowReactive() 对象浅更新
shallowReactive不会对对象进行深度的响应式处理，也就是shallowReactive包含的对象内部的属性发生变化时，shallowReactive本身不会触发重新渲染或响应式更新，所以使用shallowReactive时只关心顶层的引用变化
const statetest =shallowReactive(
{ foo:1, nested: {age:18 }}
);
statetest.foo++;// 更改状态自身的属性是响应式的
// 下层嵌套对象不会被转为响应式
isReactive(statetest.nested); // false
statetest.nested.age++;// 不是响应式的
5、 toRaw() 使用 toRaw 获取的原始对象将不再具有响应性 个人感觉用法有点类似深浅拷贝，还可以保留初始化数据
const state= reactive({ count:0}); // 获取响应式转为原始对象
const rawState= toRaw(state);
rawState.count=10; // 修改原始对象不会触发响应式更新
console.log(state.count);// 仍然输出 0，因为 state 是响应式代理，未被修改
6、 markRaw() 标记一个对象，使其不再被 reactive 或 shallowReactive 转换为响应式代理，保持原样，不会变成响应式的。
const someObject= { name:'哈哈'};
const markedObject= markRaw(someObject);
const state= reactive({ obj: markedObject }); // 即使使用 reactive，markedObject 也不会变成响应式
7、shallowReadonly() 对象的顶层属性浅层只读作用
const state= { name: '哈哈', profile: { age: 18, address: { city: '广州', } }};
const shallowState= shallowReadonly(state); // 这将会抛出错误，因为顶层属性是只读的
shallowState.name='change哈哈'; // 这是可以的，因为 `profile` 对象没有被设为只读
shallowState.profile.age=31; // 同样，`address` 对象也可以被修改
shallowState.profile.address.city='深圳';
