Place holder in vue2. X source code

Steamed bread with pear 2020-11-08 17:23:16
place holder vue2. vue source

vue2.x The place holder in the source code

The reason is that I read this article about Nuggets again From once vue ssr Render client error , Look at ssr Client activation process , Written inside stay updateClass() in , vnode Of tag yes div, and vnode Of elm nevertheless comment. because comment Node is not setAttribute Methodical , So I made a mistake . What I didn't really understand , especially comment I don't quite understand what it is , So I set up a project to debug , Straighten out what I don't know .

Through this article , You can learn :

  1. How to build environment debugging vue2.x Source code ?
  2. What is a place holder ? What's the usage? ?
  3. How does the component update stage update the placeholder nodes ?

Environment building

1. We use vue-cli Build a project

vue create test-sourcecode

2. In the project clone vue The source code library

cd test-sourcecode
git clone

3. Get into vue The source code library And use watch Formal compilation

cd vue-dev
npm install
npm run dev

4. go back to test-sourcecode Folder , Join in .eslintignore file , prohibit eslint Check vue Source code

cd ..
echo 'vue-dev' >> .eslintignore

5. Put... In the project import Vue from 'vue' Replace with import Vue from '../vue-dev/dist/vue.js'

6. Use npm run serve Start the project . There will be changes in both source code and project Heat overload effect , You can safely add console.log Look at the output .

What is a place holder ? What's the usage? ?

We often see in various source code analysis articles Placeholder node 、placeholder node etc. , What do they do ?

I don't want to map or code here , Said directly .vue The component is generating vnode In the process of , For the native node, it is generated directly tag For the corresponding native tag Of vnode node , For component nodes, it generates tag yes vue-component-1-App The node of , This kind of node is a placeholder node , Or call it placeholder node .

The function of this node is , It's just taking a place , It's not like native vnode Nodes are also updated , No corresponding components vnode The data of , Its update process is like this , When comparing the old and new placeholder nodes for updating :

  1. If the old and new placeholder nodes There is no such thing as Of , Just create or destroy the placeholder node , At the same time by creating or by vnode hook Destroy the corresponding component vnode.
  2. If the old and new placeholder nodes All exist , But it's not the same node , Just destroy the old node , Create a new placeholder node under the parent node of the placeholder node , At the same time, create the corresponding component vnode.
  3. If the old and new placeholder nodes All exist , And it's the same node , Then use vnode hook Update the corresponding component vnode.

Be careful : The components mentioned above vnode refer to , The component generated by the component corresponding to the place holder vnode, It really controls the update of this component vnode.( in addition , Functional components do not generate placeholder nodes , Because it has no life cycle )

How to find the corresponding component through the placeholder node vnode Well ? It's very simple , When you create a placeholder node , Will put components vnode Mounted to this placeholder node componentInstance Attribute , So this property points to the component vnode.

How does a component update node update a placeholder node

The specific update process has been mentioned above , in general , It's using the placeholder node vnode hook To update components vnode , Here's how How to use it? vnode hook To update .

1. Determine whether this node is a placeholder node , The source code is By looking at the placeholder node for hook Judge Of , If so , it prepatch:

