vue商城源码_1.1万字深入细品Vue3.0源码响应式系统笔记「上」

作者：hkc52 前端巅峰

转发链接：https://mp.weixin.qq.com/s/A6WgCjQj3KsaKC6kSLy-1A

原文作者：KC

原文链接：https://hkc452.github.io/slamdunk-the-vue3/

前言

目录

1.1万字深入细品Vue3.0源码响应式系统笔记「上」

1.1万字深入细品Vue3.0源码响应式系统笔记「下」

本篇文章由于针对Vue3.0源码响应式系统讲的细致，总共分为上下两篇，本篇为开头篇

effect 是响应式系统的核心，而响应式系统又是 vue3 中的核心，所以从 effect 开始讲起。

首先看下面 effect 的传参，fn 是回调函数，options 是传入的参数。

export function effect(  fn: () => T,  options: ReactiveEffectOptions = EMPTY_OBJ): ReactiveEffect {  if (isEffect(fn)) {    fn = fn.raw  }  const effect = createReactiveEffect(fn, options)  if (!options.lazy) {    effect()  }  return effect}

• 其中 option 的参数如下，都是属于可选的。

参数 & 含义

• lazy 是否延迟触发 effect
• computed 是否为计算属性
• scheduler 调度函数
• onTrack 追踪时触发
• onTrigger 触发回调时触发
• onStop 停止监听时触发

export interface ReactiveEffectOptions {  lazy?: boolean  computed?: boolean  scheduler?: (job: ReactiveEffect) => void  onTrack?: (event: DebuggerEvent) => void  onTrigger?: (event: DebuggerEvent) => void  onStop?: () => void}

• 分析完参数之后，继续我们一开始的分析。当我们调用 effect 时，首先判断传入的 fn 是否是 effect，如果是，取出原始值，然后调用 createReactiveEffect 创建 新的effect， 如果传入的 option 中的 lazy 不为为 true，则立即调用我们刚刚创建的 effect, 最后返回刚刚创建的 effect。
• 那么createReactiveEffect是怎样是创建 effect的呢？

function createReactiveEffect(  fn: (...args: any[]) => T,  options: ReactiveEffectOptions): ReactiveEffect {  const effect = function reactiveEffect(...args: unknown[]): unknown {    if (!effect.active) {      return options.scheduler ? undefined : fn(...args)    }    if (!effectStack.includes(effect)) {      cleanup(effect)      try {        enableTracking()        effectStack.push(effect)        activeEffect = effect        return fn(...args)      } finally {        effectStack.pop()        resetTracking()        activeEffect = effectStack[effectStack.length - 1]      }    }  } as ReactiveEffect  effect.id = uid++  effect._isEffect = true  effect.active = true  effect.raw = fn  effect.deps = []  effect.options = options  return effect}

我们先忽略 reactiveEffect，继续看下面的挂载的属性。

effect 挂载属性 含义

• id 自增id， 唯一标识effect
• _isEffect 用于标识方法是否是effect
• active effect 是否激活
• raw 创建effect是传入的fn
• deps 持有当前 effect 的dep 数组
• options 创建effect是传入的options
• 回到 reactiveEffect，如果 effect 不是激活状态，这种情况发生在我们调用了 effect 中的 stop 方法之后，那么先前没有传入调用 scheduler 函数的话，直接调用原始方法fn，否则直接返回。
• 那么处于激活状态的 effect 要怎么进行处理呢？首先判断是否当前 effect 是否在 effectStack 当中，如果在，则不进行调用，这个主要是为了避免死循环。拿下面测试用例来看

