手写mini版本的Vue3--实现 isReactive 和 isReadonly介绍开头继续感谢崔大的mini-vu

介绍

开头继续感谢崔大的mini-vue 项目。

强烈建议大家把项目 down 下来，运行一下，看VUE3 的整体运行逻辑。

isReactive 是想办法触发 get 操作，然后在isReactive 的时候传入一个值，然后在 get 操作的时候，判断这个值，如果相等，那就是true。

isReadonly 也是同样的操作。

我们可以把这两个传入的值，用枚举来表示。

export const enum ReactiveFlags {
  IS_REACTIVE = '__v_isReactive',
  IS_READONLY = '__v_isReadonly',
}

以下就是判断实现的函数。


export function isReactive(value) {
  return !!value[ReactiveFlags.IS_REACTIVE];
}

export function isReadonly(value) {
  return !!value[ReactiveFlags.IS_READONLY];
}

以下就是在 get 的时候的判断。

function createGetter(isReadonly = false) {
  return function get(target, key) {
    if (key === ReactiveFlags.IS_REACTIVE) {
      return !isReadonly;
    } else if (key === ReactiveFlags.IS_READONLY) {
      return isReadonly;
    }
...
   
}
}

结尾

项目已经放到我的 GitHub 上面了，欢迎大家去start。

本次 commit地址：github.com/moyuhaokan/…

我的项目地址：github.com/moyuhaokan/…

再次推荐崔大的项目：github.com/cuixiaorui/…