Vue07- ref的实现原理

Ref 如何实现的

总结一下effect的核心

effect 中的属性是如何处理的？

• 当读取值的时候把effect收集起来 track
• 当修改值的时候执行effect trigger

演示一下ref

import {ref} from "VueReactivity"; // 在vue3源代码里面
// 为什么会有ref这个内容？
// 因为reactive只能接受对象不是对象就返回你传入的那个了。经过了上面的学习应该非常清楚了。
// 使用方式？
let rf = ref("string");

// 这东西的原理是什么？
// 把普通的一个类型变成了一个对象，这个对象中有value属性指向原来的值。 用的时候是rf.value
// 更新的时候
setTimeout(() => {
    rf.value = 'xxx';
})

// reactive和ref底层实现的不是一个东西。！！！

// ref也可以是对象 let rf = ref({}); rf.value就是{} {}这个东西是个proxy 一般普通类型用这个对象用这个还多加了一层value不大好。

// 为啥多搞这么个对象？ new Proxy(") // 这是不被允许的。所以就出现了这种蹩脚的方式

// ref 和 reactive的一个区别 
// reactive 内部用的是proxy
// ref 内部用的是defineproperty
// 后期看vue的源代码基本上都是高阶函数。类似科里化的功能。

新增

vue-core/package/reactivity/src/core/ref.ts

/**
 * ref
 * @param value 普通类型的值
 */
function ref(value:any) {
    // 创建一个对象把一个普通类型变成一个对象类型
    return createRef(value);
}

/**
 * 
 * @param value 
 * @returns 
 */
function shallowRef(value:any) {
    return createRef(value, true);
}


// 返回的对象是这个类的实例
class RefImpl {
    // public rawvalue:any;
    // public isShallow:boolean;
    public _value:any; 
    public _is_Ref:boolean = true; // 当前产生的实例是会被添加这个属性 表示是一个ref属性。
    constructor(public rawvalue:any, public isShallow:boolean){
        
    }
}

/**
 * 
 * @param rawvalue 原值 可以是对象，但一般情况下用reactive更好
 * @returns RefImpl 这东西返回的是一个实例 
 */
function createRef(rawvalue:any, isShallow:boolean = false) {
    // 创建一个ref
    return new RefImpl(rawvalue, isShallow);
}

export {
    ref,
    shallowRef,
}