soooyoung的博客

vue中key的作用及原理作用：key能提升列表渲染速度，而且能在列表增、删、改的时候保持无需变动项的组件或dom状态。原理：vue在更新列表时，会复用旧列表中的VNode，由于vue会遍历旧列表的项，当没有key的时候，vue又会遍历新列表的项，导致性能变差；当有key的时候，vue会先遍历新列表，缓存新列表的key，这样通过map的方式提升性能。...

任务调度模块的功能在runtime-core下的scheduler文件变量首先会定义几个全局变量用于存储任务和状态。// 主任务队列，用于存储更新任务const queue: (Job | null)[] = []// 后置回调，任务队列执行完毕后执行const postFlushCbs: Function[] = []// 微任务const p = Promise.resolve()// 是否正在执行队列let isFlushing = false// 微任务已创建，任务队列等待执

1.watch和watchEffect这两都是直接调用doWatch方法，唯一区别就是第二个参数不同。export function watchEffect( effect: WatchEffect, options?: WatchOptionsBase): WatchStopHandle { return doWatch(effect, null, options)}export function watch<T = any>( source: WatchSource

1. 入口computed方法首先调用_computed实现计算属性，然后调用recordInstanceBoundEffect记录当前的effect，方便当组件卸载时清除import { computed as _computed } from '@vue/reactivity'function computed<T>( getterOrOptions: ComputedGetter<T> | WritableComputedOptions<T>) {

1. reactive如果是readonlyToRaw（以proxy为可以，已原始值为value的WeakMap，大概表示只读的代理）里的或者是ref的都不处理2. createReactiveObject如果typeof不是object则报警告如果已经代理过了则直接返回代理了的proxy如果本来是proxy则返回如果不满足canObserve则直接返回target如果是set...

effect方法可以用于计算属性功能，通过触发proxy的get方法实现将自身加入到proxy的deps中，实现与proxy关联常规使用步骤1. effect创建一个effect函数，创建时会想调用一遍，这样可以调用相关get并将effect加入相关proxy的deps中function effect<T = any>( fn: () => T, option...