〖Vue3 源码笔记03〗溯源data响应

203 阅读1分钟

回至v3.0.0-beta.1

参考hkc github v3.0源码解析

v3.0.0,2020-9-18发布。这篇文章2020-5-31号发布。版本还是晚了。

v3.0.0-beta.1,2020-4-17,差不多。

  • ref-transform/package.json在v3.2.4版本新增
  • sfc-playground/package.json 在v3.0.0-beta.5新增
  • vue-compat/package.json 在v3.0.0-alpha.1新增

复制到当前版本,设置命令"dev": "node scripts/dev.js -s"

npm run dev

再走脉络

文件位置函数return
packages\runtime-dom\src\index.tscreateAppapp
packages\runtime-dom\src\index.tsensureRenderer
挂载reander函数
packages\runtime-core\src\renderer.tscreateRenderer
packages\runtime-core\src\renderer.tsbaseCreateRenderer
创建app,开始挂载
packages\runtime-core\src\apiCreateApp.tscreateAppAPIcreateApp
packages\runtime-core\src\apiCreateApp.tsapp.mountproxy
packages\runtime-core\src\apiCreateApp.tscreateVNodevnode
packages\runtime-core\src\vnode.tscreateVNode
mount进入render
packages\runtime-core\src\renderer.tsbaseCreateRenderer.render
packages\runtime-core\src\renderer.tsbaseCreateRenderer.patch
packages\runtime-core\src\renderer.tsbaseCreateRenderer.processComponent
packages\runtime-core\src\renderer.tsbaseCreateRenderer.mountComponent
packages\runtime-core\src\renderer.tscreateComponentInstanceinstance
初始化data
packages\runtime-core\src\renderer.tssetupComponent(instance)
packages\runtime-core\src\component.tsinitProps(instance)
packages\runtime-core\src\component.tsinitSlots(instance)
packages\runtime-core\src\component.tssetupStatefulComponent
instance.proxy = new Proxy(instance.ctx, PublicInstanceProxyHandlers)
packages\runtime-core\src\componentProxy.tsPublicInstanceProxyHandlers
packages\runtime-core\src\component.tsfinishComponentSetup
packages\runtime-core\src\componentOptions.tsapplyOptions
callSyncHook('beforeCreate', options, publicThis, globalMixins)beforeCreate
packages\runtime-core\src\renderer.tssetupRenderEffect

PublicInstanceProxyHandlers

get

  1. accessCache记录类型,如果已经记录过就直接返回
  2. publicGetter记录属性,如果已经记录过就直接返回

set、has

普通返回

applyOptions

// packages\runtime-core\src\componentOptions.ts
export function applyOptions(
  instance: ComponentInternalInstance,
  options: ComponentOptions,
  asMixin: boolean = false
) {
    callSyncHook('beforeCreate', options, publicThis, globalMixins)
    // global mixins are applied first
    applyMixins(instance, globalMixins)
    applyMixins(instance, mixins)
    
    // 取出data对象
    const data = dataOptions.call(publicThis, publicThis)
    // 响应包裹
    instance.data = reactive(data)
    
    extend(instance.data, data)
    
}