【Vue3】李南江老师讲解--个人笔记（三）

【 Vue3笔记 】

【 toRaw() 方法 】

toRaw() 方法专门用来获取 ref 或者 reactive 类型的原始数据，如果是获取 ref 类型的原始数据，需要在对象后面添加 .value。
获取原始数据的作用：由于 ref 和 reactive 数据类型每次修改都会被追踪并更新UI界面（消耗性能），如果有些操作不需要监听 和更新UI界面，可以先使用toRaw获取原始数据，对原始数据进行修改。

【 markRaw() 方法 】

markRaw方法：定义数据永远不被追踪，变成非响应式数据，这时候触发myFn函数，name不会改变，依旧是‘lnj’

【 toRef() 方法 】

toRef() 方法和 ref() 方法一样，都是用来创建响应式数据的
toRef：是引用，修改响应式数据会影响以前的数据，界面不会自动更新
ref：是复制，修改响应式数据不会影响以前的数据，界面会自动更新
要求把key值：name变成响应式数据，而value值：‘lnj’定义为非响应式数据

setup() {
	let obj = {name:'lnj'};
	let state = toRef(obj, 'name');
	function myFn() {
		state.value = 'zs';
	}
	return {state, myFn}
}

如果利用 toRef 将某一个对象中的属性变成响应式数据，我们修改响应式数据是会影响到原始数据的，修改了数据不会触发UI界面的更新
如果利用 ref 将某一个对象中的属性变成响应式数据，我们修改响应式数据是不会影响到原始数据的
toRef的应用场景：
让响应式数据与原始数据关联起来，更新响应式数据但是不更新UI界面

【 toRows() 方法】

相当于使用toRef() 方法定义多个属性的响应式数据

setup() {
	let obj = {name:'lnj', age:18};
	let state = toRefs(obj); 
	// 相当于:
	// let name = toRef(obj, 'name');
	// let age = toRef(obj, 'age');
	function myFn() {
		state.name.value = 'zs';
		state.age.value = 666;
	}
	return {state, myFn}
}

【 customRef() 方法 】

返回一个 ref 对象，可以显式的控制依赖追踪和触发响应
可以直接使用官方文档中的定义方式：
customRef 方法

注：接收的track，及get() 方法中调用track()，是为了告诉Vue这个数据是需要追踪变化的
接收的trigger，及set() 方法中调用trigger()，是为了告诉Vue要出发界面更新