前言
我们都知道vue3.0版本对所有的底层代码做了一次更新，尤其是响应式跟2.0的变化最大；
在2.0的时候使用的是Object.defineproperty()做的数据劫持, 不过Object.defineproperty是对所有的属性做的数据劫持不是目标对象，而且对数组是无法进行劫持的，也就是数组的变化监听实际上是，在原有的数组方法上进行的改造实现的；
但是3.0不一样，是使用proxy代理模式进行的数据劫持监听，proxy有个好的地方就是可以监听整个Object对象，不用单独去监听单个对象属性就可以检测到数据的变化，比之前的单个属性监听减少了性能上的开销，还有就是可以监听数组，只不过穿的参数是一个数组但是返回的却是对象形式;
举个例子:
import { reactive } from 'vue';
const arr = reactive([1,2,3,4]);
console.log(arr); // 输出的是代理之后的 Proxy {0: 1, 1: 2, 2: 3, 3: 4}
ref 原理和使用方式
ref官方文档说明是：接受一个参数值并返回一个响应式且可改变的 ref 对象。ref 对象拥有一个指向内部值的单一属性 .value。那它又是怎么实现的呢
// 可以是对象的属性
export function ref(
value: T
): T extends Ref ? T : Ref>
// 也可以是一个任意值
export function ref(value: T): Ref>
export function ref(): Ref
// ref的值是可选的，非必填项
export function ref(value?: unknown) {
return createRef(value)
}
从上边代码我们可以看到ref的参数可以是一个任意值，返回的值是当前的参数，或者是一个undefined;
并且如果你什么也不传也可以，会返回一个响应式对象但是value是undefined;
举个例子：
import { ref } from 'vue';
const refParam = ref();
console.log(refParam) // 返回是一个RefImpl {_rawValue: undefined, _shallow: false, __v_isRef: true, _value: undefined}
我们接着往下分析
// 如果是一个对象，则使用reactive做深度代理，否则直接返回
const convert = (val: T): T =>
isObject(val) ? reactive(val) : val
// shallow 用来表示是浅层代理还是深度代理
function createRef(rawValue: unknown, shallow = false) {
if (isRef(rawValue)) {
return rawValue
}
let value = shallow ? rawValue : convert(rawValue) // convert 如果是一个对象，则使用reactive做深度代理，否则直接返回
const r = {
__v_isRef: true,
get value() {
// 方法追踪
track(r, TrackOpTypes.GET, 'value')
return value
},
set value(newVal) {
// 判断新值和旧值是否是一致的，如果不是一致的就进行更新操作
if (hasChanged(toRaw(newVal), rawValue)) {
rawValue = newVal
value = shallow ? newVal : convert(newVal)
trigger(r, TriggerOpTypes.SET, 'value', newVal)
}
}
}
return r
}
从上边的代码我们可以分析出来，我们传进来的参数会被判断解析；
1.看第一条判断，如果是被代理过的不会再做更多操作，将直接返回这个值；
2.如果shallow表示浅代理value则直接使用这个参数当做返回值;
3.如果是深度代理会执行convert方法，这个时候会做判断是不是一个对象，是的话就使用reactive进行递归深度代理，否则使用当前值，reactive下边会进行详细分析;
4.从返回值就能看的出来，无论是对象还是数组亦或者其他的任意值，在ref处理的过程中都会当做是一个对象返回回来
computed 计算机属性3.0实现源码
// 返回的值是只读属性，并且是响应式
export function computed(getter: ComputedGetter): ComputedRef
// 增加了计算机属性的读写操作
export function computed(
options: WritableComputedOptions
): WritableComputedRef
// 参数可以是一个对象形式，也可以是一个方法
export function computed(
// 参数是一个方法或者是一个对象参数，如果是方法执行只读，如果是对象可以操作读写
getterOrOptions: ComputedGetter | WritableComputedOptions
) {
let getter: ComputedGetter
let setter: ComputedSetter
// 如果是方法的话，不可以修改属性值，读取，如果是一个对象的话，则可以操作读写功能
if (isFunction(getterOrOptions)) {
getter = getterOrOptions
setter = __DEV__
? () => {
console.warn('Write operation failed: computed value is readonly')
}
: NOOP
} else {
getter = getterOrOptions.get
setter = getterOrOptions.set
}
let dirty = true
let value: T
let computed: ComputedRef
// effect 传进来一个getter，这个getter = 如果当前参数是一个方法，值直接赋值当前的function,否则赋值这个对象的get方法
const runner = effect(getter, {
lazy: true, // 懒执行
scheduler: () => {
if (!dirty) {
dirty = true
trigger(computed, TriggerOpTypes.SET, 'value')
}
}
})
computed = {
// 标记为这个是需要代理的响应式
__v_isRef: true,
// 是否是只读标记
[ReactiveFlags.IS_READONLY]:
isFunction(getterOrOptions) || !getterOrOptions.set,
// expose effect so computed can be stopped
effect: runner,
get value() {
if (dirty) {
value = runner()
dirty = false
}
track(computed, TrackOpTypes.GET, 'value')
return value
},
set value(newValue: T) {
setter(newValue)
}
} as any
return computed
}
从上述代码其实可以看出来，computed支持读写操作，如果我们在使用写操作的时候比如下边这个例子,当我们给computed传递的是一个方法的时候默认就是只读模式，不可以进行修改操作，但是我们如果想要修改这个值的话就需要使用对象形式的参数，注意{get() =>{}, set() => {}}get和set是搭配使用的，否则会抛出错误；
看下边这个例子:
// 只读模式操作
const count = ref(1)
const plusOne = computed(() => count.value + 1)
console.log(plusOne.value) // 2
plusOne.value++ // 错误！
// 读写模式操作
const count = ref(1)
const plusOne = computed({
get: () => count.value + 1,
set: (val) => {
count.value = val - 1
},
})
plusOne.value = 1
console.log(count.value) // 0
reactive
接收一个普通对象然后返回该普通对象的响应式代理,响应式转换是“深层的”：会影响对象内部所有嵌套的属性。基于 ES2015 的 Proxy 实现，返回的代理对象不等于原始对象。建议仅使用代理对象而避免依赖原始对象。
下边直接看源码中怎么写的，然后咱们分析一下
// only unwrap nested ref
// 解嵌套
type UnwrapNestedRefs = T extends Ref ? T : UnwrapRef
export function reactive(target: T): UnwrapNestedRefs
export function reactive(target: object) {
// if trying to observe a readonly proxy, return the readonly version.
// 如果当前的目标对象存在并且是只读则直接返回当前对象
if (target && (target as Target)[ReactiveFlags.IS_READONLY]) {
return target
}
// 创建一个响应式对象
return createReactiveObject(
target,
false,
mutableHandlers,
mutableCollectionHandlers
)
}
上边代码我们可以看到reactive 接收的实际上是个对象，当然也可以接收一个数组,如果目标对象存在并且是一个只读的会直接返回这个对象，否则会创建一个reactive 对象;
那么这个创建的过程都发生了些什么呢？接着往下分析
function createReactiveObject(
target: Target, // 需要代理的目标对象
isReadonly: boolean, // 是不是只读对象
baseHandlers: ProxyHandler, // 基础的处理方法
collectionHandlers: ProxyHandler // 收集依赖
) {
if (!isObject(target)) {
if (__DEV__) {
console.warn(`value cannot be made reactive: ${String(target)}`)
}
return target
}
// target is already a Proxy, return it.
// exception: calling readonly() on a reactive object
// 当前对象是不是原始对象，并且是被代理过的只读对象
if (
target[ReactiveFlags.RAW] &&
!(isReadonly && target[ReactiveFlags.IS_REACTIVE])
) {
return target
}
// target already has corresponding Proxy
// 如果已经有了对应的代理对象就返回这个代理的对象
const reactiveFlag = isReadonly
? ReactiveFlags.READONLY
: ReactiveFlags.REACTIVE
if (hasOwn(target, reactiveFlag)) {
return target[reactiveFlag]
}
// only a whitelist of value types can be observed.
if (!canObserve(target)) {
return target
}
const observed = new Proxy(
target,
collectionTypes.has(target.constructor) ? collectionHandlers : baseHandlers
)
def(target, reactiveFlag, observed)
return observed
}
从上边代码不难看出，reactive接收的是一个对象形式，如果不是对象形式就会抛出一个错误，可能大家到这会有个疑问为什么数组也可以呢，这个是因为isObject不是强校验，看下边;
export const isObject = (val: unknown): val is Record =>
val !== null && typeof val === 'object'
通过上述的分析，我们不难看出，ref和reactive，computed的区别还是蛮大的；
首先ref对比reactive，reactive只能接收一个引用对象，不可以传递普通类型的数据，比如字符串、数字等，但是ref可以，因为ref返回的是一个响应式代理对象，这个对象value值就是我们的传递参数；所以如果是想代理一个对象或者是数组还是使用reactive更合适，如果我们想要代理一个普通类型的值就需要使用ref去代理更合理；
computed接收一个响应式的对象或者值，并且还可以对这个接收的目标进行操作，但是他本身并不是一个响应式的信息，只不过是对这个响应式的参数进行了追踪，获取和修改的操作；
今天的分享就到这了，如果有哪些地方说的不对，还望在下边的评论区发表出来，大家一起讨论；
如果想要体验vue3.0的同学也可以参考一下我的这篇文章vue3 学习 之 vue3使用