Shulou(Shulou.com)06/03 Report--

This article mainly introduces "the source code analysis of vue virtual Dom-render". In the daily operation, I believe that many people have doubts about the source code analysis of vue virtual Dom-render. The editor consulted all kinds of materials and sorted out a simple and easy-to-use method of operation. I hope it will be helpful to answer the doubts of "source code analysis of vue virtual Dom-render". Next, please follow the editor to study!

Analysis of vue Source Code-- Virtual Dom-render

Instance/index.jsfunction Vue (options) {if (process.env.NODE_ENV! = = 'production' & &! (this instanceof Vue)) {warn (' Vue is a constructor and should be called with the `new` keyword')} this._init (options)} renderMixin (Vue)

Initialization first executes the renderMixin method, Vue instantiates the execution of this._init, and there is initRender () in the execution of this.init method.

RenderMixininstallRenderHelpers (put some rendering utility functions on the Vue prototype) Vue.prototype.$nextTick = function (fn: Function) {return nextTick (fn, this)}

Take a closer look at this function and explain it in the official documentation in Vue

Vue performs DOM updates asynchronously. As soon as data changes are observed, Vue opens a queue and buffers all data changes that occur in the same event loop. If the same watcher is triggered multiple times, it will only be pushed into the queue once. This removal of duplicate data during buffering is important to avoid unnecessary calculations and DOM operations. Then, in the next event loop "tick", Vue refreshes the queue and performs the actual (deduplicated) work. Vue internally attempts to use native Promise.then and MessageChannel for asynchronous queues, using setTimeout (fn, 0) instead if the execution environment does not support it.

Export function nextTick (cb?: Function, ctx?: Object) {let _ resolve callbacks.push (() = > {if (cb) {try {cb.call (ctx)} catch (e) {handleError (e, ctx) 'nextTick')} else if (_ resolve) {_ resolve (ctx)}}) if (! pending) {pending = true timerFunc ()} / / $flow-disable-line if (! cb & & typeof Promise! = =' undefined') {return new Promise (resolve = > {_ resolve = resolve})}}

Vue.nextTick is used to delay the execution of a piece of code, which takes two parameters (the callback function and the context in which the callback function is executed), and returns the promise object if no callback function is provided.

Function flushCallbacks () {pending = false const copies = callbacks.slice (0) callbacks.length = 0 for (let I = 0; I

< copies.length; i++) { copies[i]() }} 这个flushCallbacks 是执行callbacks里存储的所有回调函数。 timerFunc 用来触发执行回调函数 先判断是否原生支持promise，如果支持，则利用promise来触发执行回调函数； 否则，如果支持MutationObserver，则实例化一个观察者对象，观察文本节点发生变化时，触发执行 所有回调函数。 如果都不支持，则利用setTimeout设置延时为0。 const observer = new MutationObserver(flushCallbacks) const textNode = document.createTextNode(String(counter)) observer.observe(textNode, { characterData: true }) timerFunc = () =>

{counter = (counter + 1)% 2 textNode.data = String (counter)} isUsingMicroTask = true

MutationObserver is a constructor that accepts a callback parameter to handle the callback function of node changes. In the observe method, the options parameter characterData: sets true, indicating the change of the target data.

_ render function

By executing the createElement method and returning vnode, it is a virtual Node.

Vnode = render.call (vm._renderProxy, vm.$createElement) at this point, the study of "source code parsing of vue virtual Dom-render" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.