Vue3 ref底层实现原理是什么

这篇文章主要讲解了“Vue3 ref底层实现原理是什么”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“Vue3 ref底层实现原理是什么”吧！

源码解析

既然各方说法不一，那首先想到的就是直接去看vue3官方源码不就好了，看别人不如自己实际动起来

通过node_modules依赖文件找到vue中实现ref的源码

源码如下：

为方便理解，把相关涉及到的源码以及代码含义加上注释

function ref(value) { // ref方法
    return createRef(value, false);
}

function shallowRef(value) { // 浅层ref
    return createRef(value, true);
}

function createRef(rawValue, shallow) { // 创建ref
    if (isRef(rawValue)) { // 判断是否为ref
        return rawValue;
    }
    return new RefImpl(rawValue, shallow); // 返回RefImpl实例对象
}

class RefImpl {
    constructor(value, __v_isShallow) { // 值，是否浅层ref
        this.__v_isShallow = __v_isShallow;
        this.dep = undefined;
        this.__v_isRef = true;
        this._rawValue = __v_isShallow ? value : toRaw(value);
        this._value = __v_isShallow ? value : toReactive(value);  // 判断是否为浅层ref，否则调用toReactive，方法在下面
    }
    get value() { // getter方法 获取value值
        trackRefValue(this);
        return this._value;
    }
    set value(newVal) { // setter方法 设置value值
        const useDirectValue = this.__v_isShallow || isShallow(newVal) || isReadonly(newVal);
        newVal = useDirectValue ? newVal : toRaw(newVal);
        if (hasChanged(newVal, this._rawValue)) {
            this._rawValue = newVal;
            this._value = useDirectValue ? newVal : toReactive(newVal); // 在value值更新时进行判断是否为浅层ref，否则调用toReactive
            triggerRefValue(this, newVal);
        }
    }
}

const toReactive = (value) => isObject(value) ? reactive(value) : value; // 是否为对象，如果是则调用reactive

经过一番阅读理解，我们只需抓取关键信息即可

可以看到通过 ref(1) 的值在 RefImpl 类中为 _value ，然后使用class中的get和set语法糖对该value值进行相应的操作，获取和赋值

再判断为对象时才使用reactive()方法

实践操作

从源码上看，我们看到了，使用了class的get和set来对这个value值进行操作，那么我们自己动手实践一下，看看怎么实现

这里把源码的_value的口头约定私有属性形式改为es9新增加的#value形式

class RefImpl {
    #value = '' // #value 私有属性

    constructor(value) {
        this.#value = value 
    }
    get value() {
        console.log('触发获取', this.#value)
        return this.#value
    }
    set value(newVal) {
        console.log('触发更新', newVal)
        this.#value = newVal
    }
}

function ref(value) {
    return new RefImpl(value)
}

const test = ref('我是小涛测试')

setTimeout(() => {
  test.value = '我设置了值'
}, 2000)

class类的get和set是什么

到了这里，可以确定ref是使用class里的get/set进行数据劫持和更新的

而这个get/set实际是语法糖，本质是js的特性，是劫持property（属性）的一种方式

对象内分为数据属性和访问器属性，访问器属性不包含数据，是一对get和set方法

Getter 属性访问器（accessor）和 Setter 属性修改器（mutator）

结论

综上所述

所以一刚开始说的使用Object.defineProperty说法并不正确，因为Object.defineProperty()可以用来给修改对象属性，然后使用到了getter/setter

Object.defineProperty()

所以使用了class的说法也并不正确，也是在对象内使用访问器属性，使用到了getter/setter这两个方法

Object.defineProperty() 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象。

Vue 将遍历此对象所有的属性，并使用Object.defineProperty把这些属性全部转为 getter/setter。

在对象内也可以使用访问器属性

const test = {
  _value: '',
  get value() {
      console.log('触发获取', this._value)
      return this._value
  },
  set value(newVal) {
      console.log('触发更新', newVal)
      this._value = newVal
  }
}

感谢各位的阅读，以上就是“Vue3 ref底层实现原理是什么”的内容了，经过本文的学习后，相信大家对Vue3 ref底层实现原理是什么这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是亿速云，小编将为大家推送更多相关知识点的文章，欢迎关注！