1写在前面
Vue3允许在编写组件的时候添加一个setup启动函数，作为Composition API逻辑组织的入口。那么渲染前的初始化过程是怎样的呢？
2setup启动函数
在setup函数内部，定义了一个响应式对象state，通过reactive API创建。state对象有name和age两个属性，模板中引用到的变量state和函数变量add包含在setup函数的返回对象中。
<template>
<div>
<h1>我的名字：{{state.name}}</h1>
<h1>我的年龄：{{state.age}}</h1>
<button>过年了，又长了一岁</button>
</div>
</template>
<script>
import {reactive} from "vue";
export default define{
setup(){
const state = reactive({
name:"yichuan",
age:18
});
function add(){
state.age++;
}
return{
state,
add
}
}
}
</script>
我们在vue2中知道是在props、data、methods、computed等options中定义一些变量，在组件初始化阶段，vue2内部会处理这些options，即把定义的变量添加到组件实例上，等模板变异成render函数时，内部通过with(this){}的语法去访问在组件实例中的变量。
3创建和设置组件实例
组件实例的设置函数setupComponent流程是：
- 判断是否是一个有状态组件
- 初始化props
- 初始化插槽
- 设置有状态的组件实例
- 返回组件实例
function setupComponent(instance,isSSR=false){
const {props,children,shapeFlag}= instance.vnode;
//判断是否是一个有状态的组件
const isStateful = shapeFlag & 4;
//初始化 props
initProps(instance,props,isStateful,isSSR);
//初始化 插槽
initSlots(instance,children);
//设置有状态的组件实例
const setupResult = isStateful
? setupStatefulComponent(instance,isSSR)
: undefined;
return setupResult;
}
在函数setupStatefulComponent的执行过程中，流程如下：
-
创建渲染代理的属性访问缓存
-
创建渲染上下文的代理
-
判断处理setup函数
- 如果setup函数带有参数，则创建一个setupContext
- 执行setup函数，获取结果
- 处理setup执行结果
function setupStatefulComponent(instance,isSSR){
const Component = instance.type;
//创建渲染代理的属性访问缓存
instance.accessCache = {};
//创建渲染上下文的代理
instance.proxy = new Proxy(instance.ctx,PublicInstanceProxyHandlers);
//判断处理setup函数
const {setup} = Component;
if(setup){
//如果setup函数带有参数，则创建一个setupContext
const setupContext = (
instance.setupContext = setup.length > 1
? createSetupContext(instance)
: null)
//执行setup函数，获取结果
const setupResult = callWithErrorHandling(
setup,
instance,
0,/*SETUP_FUNCTION*/
[instance.props,setupContext]
)
//处理setup执行结果
handleSetupResult(instance,setupResult);
}else{
//完成组件实例的设置
finishComponentSetup(instance);
}
}
在vue2中也有代理模式：
- props求值后的数据存储在this._props中
- data定义的数据存储在this._data中
在vue3中，为了维护方便，把组件中不通用状态的数据存储到不同的属性中，比如：存储到setupState、ctx、data、props中。在执行组件渲染函数的时候，直接访问渲染上下文instance.ctx中的属性，做一层proxy对渲染上下文instance.ctx属性的访问和修改，代理到setupState、ctx、data、props中数据的访问和修改。
4创建渲染上下文代理
创建渲染上下文代理，使用了proxy的set、get、has三个属性。
我们第一次获取key对应的数据后，利用accessCache[key]去缓存数据。下次再根据key查找数据，直接通过accessCache[key]获取对应的值，不需要依次调用hasOwn去判断。
get({ _: instance }: ComponentRenderContext, key: string) {
const { ctx, setupState, data, props, accessCache, type, appContext } =
instance
// for internal formatters to know that this is a Vue instance
if (__DEV__ && key === '__isVue') {
return true
}
// prioritize <script setup> bindings during dev.
// this allows even properties that start with _ or $ to be used - so that
// it aligns with the production behavior where the render fn is inlined and
// indeed has access to all declared variables.
if (
__DEV__ &&
setupState !== EMPTY_OBJ &&
setupState.__isScriptSetup &&
hasOwn(setupState, key)
) {
return setupState[key]
}
// data / props / ctx
// This getter gets called for every property access on the render context
// during render and is a major hotspot. The most expensive part of this
// is the multiple hasOwn() calls. It's much faster to do a simple property
// access on a plain object, so we use an accessCache object (with null
// prototype) to memoize what access type a key corresponds to.
let normalizedProps
if (key[0] !== '$') {
// data / props / ctx / setupState
// 渲染代理的属性访问缓存中
const n = accessCache![key]
if (n !== undefined) {
//从缓存中获取
switch (n) {
case AccessTypes.SETUP:
return setupState[key]
case AccessTypes.DATA:
return data[key]
case AccessTypes.CONTEXT:
return ctx[key]
case AccessTypes.PROPS:
return props![key]
// default: just fallthrough
}
} else if (setupState !== EMPTY_OBJ && hasOwn(setupState, key)) {
//从setupState中获取数据
accessCache![key] = AccessTypes.SETUP
return setupState[key]
} else if (data !== EMPTY_OBJ && hasOwn(data, key)) {
//从data中获取数据
accessCache![key] = AccessTypes.DATA
return data[key]
} else if (
// only cache other properties when instance has declared (thus stable)
// props
(normalizedProps = instance.propsOptions[0]) &&
hasOwn(normalizedProps, key)
) {
accessCache![key] = AccessTypes.PROPS
return props![key]
} else if (ctx !== EMPTY_OBJ && hasOwn(ctx, key)) {
//从ctx中获取数据
accessCache![key] = AccessTypes.CONTEXT
return ctx[key]
} else if (!__FEATURE_OPTIONS_API__ || shouldCacheAccess) {
accessCache![key] = AccessTypes.OTHER
}
}
const publicGetter = publicPropertiesMap[key]
let cssModule, globalProperties
// public $xxx properties
if (publicGetter) {
if (key === '$attrs') {
track(instance, TrackOpTypes.GET, key)
__DEV__ && markAttrsAccessed()
}
return publicGetter(instance)
} else if (
// css module (injected by vue-loader)
(cssModule = type.__cssModules) &&
(cssModule = cssModule[key])
) {
return cssModule
} else if (ctx !== EMPTY_OBJ && hasOwn(ctx, key)) {
// user may set custom properties to `this` that start with `$`
accessCache![key] = AccessTypes.CONTEXT
return ctx[key]
} else if (
// global properties
((globalProperties = appContext.config.globalProperties),
hasOwn(globalProperties, key))
) {
if (__COMPAT__) {
const desc = Object.getOwnPropertyDescriptor(globalProperties, key)!
if (desc.get) {
return desc.get.call(instance.proxy)
} else {
const val = globalProperties[key]
return isFunction(val) ? val.bind(instance.proxy) : val
}
} else {
return globalProperties[key]
}
} else if (
__DEV__ &&
currentRenderingInstance &&
(!isString(key) ||
// #1091 avoid internal isRef/isVNode checks on component instance leading
// to infinite warning loop
key.indexOf('__v') !== 0)
) {
if (
data !== EMPTY_OBJ &&
(key[0] === '$' || key[0] === '_') &&
hasOwn(data, key)
) {
warn(
`Property ${JSON.stringify(
key
)} must be accessed via $data because it starts with a reserved ` +
`character ("$" or "_") and is not proxied on the render context.`
)
} else if (instance === currentRenderingInstance) {
warn(
`Property ${JSON.stringify(key)} was accessed during render ` +
`but is not defined on instance.`
)
}
}
}
注意：如果我们直接给props中的数据赋值，在非生产环境中收到一条警告，因为直接修改props不符合数据单向流动的设计思想。
set函数的实现：
export const PublicInstanceProxyHandlers: ProxyHandler<any> = {
set(
{ _: instance }: ComponentRenderContext,
key: string,
value: any
): boolean {
const { data, setupState, ctx } = instance
if (setupState !== EMPTY_OBJ && hasOwn(setupState, key)) {
//给setupState赋值
setupState[key] = value
} else if (data !== EMPTY_OBJ && hasOwn(data, key)) {
//给data赋值
data[key] = value
} else if (hasOwn(instance.props, key)) {
//不能直接给props赋值
__DEV__ &&
warn(
`Attempting to mutate prop "${key}". Props are readonly.`,
instance
)
return false
}
if (key[0] === '$' && key.slice(1) in instance) {
//不能给vue内部以$开头的保留属性赋值
__DEV__ &&
warn(
`Attempting to mutate public property "${key}". ` +
`Properties starting with $ are reserved and readonly.`,
instance
)
return false
} else {
if (__DEV__ && key in instance.appContext.config.globalProperties) {
Object.defineProperty(ctx, key, {
enumerable: true,
configurable: true,
value
})
} else {
ctx[key] = value
}
}
return true
}
}
has函数的实现：
has(
{
_: { data, setupState, accessCache, ctx, appContext, propsOptions }
}: ComponentRenderContext,
key: string
) {
let normalizedProps
//依次判断
return (
!!accessCache![key] ||
(data !== EMPTY_OBJ && hasOwn(data, key)) ||
(setupState !== EMPTY_OBJ && hasOwn(setupState, key)) ||
((normalizedProps = propsOptions[0]) && hasOwn(normalizedProps, key)) ||
hasOwn(ctx, key) ||
hasOwn(publicPropertiesMap, key) ||
hasOwn(appContext.config.globalProperties, key)
)
}
5判断处理setup函数
//判断处理setup函数
const { setup } = Component
if (setup) {
//如果setup函数带参数，则创建了一个setupContext
const setupContext = (instance.setupContext =
setup.length > 1 ? createSetupContext(instance) : null)
setCurrentInstance(instance)
pauseTracking()
//执行setup函数获取结果
const setupResult = callWithErrorHandling(
setup,
instance,
ErrorCodes.SETUP_FUNCTION,
[__DEV__ ? shallowReadonly(instance.props) : instance.props, setupContext]
)
resetTracking()
unsetCurrentInstance()
if (isPromise(setupResult)) {
setupResult.then(unsetCurrentInstance, unsetCurrentInstance)
if (isSSR) {
// return the promise so server-renderer can wait on it
return setupResult
.then((resolvedResult: unknown) => {
handleSetupResult(instance, resolvedResult, isSSR)
})
.catch(e => {
handleError(e, instance, ErrorCodes.SETUP_FUNCTION)
})
} else if (__FEATURE_SUSPENSE__) {
// async setup returned Promise.
// bail here and wait for re-entry.
instance.asyncDep = setupResult
} else if (__DEV__) {
warn(
`setup() returned a Promise, but the version of Vue you are using ` +
`does not support it yet.`
)
}
} else {
//处理setup执行结果
handleSetupResult(instance, setupResult, isSSR)
}
} else {
finishComponentSetup(instance, isSSR)
}
6标准化模板或渲染函数
组件会通过 函数渲染成DOM，但是我们很少直接改写render函数。而是通过这两种方式：
- 使用SFC（SIngle File Components）单文件的开发方式来开发组件，通过编写组件的template模板去描述一个组件的DOM结构
- 还可以不借助webpack编译，直接引入vue.js，开箱即用，直接在组件对象template属性中写组件的模板
Vue.js在web端有runtime-only和runtime-compiled两个版本，在不是特殊要求的开发时，推荐使用runtime-only版本，因为它的体积相对更小，而且运行时不用进行编译，耗时少，性能更优秀。对于老旧项目可以使用runtime-compiled，runtime-only和runtime-compiled的区别在于是否注册了compile。
compile方法是通过外部注册的：
let compile;
function registerRuntimeCompiler(_compile){
compile = _compile;
}
compile和组件template属性存在，render方法不存在的情况，runtime-compiled版本会在Javascript运行时进行模板编译，生成render函数。
compile和组件template属性不存在，组件template属性存在的情况，由于没有compile，用的是runtime-only版本，会报警告告诉用户，想要运行时编译得使用runtime-compiled版本的vue.js。
在执行setup函数并获取结果的时候，使用callWithErrorHandling把setup包装了一层，有哪些好处呢？
7参考文章
- 《Vue3核心源码解析》
- 《Vue中文社区》
- 《Vue3中文文档》
8写在最后
本文中主要分析了组件的初始化过程，主要包括创建组件实例和设置组件实例，通过进一步细节的深入，了解渲染上下文的代理过程，了解了Composition API中的setup 启动函数执行的时机。
