了解ref和reactive的区别
首先我们都知道ref函数和reactive函数都是用来定义响应式数据；
但是reactive更适合定义复杂的数据类型（json/arr）、ref适合定义基本数据类型（可接收基本数据类型和对象）
reactive:
(1)它的响应式是更加‘深层次’的，底层本质是将传入的数据包装成一个Proxy。
(2)参数必须是对象或者数组，如果要让对象的某个元素实现响应式时比较麻烦。需要使用toRefs
ref:
(1)函数参数可以是基本数据类型，也可以接受对象类型
(2)如果参数是对象类型时，其实底层的本质还是reactive,系统会自动根据我们给ref传入的值转换成：
ref(1)->reactive({value:1})
ref函数只能操作浅层次的数据，把基本数据类型当作自己的属性值；深层次依赖于reactive
(3)在template中访问，系统会自动添加.value;在js中需要手动.value
(4)ref响应式原理是使用 Proxy 来拦截对 ref 对象内 value 属性的访问和修改操作。
ref、toRef、toRefs的区别
-
ref:复制，修改响应式数据不影响以前的数据；数据改变，界面自动更新
-
toRef:引用，修改响应式数据会影响以前的数据；数据改变，界面不自动更新
-
toRefs：
(1)接收一个对象作为参数，它会遍历对象身上所有属性，然后调用单个toRef
(2)将对象的多个属性变成响应式数据，并且要求响应式数据和原始数据关联，且更新响应式数据的时候不会更新界面，用于批量设置多个数据为响应式
应用（1）：
//reactive、ref用法
setup(props, ctx) {
const state = reactive({
flag: false,
count: 0,
tableData: []
})
const total = ref(10)
const add = () =>{
state.count++
}
return {
...toRefs(state),
total
}
}
注意：如果你想给上面的state进行修改，像下面这种修改是错误的：
const changeData = ()=>{
state = {
flag: true,
count: 2,
tableData: []
}
}
这种修改是无法更新成功的。
那么如果我们想给reactive对象赋值，且能够被监听到，不丢掉响应性呢。除了一个个.的方式，还可以怎么做？
（1）reactive嵌套一层
const objList = reactive({
userInfo:{
name:"liki",
age:18,
sex:'男'
}
})
更新时：objList.userInfo = {...}
(2)使用ref
const objList = ref({
name:"liki",
age:18,
sex:'男'
})
更新时:
objList.value = {...}
那么前面说了ref定义简单数据类型；reactive定义复杂数据类型。如果我们用ref定义一个复杂数据类型会打印什么？
打印出来发现value被proxy代理了，怎么回事呢？重要的事情说三遍，👆已经说过一遍了，再说两遍：：
ref接受的数据类型：基本类型，引用类型
- 作用：把参数加工成一个响应式对象，全称为reference对象(简称为ref对象)
- 核心原理：
ref是基于类的访问器属性（getter/setter）实现的；如果传入的是对象则会则通过reactive转换为响应式对象。 这里附上一段简化后的源码：
class RefImpl<T = any> {
private _value: T // 响应式值
private _rawValue: T // 原始值
private dep: Dep = new Dep() // 依赖追踪
constructor(value: T, isShallow: boolean) {
this._rawValue = isShallow ? value : toRaw(value) // 保存原始值
this._value = isShallow ? value : toReactive(value) // 转为响应式值
}
get value() {
this.dep.track() // 依赖追踪
return this._value
}
set value(newValue) {
const rawNewValue = toRaw(newValue) // 获取新的原始值
if (hasChanged(rawNewValue, this._rawValue)) { // 判断是否变化
this._rawValue = rawNewValue
this._value = toReactive(newValue) // 更新响应式值
this.dep.trigger() // 通知依赖更新
}
}
}
function createRef(rawValue: unknown, shallow: boolean) {
if (isRef(rawValue)) {
return rawValue
}
return new RefImpl(rawValue, shallow)
}
好啦，我们再来看看reactive定义的复杂类型,如何打印呢？
const obj = reactive({a:1})
console.log(obj.a) //1
那为什么obj打印出来没有value呢？看打印出来的结果明显会发现是一个Proxy对象，proxy代理了Child对象，所以我们访问的是proxy代理对象的自身属性，因此不需要.value
这里再添加一下reactive的实现原理，贴一段核心代码createReactiveObject：
function createReactiveObject(
target: Target,
isReadonly: boolean,
baseHandlers: ProxyHandler<any>,
collectionHandlers: ProxyHandler<any>,
proxyMap: WeakMap<Target, any>,
) {
// 1. 非对象类型直接返回
if (!isObject(target)) {
if (__DEV__) {
warn(
`value cannot be made ${isReadonly ? 'readonly' : 'reactive'}: ${String(
target,
)}`,
)
}
return target
}
// 2. 如果目标对象是一个已经被代理的对象（RAW 标志存在），直接返回
if (
target[ReactiveFlags.RAW] &&
!(isReadonly && target[ReactiveFlags.IS_REACTIVE])
) {
return target
}
// 3. 检查缓存：如果该对象已经代理过，直接返回缓存的代理
const existingProxy = proxyMap.get(target)
if (existingProxy) {
return existingProxy
}
// 4. 检查对象类型（普通对象、集合类型等）
const targetType = getTargetType(target)
if (targetType === TargetType.INVALID) {
return target // 无效类型直接返回（如：不可扩展对象）
}
// 5. 创建新的代理对象
const proxy = new Proxy(
target,
targetType === TargetType.COLLECTION ? collectionHandlers : baseHandlers,
)
// 6. 缓存代理对象
proxyMap.set(target, proxy)
return proxy
}
好啦就讲到这里了，后续还有什么问题！请记得再评论区找我哦！有什么不对的希望各位大神多多指点呀！！
奥利给！！！
