前言
我們都知道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<T extends object>(
value: T
): T extends Ref ? T : Ref<UnwrapRef<T>>
// 也可以是一個任意值
export function ref<T>(value: T): Ref<UnwrapRef<T>>
export function ref<T = any>(): Ref<T | undefined>
// 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 = <T extends unknown>(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<T>(getter: ComputedGetter<T>): ComputedRef<T>
// 增加了計算機屬性的讀寫操作
export function computed<T>(
options: WritableComputedOptions<T>
): WritableComputedRef<T>
// 參數可以是一個對象形式，也可以是一個方法
export function computed<T>(
// 參數是一個方法或者是一個對象參數，如果是方法執行只讀，如果是對象可以操作讀寫
getterOrOptions: ComputedGetter<T> | WritableComputedOptions<T>
) {
let getter: ComputedGetter<T>
let setter: ComputedSetter<T>
// 如果是方法的話，不可以修改屬性值，讀取，如果是一個對象的話，則可以操作讀寫功能
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<T>
// 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> = T extends Ref ? T : UnwrapRef<T>
export function reactive<T extends object>(target: T): UnwrapNestedRefs<T>
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<any>, // 基礎的處理方法
collectionHandlers: ProxyHandler<any> // 收集依賴
) {
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<any, any> =>
val !== null && typeof val === 'object'
通過上述的分析，我們不難看出，ref和reactive，computed的區別還是蠻大的；
首先ref對比reactive，reactive只能接收一個引用對象，不可以傳遞普通類型的數據，比如字符串、數字等，但是ref可以，因為ref返回的是一個響應式代理對象，這個對象value值就是我們的傳遞參數；所以如果是想代理一個對象或者是數組還是使用reactive更合適，如果我們想要代理一個普通類型的值就需要使用ref去代理更合理；
computed接收一個響應式的對象或者值，并且還可以對這個接收的目標進行操作，但是他本身并不是一個響應式的信息，只不過是對這個響應式的參數進行了追蹤，獲取和修改的操作；
今天的分享就到這了，如果有哪些地方說的不對，還望在下邊的評論區發表出來，大家一起討論；
如果想要體驗vue3.0的同學也可以參考一下我的這篇文章vue3 學習 之 vue3使用