it('should avoid infinite loops with other effects', () => {    const nums = reactive({ num1: 0, num2: 1 })    const spy1 = jest.fn(() => (nums.num1 = nums.num2))    const spy2 = jest.fn(() => (nums.num2 = nums.num1))    effect(spy1)    effect(spy2)    expect(nums.num1).toBe(1)    expect(nums.num2).toBe(1)    expect(spy1).toHaveBeenCalledTimes(1)    expect(spy2).toHaveBeenCalledTimes(1)    nums.num2 = 4    expect(nums.num1).toBe(4)    expect(nums.num2).toBe(4)    expect(spy1).toHaveBeenCalledTimes(2)    expect(spy2).toHaveBeenCalledTimes(2)    nums.num1 = 10    expect(nums.num1).toBe(10)    expect(nums.num2).toBe(10)    expect(spy1).toHaveBeenCalledTimes(3)    expect(spy2).toHaveBeenCalledTimes(3)})

• 如果不加 effectStack，会导致 num2 改变，出发了 spy1, spy1 里面 num1 改变又出发了 spy2, spy2 又会改变 num2，从而触发了死循环。
• 接着是清除依赖，每次 effect 运行都会重新收集依赖, deps 是持有 effect 的依赖数组，其中里面的每个 dep 是对应对象某个 key 的 全部依赖，我们在这里需要做的就是首先把 effect 从 dep 中删除，最后把 deps 数组清空。

function cleanup(effect: ReactiveEffect) {  const { deps } = effect  if (deps.length) {    for (let i = 0; i < deps.length; i++) {      deps[i].delete(effect)    }    deps.length = 0  }}

• 清除完依赖，就开始重新收集依赖。首先开启依赖收集，把当前 effect 放入 effectStack 中，然后讲 activeEffect 设置为当前的 effect，activeEffect 主要为了在收集依赖的时候使用(在下面会很快讲到)，然后调用 fn 并且返回值，当这一切完成的时候，finally 阶段，会把当前 effect 弹出，恢复原来的收集依赖的状态，还有恢复原来的 activeEffect。

 try {    enableTracking()    effectStack.push(effect)    activeEffect = effect    return fn(...args)  } finally {    effectStack.pop()    resetTracking()    activeEffect = effectStack[effectStack.length - 1]  }

• 那 effect 是怎么收集依赖的呢？vue3 利用 proxy 劫持对象，在上面运行 effect 中读取对象的时候，当前对象的 key 的依赖 set集合 会把 effect 收集进去。

export function track(target: object, type: TrackOpTypes, key: unknown) {  ...}

• vue3 在 reactive 中触发 track 函数，reactive 会在单独的章节讲。触发 track 的参数中，object 表示触发 track 的对象， type 代表触发 track 类型，而 key 则是 触发 track 的 object 的 key。在下面可以看到三种类型的读取对象会触发 track，分别是 get、 has、 iterate。

export const enum TrackOpTypes {  GET = 'get',  HAS = 'has',  ITERATE = 'iterate'}

• 回到 track 内部，如果 shouldTrack 为 false 或者 activeEffect 为空，则不进行依赖收集。接着 targetMap 里面有没有该对象，没有新建 map，然后再看这个 map 有没有这个对象的对应 key 的 依赖 set 集合，没有则新建一个。 如果对象对应的 key 的 依赖 set 集合也没有当前 activeEffect， 则把 activeEffect 加到 set 里面，同时把 当前 set 塞到 activeEffect 的 deps 数组。最后如果是开发环境而且传入了 onTrack 函数，则触发 onTrack。 所以 deps 就是 effect 中所依赖的 key 对应的 set 集合数组， 毕竟一般来说，effect 中不止依赖一个对象或者不止依赖一个对象的一个key，而且 一个对象可以能不止被一个 effect 使用，所以是 set 集合数组。

if (!shouldTrack || activeEffect === undefined) {    return  }  let depsMap = targetMap.get(target)  if (!depsMap) {    targetMap.set(target, (depsMap = new Map()))  }  let dep = depsMap.get(key)  if (!dep) {    depsMap.set(key, (dep = new Set()))  }  if (!dep.has(activeEffect)) {    dep.add(activeEffect)    activeEffect.deps.push(dep)    if (__DEV__ && activeEffect.options.onTrack) {      activeEffect.options.onTrack({        effect: activeEffect,        target,        type,        key      })    }  }

