mini-vue3

vue3minivue3

testsexampleTDD,

tests

# npm test
# yarn test
# 
pnpm test
# 
pnpm test []

example

vscode

Vue/

                                    +---------------------+
                                    |                     |
                                    |  @vue/compiler-sfc  |
                                    |                     |
                                    +-----+--------+------+
                                          |        |
                                          v        v
                      +---------------------+    +----------------------+
                      |                     |    |                      |
        +------------>|  @vue/compiler-dom  +--->|  @vue/compiler-core  |
        |             |                     |    |                      |
   +----+----+        +---------------------+    +----------------------+
   |         |
   |   vue   |
   |         |
   +----+----+        +---------------------+    +----------------------+    +-------------------+
        |             |                     |    |                      |    |                   |
        +------------>|  @vue/runtime-dom   +--->|  @vue/runtime-core   +--->|  @vue/reactivity  |
                      |                     |    |                      |    |                   |
                      +---------------------+    +----------------------+    +-------------------+

reactivity => runtime-core => runtime-dom => compiler-core

reactivity

api

runtime-core

runtime-corevuejsdom,runtime-dom

h(createVNode)dompatch,mountdom

domdiff

Q: vueupdate

Q: diff

Q: setuprender

Q: nextick

Q: emit

Q: renderSlots?

Q: provide, inject?key

Q: $el,$slots,$props?

Q: templaterender(runtime-core``compile-core)

runtime-dom

dom

// 
createElement,
// 
patchProps,
// 
insert,
// 
remove,
// 
setElementText

compiler-dom

template TO code

parse``ast``ast transform

// <div>hi,{{message}}</div>


exports[`codegen element 1`] = `
"const { toDisplayString:_toDisplayString, createElementVNode:_createElementVNode } = Vue
return function render(_ctx, _cache){return _createElementVNode('div', null, 'hi,' + _toDisplayString(_ctx.message))}"
`;

: `parse` `transform` `codegen`

`parse`

ast: {{}}, <div></div>

`transform`

transformast`codegen`

`codegen`