vue 更改响应式方法、只读属性、标记响应式数据

shallowReactive & shallowRef

// 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

// 深度只读 所有都不能更改
const m1 = readonly({name:'1',a:{name:'2'}})
// 浅只读, 深层次属性可以更改
const m2 = shallowReadonly({name:'1',a:{name:'4'}})

toRaw & markRaw

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) // 不会更新响应
}