vue 更改响应式方法、只读属性、标记响应式数据
shallowReactive & shallowRef
js
// shallowReactive 页面渲染只响应外层属性
// shallowRef 只响应 value 级别属性
/*
m1.name += '==';
m1.a.name += '==';
同时更改页面会响应，因为 m1.name 是外层的
*/
const m1 = shallowReactive({name:'1',a:{name:'4'}})
const m2 = shallowRef({name:'1',a:{name:'2'}})readonly & shallowReadonly
js
// 深度只读 所有都不能更改
const m1 = readonly({name:'1',a:{name:'2'}})
// 浅只读, 深层次属性可以更改
const m2 = shallowReadonly({name:'1',a:{name:'4'}})toRaw & markRaw
ts
interface UserInfo {
name: string;
age: number;
likes?: number[];
}
// 页面显示 user
const user = reactive<UserInfo>({
name: "小明",
age: 18,
});
const arr = [1, 2];
user.likes = markRaw(arr) // 标记并之后再也无法响应
const upData = () => {
const raw = toRaw(user); // 将一个响应式数据变为普通对象
raw.name += "=="; // 界面不会更新
user.likes && (user.likes[0] += 1) // 不会更新响应
}