Vue
initialization mainly does several things, merge configuration, initialize life cycle, initialize event center, initialize rendering, initialize
data
,
props
,
computed
,
watchers
, etc.
At the end of initialization, if it is detected that there is an
el
attribute, then call the
vm.$mount
method to mount
vm
, and the mounted target
It is to render the template into the final
DOM
, then let's analyze the
Vue
mounting process
Vue
cannot be mounted
on root nodes such as
body
and
html .
The next thing is critical
Logic
-
if no
render
method is defined,
the el
or
template
string will be converted to
render
method. here we have to keep in mind
The rendering of all
Vue
components eventually requires
render
method, whether we use single-file.vue
to
develop components, or write
el
or
template
properties, which will eventually be transformed into
render
method, then this process is
an " online compilation " process of
Vue , which is to call
compileToFunctions
method implemented
VNode
is an abstract description of the real
DOM
. Its core definition is nothing more than a few key attributes, tag name, data, child
Nodes, key values, etc., and other attributes are used to expand the flexibility of
VNode
and implement some special
features
. because
VNode
is only used to map to the real
DOM
for rendering, and does not need to contain methods to manipulate
DOM
, so it is very lightweight and simple
of.
In addition to the definition of its data structure,
Virtual DOM actually needs to go through the creation and creation of VNode when it is mapped to the real
DOM
.
diff
,
patch
and other processes. Then in
Vue.js
,
the creation of
VNode
is through the aforementioned
Vue.js
uses
createElement
method to create
VNode
