@@ -22,188 +22,4 @@ console.log(`MyComponent:${MyComponent}`)
2222```
2323<a href =" /run/defineComponent " target =" _blank " >亲自试一试</a >
2424
25- 那么 ` createApp ` 里面都干了什么呢?我们接着往下看
26- 27- ``` js
28- export const createApp = ((... args ) => {
29- const app = ensureRenderer ().createApp (... args)
30- 31- if (__DEV__ ) {
32- injectNativeTagCheck (app)
33- }
34- 35- const { mount } = app
36- app .mount = (containerOrSelector: Element | string): any => {
37- const container = normalizeContainer (containerOrSelector)
38- if (! container) return
39- const component = app ._component
40- if (! isFunction (component) && ! component .render && ! component .template ) {
41- component .template = container .innerHTML
42- }
43- // clear content before mounting
44- container .innerHTML = ' '
45- const proxy = mount (container)
46- container .removeAttribute (' v-cloak'
47- return proxy
48- }
49- 50- return app
51- }) as CreateAppFunction< Element >
52- ```
53- 54- 我们可以看到重点在于 ` ensureRenderer ` ,
55- 56- ``` js
57- const rendererOptions = {
58- patchProp, // 处理 props 属性
59- ... nodeOps // 处理 DOM 节点操作
60- }
61- 62- // lazy create the renderer - this makes core renderer logic tree-shakable
63- // in case the user only imports reactivity utilities from Vue.
64- let renderer: Renderer | HydrationRenderer
65- 66- let enabledHydration = false
67- 68- function ensureRenderer () {
69- return renderer || (renderer = createRenderer (rendererOptions))
70- }
71- ```
72- 调用 ` createRenderer `
73- 74- ``` js
75- export function createRenderer<
76- HostNode = RendererNode,
77- HostElement = RendererElement
78- >(options : RendererOptions < HostNode , HostElement > ) {
79- return baseCreateRenderer< HostNode, HostElement> (options)
80- }
81- ```
82- 调用 ` baseCreateRenderer ` , ` baseCreateRenderer ` 这个函数简直可以用庞大来形容,` vnode ` ` diff ` ` patch ` 均在这个方法中实现,回头我们再来细看实现,现在我们只需要关心他最后返回的什么
83- 84- ``` js
85- function baseCreateRenderer (
86- options : RendererOptions ,
87- createHydrationFns ?: typeof createHydrationFunctions
88- ): any {
89- const {
90- insert: hostInsert ,
91- remove: hostRemove ,
92- patchProp: hostPatchProp ,
93- createElement: hostCreateElement ,
94- createText: hostCreateText ,
95- createComment: hostCreateComment ,
96- setText: hostSetText ,
97- setElementText: hostSetElementText ,
98- parentNode: hostParentNode ,
99- nextSibling: hostNextSibling ,
100- setScopeId: hostSetScopeId = NOOP ,
101- cloneNode: hostCloneNode,
102- insertStaticContent: hostInsertStaticContent
103- } = options
104- 105- // ....此处省略两千行,我们先不管
106- 107- return {
108- render,
109- hydrate,
110- createApp: createAppAPI (render, hydrate)
111- }
112- }
113- 114- ```
115- 116- 从源码中我们看到 ` baseCreateRenderer ` 最终返回 ` render ` ` hydrate ` ` createApp ` 3个函数, 但在 ` createApp ` 这个函数中我们本质上只需要返回 ` createApp ` 这个函数就好,这里返回了3个,说明其它两个会在别处用到,具体哪里能用到,后面我们再回头看
117- 118- 接着将生成的 ` render ` 传给 ` createAppAPI ` 这个真正的 ` createApp ` 方法,` hydrate ` 为可选参数,` ssr ` 的场景下会用到,这边我们也先跳过
119- 120- 看了 ` baseCreateRenderer ` 这个函数,再看 ` createAppAPI ` 就会觉得太轻松了。。。毕竟不是一个量级的
121- 122- ` createAppAPI ` 首先判断
123- 124- ``` js
125- export function createAppAPI<HostElement>(
126- render : RootRenderFunction ,
127- hydrate ?: RootHydrateFunction
128- ): CreateAppFunction<HostElement> {
129- return function createApp (rootComponent , rootProps = null ) {
130- if (rootProps != null && ! isObject (rootProps)) {
131- __DEV__ && warn (` root props passed to app.mount() must be an object.`
132- rootProps = null
133- }
134- 135- // 创建默认APP配置
136- const context = createAppContext ()
137- const installedPlugins = new Set ()
138- 139- let isMounted = false
140- 141- const app: App = {
142- _component: rootComponent as Component,
143- _props: rootProps,
144- _container: null ,
145- _context: context,
146- 147- get config () {
148- return context .config
149- },
150- 151- set config (v ) {
152- if (__DEV__ ) {
153- warn (
154- ` app.config cannot be replaced. Modify individual options instead.`
155- )
156- }
157- },
158- 159- // 都是一些眼熟的方法
160- use () {},
161- mixin () {},
162- component () {},
163- directive () {},
164- 165- // mount 我们拎出来讲
166- mount () {},
167- unmount () {},
168- // ...
169- }
170- 171- return app
172- }
173- }
174- ```
175- 176- ` createAppContext ` 实现
177- 178- ``` js
179- export function createAppContext (): AppContext {
180- return {
181- config: {
182- isNativeTag: NO ,
183- devtools: true ,
184- performance : false ,
185- globalProperties: {},
186- optionMergeStrategies: {},
187- isCustomElement: NO ,
188- errorHandler: undefined ,
189- warnHandler: undefined
190- },
191- mixins: [],
192- components: {},
193- directives: {},
194- provides: Object .create (null )
195- }
196- }
197- ```
198- 199- 到这里,整个` createApp ` 流程就结束了,在整个环节中,我们故意忽略了很多细节,不过不重要 ,这个篇幅我们只需要` createApp ` 在主流程做了什么了就好
200- 201- 你可能会有很多疑问,怎么就没了,
202- 203- 模板是怎么编绎的?
204- 生命周期是怎么挂载的?
205- 组件是怎么注册的?
206- 响应式怎么做到的?
207- 208- 等等,我们先记着,后面有篇幅单独拎出来
20925
0 commit comments