current position:Home>On Vue source code (III) single component mounting (rendering)
On Vue source code (III) single component mounting (rendering)
2021-08-26 20:09:58 【Yixiu】
Mind mapping
Preface
The last article mainly talked about ,Vue
How the internal implementation will template
convert to ats
Code . And how to use ast
The code generates render
Functional .Vue Source code exploration ( Two ) Template compilation .
In this article, we mainly talk about how to pass render function
Generate vnode
,vnode
Make it real dom
Mount on the page , That is, as of mounted
This piece of , It doesn't contain update
This part of the data change , Namely Vue Initial rendering of .
Text
call render Generate vnode
lifecycle.js
import { patch } from "./vnode/patch"
export function mountComponent(vm) {
// vm._render() Get vnode
// vm._update(vnode) hold vnode Render as real nodes , Update to page
vm._update(vm._render())
}
export function lifeCycleMixin(Vue){
// Give an object , Render the object real DOM
Vue.prototype._update = function(vnode){
// Using the pre order depth traversal , Create nodes .
const vm = this
patch(vm.$el, vnode)
}
}
Copy code
render.js
import { isObject } from "./utils"
import { createElement, createText } from "./vnode"
export function renderMixin(Vue) {
Vue.prototype._c = function () {
const vm = this
return createElement(vm, ...arguments)
}
Vue.prototype._v = function (text) {
const vm = this
return createText(vm, text)
}
Vue.prototype._s = function (val) {
if (isObject(val)) return JSON.stringify(val)
return val
}
// according to render Generate vnode object
Vue.prototype._render = function () {
const vm = this
let { render } = vm.$options
// hold ast convert to vnode
let vnode = render.call(vm)
return vnode
}
}
// render What a function looks like
// function render() {
// with (this) {
// return _c('div', { id: "app" }, _v(_s(message)))
// }
// }
Copy code
vnode/index.js
export function createElement(vm, tag, data = {}, ...children) {
return vnode(vm, tag, data, children, data.key, undefined)
}
export function createText(vm, text) {
return vnode(vm, undefined, undefined, undefined, undefined, text)
}
function vnode(vm, tag, data, children, key, text) {
return {
vm,
tag,
data,
children,
key,
text
}
}
Copy code
ast And vnode The difference between ?
- ast It describes grammar , He doesn't have the user's own logic , Only the content parsed by grammar
- vnode Is to describe dom Structural , You can expand yourself .
according to vnode Generate reality dom
patch.js
// use vnode Make good DOM structure Replace (replace) Drop the original el
export function patch(el, vnode){
// Delete old node , according to vnode Create a new node , Replace the old node .
const elm = createElm(vnode)
const parentNode = el.parentNode
/* Insert in front of the next node of the old element Then delete the old elements */
parentNode.insertBefore(elm, el.nextSibling)
parentNode.removeChild(el)
}
// Create reality DOM node
function createElm(vnode) {
let {tag, data, children, text, vm} = vnode
// Element nodes
if(typeof tag === 'string'){
// to vnode Add a new property to store the real DOM , Just to be able to pass vnode Find the real node and update .
vnode.el = document.createElement(tag)
// If there is data attribute , We need to data Set to element .
updateProperties(vnode.el, data)
// If you have a son, recursively create
children.forEach(child => {
vnode.el.appendChild(createElm(child))
})
}else {
vnode.el = document.createTextNode(text)
}
return vnode.el
}
function updateProperties(el, props = {}) {
for(let key in props){
el.setAttribute(key, props[key])
}
}
Copy code
summary
This summary is mainly understood by render
How to generate vnode
, And turn it into reality dom
Rendered to the page , This completes the rendering process of the most basic data to the page . The following section will continue to write how to notify the page when the data changes and let the page automatically trigger the update of the page . That is, the dotted ring process in the figure .
copyright notice
author[Yixiu],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2021/08/20210826200954060v.html
The sidebar is recommended
- Crazy blessing! Tencent boss's "million JVM learning notes", real topic of Huawei Java interview 2020-2021
- JS JavaScript how to get the subscript of a value in the array
- How to implement injection in vuex source code?
- JQuery operation select (value, setting, selected)
- One line of code teaches you how to advertise on Tanabata Valentine's Day - Animation 3D photo album (music + text) HTML + CSS + JavaScript
- An article disassembles the pyramid architecture behind the gamefi outbreak
- BEM - a front-end CSS naming methodology
- [vue3] encapsulate custom global plug-ins
- Error using swiper plug-in in Vue
- Another ruthless character fell by 40000, which was "more beautiful" than Passat and maiteng, and didn't lose BMW
guess what you like
-
Huang Lei basks in Zhang Yixing's album, and the relationship between teachers and apprentices is no less than that in the past. Netizens envy Huang Lei
-
He was cheated by Wang Xiaofei and Li Chengxuan successively. Is an Yixuan a blessed daughter and not a blessed home?
-
Zhou Shen sang the theme song of the film "summer friends and sunny days" in mainland China. Netizen: endless aftertaste
-
Pink is Wangyuan online! Back to the peak! The new hairstyle is creamy and sassy
-
Front end interview daily 3 + 1 - day 858
-
Spring Webflux tutorial: how to build reactive web applications
-
[golang] walk into go language lesson 24 TCP high-level operation
-
August 23, 2021 Daily: less than three years after its establishment, Google dissolved the health department
-
The female doctor of Southeast University is no less beautiful than the female star. She has been married four times, and her personal experience has been controversial
-
There are many potential safety hazards in Chinese restaurant. The top of the program recording shed collapses, and the artist will fall down if he is careless
Random recommended
- Anti Mafia storm: He Yun's helpless son, Sun Xing, is destined to be caught by his dry son
- Introduction to flex flexible layout in CSS -- learning notes
- CSS learning notes - Flex layout (Ruan Yifeng tutorial summary)
- Today, let's talk about the arrow function of ES6
- Some thoughts on small program development
- Talk about mobile terminal adaptation
- Unwilling to cooperate with Wang Yibo again, Zhao Liying's fans went on a collective strike and made a public apology in less than a day
- JS function scope, closure, let, const
- Zheng Shuang's 30th birthday is deserted. Chen Jia has been sending blessings for ten years. Is it really just forgetting to make friends?
- Unveil the mystery of ascension
- Asynchronous solution async await
- Analysis and expansion of Vue infinite scroll source code
- Compression webpack plugin first screen loading optimization
- Specific usage of vue3 video play plug-in
- "The story of huiyeji" -- people are always greedy, and fairies should be spotless!
- Installing Vue devtool for chrome and Firefox
- Basic usage of JS object
- 1. JavaScript variable promotion mechanism
- Two easy-to-use animation JS that make the page move
- Front end Engineering - scaffold
- Java SQL Server intelligent fixed asset management, back end + front end + mobile end
- Mediator pattern of JavaScript Design Pattern
- Array de duplication problem solution - Nan recognition problem
- New choice for app development: building mobile applications using Vue native
- New gs8 Chengdu auto show announces interior Toyota technology blessing
- Vieira officially terminated his contract and left the team. The national security club sent blessings to him
- Less than 200000 to buy a Ford RV? 2.0T gasoline / diesel power, horizontal bed / longitudinal bed layout can be selected
- How does "heart 4" come to an end? Pinhole was boycotted by the brand, Ma Dong deleted the bad comments, and no one blessed him
- We are fearless in epidemic prevention and control -- pay tribute to the front-line workers of epidemic prevention!
- Front end, netty framework tutorial
- Xiaomi 11 | miui12.5 | android11 solves the problem that the httpcanary certificate cannot be installed
- The wireless charging of SAIC Roewe rx5 plus is so easy to use!
- Upload and preview pictures with JavaScript, and summarize the most complete mybatis core configuration file
- [25] typescript
- CSS transform Complete Guide (Second Edition) flight.archives 007
- Ajax foundation - HTTP foundation of interview essential knowledge
- Cloud lesson | explain in detail how Huawei cloud exclusive load balancing charges
- Decorator pattern of JavaScript Design Pattern
- [JS] 10. Closure application (loop processing)
- Left hand IRR, right hand NPV, master the password of getting rich