|Vue.js源码全方位深入解析，快人一步进名企-完结( 二 )

const appContext = (parent ? parent.appContext : vnode.appContext) || emptyAppContext;
const instance = <{p>
// 组件唯一 id
uid: uid++
// 组件 vnode
vnode
// 父组件实例
parent
// app 上下文
【|Vue.js源码全方位深入解析，快人一步进名企-完结】appContext
// vnode 节点类型
type: vnode.type
// 根组件实例
root: null
// 新的组件 vnode
next: null
// 子节点 vnode
subTree: null
// 带副作用更新函数
update: null
// 渲染函数
render: null
// 渲染上下文代理
proxy: null
// 带有 with 区块的渲染上下文代理
withProxy: null
// 响应式相关对象
effects: null
// 依赖注入相关
provides: parent ? parent.provides : Object.create(appContext.provides)
// 渲染代理的属性访问缓存
accessCache: null
// 渲染缓存
renderCache: [

// 渲染上下文
ctx: EMPTY_OBJ
// data 数据
data: EMPTY_OBJ
// props 数据
props: EMPTY_OBJ
// 普通属性
attrs: EMPTY_OBJ
// 插槽相关
slots: EMPTY_OBJ
// 组件或者 DOM 的 ref 引用
refs: EMPTY_OBJ
// setup 函数返回的响应式结果
setupState: EMPTY_OBJ
// setup 函数上下文数据
setupContext: null
// 注册的组件
components: Object.create(appContext.components)
// 注册的指令
directives: Object.create(appContext.directives)
// suspense 相关
suspense
// suspense 异步依赖
asyncDep: null
// suspense 异步依赖是否都已处理
asyncResolved: false
// 是否挂载
isMounted: false
// 是否卸载
isUnmounted: false
// 是否激活
isDeactivated: false
// 生命周期， before create
bc: null
// 生命周期， created
c: null
// 生命周期， before mount
bm: null
// 生命周期， mounted
m: null
// 生命周期， before update
bu: null
// 生命周期， updated
u: null
// 生命周期， unmounted
um: null
// 生命周期， before unmount
bum: null
// 生命周期 deactivated
da: null
// 生命周期 activated
a: null
// 生命周期 render triggered
rtg: null
// 生命周期 render tracked
rtc: null
// 生命周期 error captured
ec: null
// 派发事件方法
emit: null

// 初始化渲染上下文
instance.ctx = { _: instance
// 初始化根组件指针
instance.root = parent ? parent.root : instance
// 初始化派发事件方法
instance.emit = emit.bind(null instance)
return instance

从上述代码中可以看到，组件实例 instance 上定义了很多属性，你千万不要被这茫茫多的属性吓到，因为其中一些属性是为了实现某个场景或者某个功能所定义的，你只需要通过我在代码中的注释大概知道它们是做什么的即可。 Vue.js 2.x 使用 new Vue 来初始化一个组件的实例，到了 Vue.js 3.0 ，我们直接通过创建对象去创建组件的实例。这两种方式并无本质的区别，都是引用一个对象，在整个组件的生命周期中去维护组件的状态数据和上下文环境。创建好 instance 实例后，接下来就是设置它的一些属性。目前已完成了组件的上下文、根组件指针以及派发事件方法的设置。
3.设置组件实例
function setupComponent (instance isSSR = false) <{p>
const { props children shapeFlag= instance.vnode
// 判断是否是一个有状态的组件
const isStateful = shapeFlag & 4
// 初始化 props
initProps(instance props isStateful isSSR)