Image

advanced-components

3 min read
Last update: December 19, 2021

Evan You on the Mounting Process

In the previous lesson, we looked into the Vue mounting process. In this bonus lesson Evan You, the creator of Vue, gives us a tour of the source code relating to the mounting process and gives us a look forward into Vue 3.

Platform-Based Builds

Evan starts by acknowledging that Vue is designed to allow for multiple platforms. He shows us the source code for the web and weex platforms. He also discusses the relationship between the different builds in the platforms/web folder and how they correspond to the files generated in the dist folder.

The files in the dist folder are shipped to CDNs.

The entry-runtime-with-compiler.js is the full vue.js that is shipped onto the CDNs.

A Look into the Vue Runtime

Obviously, display operations from one platform to the next are different, and that’s why we have them in different directories. The code present in platforms/web/runtime is expected to be executed in the browser only. The modules like class, attrs, dom-props etc anticipate the presence of the window object and DOM APIs.

The vue directives like v-show and v-model have their own implementation to deal with CSS and all the browser inputs respectively.

The weex implementation in platforms/weex also follows the same folder structure, but calls to native rendering engines (Android or iOS) to perform the operations.

The Patching Algorithm

Evan points out to an important line of code in platforms/web/runtime/index.js

// install platform patch function
Vue.prototype.__patch__ = inBrowser ? patch : noop

This is the virtual DOM patch algorithm. The patch function is imported from platforms/web/runtime/patch.js. This is created by calling createPatchFunction().

// platforms/web/runtime/patch.js
import * as nodeOps from "web/runtime/node-ops"; // <-- the operations needed to be performed on virtual DOM import { createPatchFunction } from "core/vdom/patch" ; // <-- the platform agnostic factory function for creating patch algorithm import baseModules from "core/vdom/modules/index" ; import platformModules from "web/runtime/modules/index" ; // <-- browser only modules needed by patch algorithm const modules=platformModules.concat(baseModules); export const patch: Function=createPatchFunction({ nodeOps, modules }); ``` The `createPatchFunction()` is a factory function that takes two arguments: 1. **nodeOps:** the operations needed map the Virtual Dom onto the platform display (i.e. Actual DOM or Android). For example in the web nodOps, the DOM APIs are used inside these operations (think `document.createElement`). 2. **modules:** the list of modules needed to be injected for the diffing and patching of VNodes. We can inject custom `nodeOps` and custom `modules` into the `createPatchFunction` to create our own patching algorithm. This is how you’d use Vue for platforms other than the web. In the Vue source you can see how Weex is injecting their own `nodeOps` and `modules`. ## Scope for improvement At the moment there is platform-specific code inside Vue Core (Web & Weex). As you might imagine, this is not separating concerns optimally. In Vue 3, Evan states that he would like to provide a first class renderer API and separate this code from Vue core. This would make it easier for other platform developers to integrate with Vue. ![](https://firebasestorage.googleapis.com/v0/b/vue-mastery.appspot.com/o/flamelink%2Fmedia%2F1578371174253_1.png?alt=media&token=5ad4945f-a58b-4e94-8df2-deaa73e93bc8) In the next lesson, we jump into a killer feature of Vue: **Scoped Slots**