• 依赖都收集完毕了，接下来就是触发依赖。如果 targetMap 为空，说明这个对象没有被追踪，直接return。

export function trigger(  target: object,  type: TriggerOpTypes,  key?: unknown,  newValue?: unknown,  oldValue?: unknown,  oldTarget?: Map | Set) {  const depsMap = targetMap.get(target)  if (!depsMap) {    // never been tracked    return  }  ...}

• 其中触发的 type, 包括了 set、add、delete 和 clear。

export const enum TriggerOpTypes {  SET = 'set',  ADD = 'add',  DELETE = 'delete',  CLEAR = 'clear'}

• 接下来对 key 收集的依赖进行分组，computedRunners 具有更高的优先级，会触发下游的 effects 重新收集依赖，

const effects = new Set() const computedRunners = new Set() add 方法是将 effect 添加进不同分组的函数，其中 effect !== activeEffect 这个是为了避免死循环，在下面的注释也写的很清楚，避免出现 foo.value++ 这种情况。至于为什么是 set 呢，要避免 effect 多次运行。就好像循环中，set 出发了 trigger ，那么 ITERATE 和 当前 key 可能都属于同个 effect，这样就可以避免多次运行了。

const add = (effectsToAdd: Set | undefined) => {if (effectsToAdd) {  effectsToAdd.forEach(effect => {    if (effect !== activeEffect || !shouldTrack) {      if (effect.options.computed) {        computedRunners.add(effect)      } else {        effects.add(effect)      }    } else {      // the effect mutated its own dependency during its execution.      // this can be caused by operations like foo.value++      // do not trigger or we end in an infinite loop    }  })}}

• 下面根据触发 key 类型的不同进行 effect 的处理。如果是 clear 类型，则触发这个对象所有的 effect。如果 key 是 length , 而且 target 是数组，则会触发 key 为 length 的 effects ，以及 key 大于等于新 length的 effects， 因为这些此时数组长度变化了。

if (type === TriggerOpTypes.CLEAR) {    // collection being cleared    // trigger all effects for target    depsMap.forEach(add)} else if (key === 'length' && isArray(target)) {    depsMap.forEach((dep, key) => {      if (key === 'length' || key >= (newValue as number)) {        add(dep)      }    })} 

• 下面则是对正常的新增、修改、删除进行 effect 的分组, isAddOrDelete 表示新增 或者不是数组的删除，这为了对迭代 key的 effect 进行触发，如果 isAddOrDelete 为 true 或者是 map 对象的设置，则触发 isArray(target) ? 'length' : ITERATE_KEY 的 effect ，如果 isAddOrDelete 为 true 且 对象为 map， 则触发 MAP_KEY_ITERATE_KEY 的 effect

else {    // schedule runs for SET | ADD | DELETE    if (key !== void 0) {      add(depsMap.get(key))    }    // also run for iteration key on ADD | DELETE | Map.SET    const isAddOrDelete =      type === TriggerOpTypes.ADD ||      (type === TriggerOpTypes.DELETE && !isArray(target))    if (      isAddOrDelete ||      (type === TriggerOpTypes.SET && target instanceof Map)    ) {      add(depsMap.get(isArray(target) ? 'length' : ITERATE_KEY))    }    if (isAddOrDelete && target instanceof Map) {      add(depsMap.get(MAP_KEY_ITERATE_KEY))    }}

• 最后是运行 effect， 像上面所说的，computed effects 会优先运行，因为 computed effects 在运行过程中，第一次会触发上游把cumputed effect收集进去，再把下游 effect 收集起来。
• 还有一点，就是 effect.options.scheduler，如果传入了调度函数，则通过 scheduler 函数去运行 effect， 但是 scheduler 里面可能不一定使用了 effect，例如 computed 里面，因为 computed 是延迟运行 effect， 这个会在讲 computed 的时候再讲。

const run = (effect: ReactiveEffect) => {    if (__DEV__ && effect.options.onTrigger) {      effect.options.onTrigger({        effect,        target,        key,        type,        newValue,        oldValue,        oldTarget      })    }    if (effect.options.scheduler) {      effect.options.scheduler(effect)    } else {      effect()    }}// Important: computed effects must be run first so that computed getters// can be invalidated before any normal effects that depend on them are run.computedRunners.forEach(run)effects.forEach(run)

• 可以发现，不管是 track 还是 trigger， 都会导致 effect 重新运行去收集依赖。
• 最后再讲一个 stop 方法，当我们调用 stop 方法后，会清空其他对象对 effect 的依赖，同时调用 onStop 回调，最后将 effect 的激活状态设置为 false

export function stop(effect: ReactiveEffect) {  if (effect.active) {    cleanup(effect)    if (effect.options.onStop) {      effect.options.onStop()    }    effect.active = false  }}

• 这样当再一次调用 effect 的时候，不会进行依赖的重新收集，而且没有调度函数，就直接返回原始的 fn 的运行结果，否则直接返回 undefined。

if (!effect.active) {  return options.scheduler ? undefined : fn(...args)}

---

reactive 是 vue3 中对数据进行劫持的核心，主要是利用了 Proxy 进行劫持，相比于 Object.defineproperty 能够劫持的类型和范围都更好，再也不用像 vue2 中那样对数组进行类似 hack 方式的劫持了。

• 下面快速看看 vue3 是怎么劫持。首先看看这个对象是是不是 __v_isReadonly 只读的，这个枚举在后面进行讲述，如果是，直接返回，否者调用 createReactiveObject 进行创建。

export function reactive(target: object) {  // if trying to observe a readonly proxy, return the readonly version.  if (target && (target as Target).__v_isReadonly) {    return target  }  return createReactiveObject(    target,    false,    mutableHandlers,    mutableCollectionHandlers  )}

• createReactiveObject 中，有个四个参数，target 就是我们需要传入的对象，isReadonly 表示要创建的代理是不是只可读的，baseHandlers 是对进行基本类型的劫持，即 [Object,Array] ，collectionHandlers 是对集合类型的劫持, 即 [Set, Map, WeakMap, WeakSet]。

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.__v_raw && !(isReadonly && target.__v_isReactive)) {    return target  }  // target already has corresponding Proxy  if (    hasOwn(target, isReadonly ? ReactiveFlags.readonly : ReactiveFlags.reactive)  ) {    return isReadonly ? target.__v_readonly : target.__v_reactive  }  // 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,    isReadonly ? ReactiveFlags.readonly : ReactiveFlags.reactive,    observed  )  return observed}

• 如果我们传入是 target 不是object，直接返回。 而如果 target 已经是个 proxy ，而且不是要求这个proxy 是已读的，但这个 proxy 是个响应式的，则直接返回这个 target。什么意思呢？我们创建的 proxy 有两种类型，一种是响应式的，另外一种是只读的。
• 而如果我们传入的 target 上面有挂载了响应式的 proxy，则直接返回上面挂载的 proxy 。
• 如果上面都不满足，则需要检查一下我们传进去的 target 是否可以进行劫持观察，如果 target 上面挂载了 __v_skip 属性 为 true 或者 不是我们再在上面讲参数时候讲的六种类型，或者 对象被freeze 了，还是不能进行劫持。

const canObserve = (value: Target): boolean => {  return (    !value.__v_skip &&    isObservableType(toRawType(value)) &&    !Object.isFrozen(value)  )}

• 如果上面条件满足，则进行劫持，可以看到我们会根据 target 类型的不同进行不同的 handler，最后根据把 observed 挂载到原对象上，同时返回 observed。

 const observed = new Proxy(    target,    collectionTypes.has(target.constructor) ? collectionHandlers : baseHandlers  )  def(    target,    isReadonly ? ReactiveFlags.readonly : ReactiveFlags.reactive,    observed  )  return observed

• 现在继续讲讲上面 ReactiveFlags 枚举，skip 用于标记对象不可以进行代理，可以用于 创建 component 的时候，把options 进行 markRaw，isReactive 和 isReadonly 都是由 proxy 劫持返回值，表示 proxy 的属性，raw 是 proxy 上面的 原始target ，reactive 和 readonly 是挂载在 target 上面的 proxy

export const enum ReactiveFlags {  skip = '__v_skip',  isReactive = '__v_isReactive',  isReadonly = '__v_isReadonly',  raw = '__v_raw',  reactive = '__v_reactive',  readonly = '__v_readonly'}

• 再讲讲可以创建的四种 proxy， 分别是reactive、 shallowReactive 、readonly 和 shallowReadonly。其实从字面意思就可以看出他们的区别了。具体细节会在 collectionHandlers 和 baseHandlers 进行讲解

baseHandlers 中主要包含四种 handler, mutableHandlers、readonlyHandlers、shallowReactiveHandlers、 shallowReadonlyHandlers。 这里先介绍 mutableHandlers， 因为其他三种 handler 也算是 mutableHandlers 的变形版本。

export const mutableHandlers: ProxyHandler = {  get,  set,  deleteProperty,  has,  ownKeys}

• 从 mdn 上面可以看到，
  • handler.get() 方法用于拦截对象的读取属性操作。
  • handler.set() 方法是设置属性值操作的捕获器。
  • handler.deleteProperty() 方法用于拦截对对象属性的 delete 操作。
  • handler.has() 方法是针对 in 操作符的代理方法。
  • handler.ownKeys() 方法用于拦截
  • Object.getOwnPropertyNames()
  • Object.getOwnPropertySymbols()
  • Object.keys()
  • for…in循环
• 从下面可以看到 ownKeys 触发时，主要追踪 ITERATE 操作，has 触发时，追踪 HAS 操作，而 deleteProperty 触发时，我们要看看是否删除成功以及删除的 key 是否是对象自身拥有的。

function deleteProperty(target: object, key: string | symbol): boolean {  const hadKey = hasOwn(target, key)  const oldValue = (target as any)[key]  const result = Reflect.deleteProperty(target, key)  if (result && hadKey) {    trigger(target, TriggerOpTypes.DELETE, key, undefined, oldValue)  }  return result}function has(target: object, key: string | symbol): boolean {  const result = Reflect.has(target, key)  track(target, TrackOpTypes.HAS, key)  return result}function ownKeys(target: object): (string | number | symbol)[] {  track(target, TrackOpTypes.ITERATE, ITERATE_KEY)  return Reflect.ownKeys(target)}

• 接下来看看 set handler, set 函数通过 createSetter 工厂方法 进行创建，/#PURE/ 是为了 rollup tree shaking 的操作。
• 对于非 shallow , 如果原来的对象不是数组， 旧值是 ref，新值不是 ref，则让新的值 赋值给 ref.value , 让 ref 去决定 trigger，这里不展开，ref 会在ref 章节展开。 如果是 shallow ，管它三七二十一呢。

const set = /*#__PURE__*/ createSetter()const shallowSet = /*#__PURE__*/ createSetter(true)function createSetter(shallow = false) {  return function set(    target: object,    key: string | symbol,    value: unknown,    receiver: object  ): boolean {    const oldValue = (target as any)[key]    if (!shallow) {      value = toRaw(value)      if (!isArray(target) && isRef(oldValue) && !isRef(value)) {        oldValue.value = value        return true      }    } else {      // in shallow mode, objects are set as-is regardless of reactive or not    }   ...    return result  }}

• 接下来进行设置，需要注意的是，如果 target 是在原型链的值，那么 Reflect.set(target, key, value, receiver) 的设值值设置起作用的是 receiver 而不是 target，这也是什么在这种情况下不要触发 trigger 的原因。
• 那么在 target === toRaw(receiver) 时，如果原来 target 上面有 key， 则触发 SET 操作，否则触发 ADD 操作。

    const hadKey = hasOwn(target, key)    const result = Reflect.set(target, key, value, receiver)    // don't trigger if target is something up in the prototype chain of original    if (target === toRaw(receiver)) {      if (!hadKey) {        trigger(target, TriggerOpTypes.ADD, key, value)      } else if (hasChanged(value, oldValue)) {        trigger(target, TriggerOpTypes.SET, key, value, oldValue)      }    }

• 接下来说说 get 操作，get 有四种，我们先拿其中一种说说。

const get = /*#__PURE__*/ createGetter()const shallowGet = /*#__PURE__*/ createGetter(false, true)const readonlyGet = /*#__PURE__*/ createGetter(true)const shallowReadonlyGet = /*#__PURE__*/ createGetter(true, true)function createGetter(isReadonly = false, shallow = false) {  return function get(target: object, key: string | symbol, receiver: object) {    ...        const res = Reflect.get(target, key, receiver)    if (isSymbol(key) && builtInSymbols.has(key) || key === '__proto__') {      return res    }    if (shallow) {      !isReadonly && track(target, TrackOpTypes.GET, key)      return res    }    if (isRef(res)) {      if (targetIsArray) {        !isReadonly && track(target, TrackOpTypes.GET, key)        return res      } else {        // ref unwrapping, only for Objects, not for Arrays.        return res.value      }    }    !isReadonly && track(target, TrackOpTypes.GET, key)    return isObject(res)      ? isReadonly        ? // need to lazy access readonly and reactive here to avoid          // circular dependency          readonly(res)        : reactive(res)      : res  }}

• 首先如果 key 是 ReactiveFlags， 直接返回值，ReactiveFlags 的枚举值在 reactive 中讲过。

 if (key === ReactiveFlags.isReactive) {  return !isReadonly} else if (key === ReactiveFlags.isReadonly) {  return isReadonly} else if (key === ReactiveFlags.raw) {  return target}

• 而如果 target 是数组，而且调用了 ['includes', 'indexOf', 'lastIndexOf'] 这三个方法，则调用 arrayInstrumentations 进行获取值，

const targetIsArray = isArray(target)    if (targetIsArray && hasOwn(arrayInstrumentations, key)) {      return Reflect.get(arrayInstrumentations, key, receiver)    }

• arrayInstrumentations 中会触发数组每一项值得 GET 追踪，因为 一旦数组的变了，方法的返回值也会变，所以需要全部追踪。对于 args 参数，如果第一次调用返回失败，会尝试将 args 进行 toRaw 再调用一次。

const arrayInstrumentations: Record = {};['includes', 'indexOf', 'lastIndexOf'].forEach(key => {  arrayInstrumentations[key] = function(...args: any[]): any {    const arr = toRaw(this) as any    for (let i = 0, l = (this as any).length; i < l; i++) {      track(arr, TrackOpTypes.GET, i + '')    }    // we run the method using the original args first (which may be reactive)    const res = arr[key](...args)    if (res === -1 || res === false) {      // if that didn't work, run it again using raw values.      return arr[key](...args.map(toRaw))    } else {      return res    }  }})

如果 key 是 Symbol ，而且也是 ecma 中 Symbol 内置的 key 或者 key 是 获取对象上面的原型，则直接返回 res 值。

const res = Reflect.get(target, key, receiver)

if (isSymbol(key) && builtInSymbols.has(key) || key === 'proto') { return res }

• 而如果是 shallow 为 true，说明而且不是只读的，则追踪 GET 追踪，这里可以看出，只读不会进行追踪。

if (shallow) {  !isReadonly && track(target, TrackOpTypes.GET, key)  return res}

• 接下来都是针对非 shallow的。 如果返回值是 ref，且 target 是数组，在非可读的情况下，进行 Get 的 Track 操作，对于如果 target 是对象，则直接返回 ref.value，但是不会在这里触发 Get 操作，而是由 ref 内部进行 track。

if (isRef(res)) {  if (targetIsArray) {    !isReadonly && track(target, TrackOpTypes.GET, key)    return res  } else {    // ref unwrapping, only for Objects, not for Arrays.    return res.value  }}

• 对于非只读，我们还要根据 key 进行 Track。而对于返回值，如果是对象，我们还要进行一层 wrap, 但这层是 lazy 的，也就是只有我们读取到 key 的时候，才会读下面的 值进行 reactive 包装，这样可以避免出现循环依赖而导致的错误，因为这样就算里面有循环依赖也不怕，反正是延迟取值，而不会导致栈溢出。

!isReadonly && track(target, TrackOpTypes.GET, key)return isObject(res)  ? isReadonly    ? // need to lazy access readonly and reactive here to avoid      // circular dependency      readonly(res)    : reactive(res)  : res

• 这就是 mutableHandlers ，而对于 readonlyHandlers，我们可以看出首先不允许任何 set、 deleteProperty 操作，然后对于 get，我们刚才也知道，不会进行 track 操作。剩下两个 shallowGet 和 shallowReadonlyGet，就不在讲了。

export const readonlyHandlers: ProxyHandler = {  get: readonlyGet,  has,  ownKeys,  set(target, key) {    if (__DEV__) {      console.warn(        `Set operation on key "${String(key)}" failed: target is readonly.`,        target      )    }    return true  },  deleteProperty(target, key) {    if (__DEV__) {      console.warn(        `Delete operation on key "${String(key)}" failed: target is readonly.`,        target      )    }    return true  }}

推荐Vue学习资料文章：

《1.1万字深入细品Vue3.0源码响应式系统笔记「上」》

《1.1万字深入细品Vue3.0源码响应式系统笔记「下」》

《「实践」Vue 数据更新7 种情况汇总及延伸解决总结》

《尤大大细说Vue3 的诞生之路「译」》

《提高10倍打包速度工具Snowpack 2.0正式发布，再也不需要打包器》

《大厂Code Review总结Vue开发规范经验「值得学习」》

《Vue3 插件开发详解尝鲜版「值得收藏」》

《带你五步学会Vue SSR》

《记一次Vue3.0技术干货分享会》

《Vue 3.x 如何有惊无险地快速入门「进阶篇」》

《「干货」微信支付前后端流程整理(Vue+Node)》

《带你了解 vue-next(Vue 3.0)之 炉火纯青「实践」》

《「干货」Vue+高德地图实现页面点击绘制多边形及多边形切割拆分》

《「干货」Vue+Element前端导入导出Excel》

《「实践」Deno bytes 模块全解析》

《细品pdf.js实践解决含水印、电子签章问题「Vue篇」》

《基于vue + element的后台管理系统解决方案》

《Vue仿蘑菇街商城项目(vue+koa+mongodb)》

《基于 electron-vue 开发的音乐播放器「实践」》

《「实践」Vue项目中标配编辑器插件Vue-Quill-Editor》

《基于 Vue 技术栈的微前端方案实践》

《消息队列助你成为高薪 Node.js 工程师》

《Node.js 中的 stream 模块详解》

《「干货」Deno TCP Echo Server 是怎么运行的？》

《「干货」了不起的 Deno 实战教程》

《「干货」通俗易懂的Deno 入门教程》

《Deno 正式发布，彻底弄明白和 node 的区别》

《「实践」基于Apify+node+react/vue搭建一个有点意思的爬虫平台》

《「实践」深入对比 Vue 3.0 Composition API 和 React Hooks》

《前端网红框架的插件机制全梳理(axios、koa、redux、vuex)》

《深入Vue 必学高阶组件 HOC「进阶篇」》

《深入学习Vue的data、computed、watch来实现最精简响应式系统》

《10个实例小练习，快速入门熟练 Vue3 核心新特性(一)》

《10个实例小练习，快速入门熟练 Vue3 核心新特性(二)》

《教你部署搭建一个Vue-cli4+Webpack移动端框架「实践」》

《2020前端就业Vue框架篇「实践」》

《详解Vue3中 router 带来了哪些变化？》

《Vue项目部署及性能优化指导篇「实践」》

《Vue高性能渲染大数据Tree组件「实践」》

《尤大大细品VuePress搭建技术网站与个人博客「实践」》

《10个Vue开发技巧「实践」》

《是什么导致尤大大选择放弃Webpack？【vite 原理解析】》

《带你了解 vue-next(Vue 3.0)之 小试牛刀【实践】》

《带你了解 vue-next(Vue 3.0)之 初入茅庐【实践】》

《实践Vue 3.0做JSX(TSX)风格的组件开发》

《一篇文章教你并列比较React.js和Vue.js的语法【实践】》

《手拉手带你开启Vue3世界的鬼斧神工【实践】》

《深入浅出通过vue-cli3构建一个SSR应用程序【实践】》

《怎样为你的 Vue.js 单页应用提速》

《聊聊昨晚尤雨溪现场针对Vue3.0 Beta版本新特性知识点汇总》

《【新消息】Vue 3.0 Beta 版本发布，你还学的动么？》

《Vue真是太好了 壹万多字的Vue知识点 超详细!》

《Vue + Koa从零打造一个H5页面可视化编辑器——Quark-h5》

《深入浅出Vue3 跟着尤雨溪学 TypeScript 之 Ref 【实践】》

《手把手教你深入浅出vue-cli3升级vue-cli4的方法》

《Vue 3.0 Beta 和React 开发者分别杠上了》

《手把手教你用vue drag chart 实现一个可以拖动 / 缩放的图表组件》

《Vue3 尝鲜》

《总结Vue组件的通信》

《Vue 开源项目 TOP45》

《2020 年，Vue 受欢迎程度是否会超过 React？》

《尤雨溪：Vue 3.0的设计原则》

《使用vue实现HTML页面生成图片》

《实现全栈收银系统(Node+Vue)(上)》

《实现全栈收银系统(Node+Vue)(下)》

《vue引入原生高德地图》

《Vue合理配置WebSocket并实现群聊》

《多年vue项目实战经验汇总》

《vue之将echart封装为组件》

《基于 Vue 的两层吸顶踩坑总结》

《Vue插件总结【前端开发必备】》

《Vue 开发必须知道的 36 个技巧【近1W字】》

《构建大型 Vue.js 项目的10条建议》

《深入理解vue中的slot与slot-scope》

《手把手教你Vue解析pdf(base64)转图片【实践】》

《使用vue+node搭建前端异常监控系统》

《推荐 8 个漂亮的 vue.js 进度条组件》

《基于Vue实现拖拽升级(九宫格拖拽)》

《手摸手，带你用vue撸后台 系列二(登录权限篇)》

《手摸手，带你用vue撸后台 系列三(实战篇)》

《前端框架用vue还是react？清晰对比两者差异》

《Vue组件间通信几种方式，你用哪种？【实践】》

《浅析 React / Vue 跨端渲染原理与实现》

《10个Vue开发技巧助力成为更好的工程师》

《手把手教你Vue之父子组件间通信实践讲解【props、$ref 、$emit】》

《1W字长文+多图，带你了解vue的双向数据绑定源码实现》

《深入浅出Vue3 的响应式和以前的区别到底在哪里？【实践】》

《干货满满!如何优雅简洁地实现时钟翻牌器(支持JS/Vue/React)》

《基于Vue/VueRouter/Vuex/Axios登录路由和接口级拦截原理与实现》

《手把手教你D3.js 实现数据可视化极速上手到Vue应用》

《吃透 Vue 项目开发实践｜16个方面深入前端工程化开发技巧【上】》

《吃透 Vue 项目开发实践｜16个方面深入前端工程化开发技巧【中】》

《吃透 Vue 项目开发实践｜16个方面深入前端工程化开发技巧【下】》

《Vue3.0权限管理实现流程【实践】》

《后台管理系统，前端Vue根据角色动态设置菜单栏和路由》

作者：hkc52 前端巅峰

转发链接：https://mp.weixin.qq.com/s/A6WgCjQj3KsaKC6kSLy-1A

原文作者：KC

原文链接：https://hkc452.github.io/slamdunk-the-vue3/