if (isDef(data) && isDef(i = data.hook) && isDef(i = i.prepatch)) {
i(oldVnode, vnode)

2. It's going on prepatch When , Meeting adopt componentInstance Get the corresponding component vnode, And then through updateChildComponent Method Update components vnode Of props、listeners etc. .

prepatch (oldVnode: MountedComponentVNode, vnode: MountedComponentVNode) {
const options = vnode.componentOptions
const child = vnode.componentInstance = oldVnode.componentInstance
options.propsData, // updated props
options.listeners, // updated listeners
vnode, // new parent vnode
options.children // new children

3. Here's the... Of the placeholder node The task is done 了 , But the component only updates props、listeners etc. , Then the components Self through props、listeners These responsive data , To achieve their own update .


When looking at the source code , There are still a few small problems , I'll leave it to the next time :

  1. What is? comment node
  2. What is? asyncPlaceholder?
  3. What is? static vnode?
本文为[Steamed bread with pear]所创,转载请带上原文链接,感谢

  1. [front end -- JavaScript] knowledge point (IV) -- memory leakage in the project (I)
  2. This mechanism in JS
  3. Vue 3.0 source code learning 1 --- rendering process of components
  4. Learning the realization of canvas and simple drawing
  5. gin里获取http请求过来的参数
  6. vue3的新特性
  7. Get the parameters from HTTP request in gin
  8. New features of vue3
  9. vue-cli 引入腾讯地图(最新 api,rocketmq原理面试
  10. Vue 学习笔记(3,免费Java高级工程师学习资源
  11. Vue 学习笔记(2,Java编程视频教程
  12. Vue cli introduces Tencent maps (the latest API, rocketmq)
  13. Vue learning notes (3, free Java senior engineer learning resources)
  14. Vue learning notes (2, Java programming video tutorial)
  15. 【Vue】—props属性
  16. 【Vue】—创建组件
  17. [Vue] - props attribute
  18. [Vue] - create component
  19. 浅谈vue响应式原理及发布订阅模式和观察者模式
  20. On Vue responsive principle, publish subscribe mode and observer mode
  21. 浅谈vue响应式原理及发布订阅模式和观察者模式
  22. On Vue responsive principle, publish subscribe mode and observer mode
  23. Xiaobai can understand it. It only takes 4 steps to solve the problem of Vue keep alive cache component
  24. Publish, subscribe and observer of design patterns
  25. Summary of common content added in ES6 + (II)
  26. No.8 Vue element admin learning (III) vuex learning and login method analysis
  27. Write a mini webpack project construction tool
  28. Shopping cart (front-end static page preparation)
  29. Introduction to the fluent platform
  30. Webpack5 cache
  31. The difference between drop-down box select option and datalist
  32. CSS review (III)
  33. Node.js学习笔记【七】
  34. Node.js learning notes [VII]
  35. Vue Router根据后台数据加载不同的组件(思考->实现->不止于实现)
  36. Vue router loads different components according to background data (thinking - & gt; Implementation - & gt; (more than implementation)
  37. 【JQuery框架,Java编程教程视频下载
  38. [jQuery framework, Java programming tutorial video download
  39. Vue Router根据后台数据加载不同的组件(思考->实现->不止于实现)
  40. Vue router loads different components according to background data (thinking - & gt; Implementation - & gt; (more than implementation)
  41. 【Vue,阿里P8大佬亲自教你
  42. 【Vue基础知识总结 5,字节跳动算法工程师面试经验
  43. [Vue, Ali P8 teaches you personally
  44. [Vue basic knowledge summary 5. Interview experience of byte beating Algorithm Engineer
  45. 【问题记录】- 谷歌浏览器 Html生成PDF
  46. [problem record] - PDF generated by Google browser HTML
  47. 【问题记录】- 谷歌浏览器 Html生成PDF
  48. [problem record] - PDF generated by Google browser HTML
  49. 【JavaScript】查漏补缺 —数组中reduce()方法
  50. [JavaScript] leak checking and defect filling - reduce() method in array
  51. 【重识 HTML (3),350道Java面试真题分享
  52. 【重识 HTML (2),Java并发编程必会的多线程你竟然还不会
  53. 【重识 HTML (1),二本Java小菜鸟4面字节跳动被秒成渣渣
  54. [re recognize HTML (3) and share 350 real Java interview questions
  55. [re recognize HTML (2). Multithreading is a must for Java Concurrent Programming. How dare you not
  56. [re recognize HTML (1), two Java rookies' 4-sided bytes beat and become slag in seconds
  57. 【重识 HTML ,nginx面试题阿里
  58. 【重识 HTML (4),ELK原来这么简单
  59. [re recognize HTML, nginx interview questions]
  60. [re recognize HTML (4). Elk is so simple