Today I watched Vueconf online, but I couldn’t keep up with the ideas of many guests who shared some underlying principles. In retrospect, I have been using VUE since VUe2. X for more than two years, but I do not have a deep understanding of many of the underlying implementation mechanisms. Recently in some projects using vue3 + vite to develop, vue3 and vite found a lot of places are revolutionary changes, very interested in this, so he dug this hole, from learning vue3 source, step by step will be the mountain over the past.

why ?

Why learn vue.js source code?

  • Helps improve your JavaScript skills
  • Improve work efficiency, form a virtuous circle of learning and growth
  • Draw on the experience of good source code, stand on the shoulders of giants to see the world
  • Improve your ability to interpret source code

Why are so few people willing to read the source code?

  • Because learning source code is boring, it’s not like getting feedback and seeing immediate results on a development project
  • Learning source code is more abstract and difficult to understand than a development project, and many people give up after learning it
  • There are a lot of people who want to learn but can’t

Let’s take a look at some of the improvements vue 3.0 has made:

The source code optimization

  • Directory architecture adjustment

This is done by using Monorepo and typescript to manage and develop source code to improve the maintainability of your own code.

Vue 2.x and vue 3.x source directory comparison
  • abandonedFlowTo use thetypescriptTo rewrite theVueThe source code.

Performance optimization

  • Removed some unpopular features: filter, inline-template, etc
  • Tree-shaking technology is introduced to optimize source code volume

Rely on the static structure of ES2015 module syntax (i.e., import and export), through the static analysis at the compile stage, find and mark the modules that are not introduced. If you do not include components such as Transition and keepAlive in your project, their corresponding code will not be packaged, thus indirectly reducing the size of vue.js packages introduced in your project.

Data hijacking optimization

Vue 2.x data hijacking flaw

  • Due to the use ofObject.definePropertyThis API hijacks datagetter 和 setterSo you need to know about the interceptkeyWhat is it, so it does not detect the addition and removal of object attributes, thoughvue2.xProvided for improvement$set 和 $deleteBut it still adds an extra mental burden.
  • For deeply nested objects, the need to recurse through the object layer by layer can have an impact on performance.

Vue 3.x uses proxy to directly hijack entire object changes. It is worth noting that the Proxy API does not listen for internal, deep-seated object changes, because Vue 3.0 handles this by degoding the recursive response in the getter.

The advantage of this is that the internal objects that are actually accessed become responsive rather than mindless recursion, which undoubtedly improves performance significantly.

Compiler optimization

First take a look at the compilation process for Vue

In vue 2.x, when we had a code block like this:

<div>
  <p>hello</p>
  <p>I</p>
  <p>am</p>
  <p>{{yourName}}</p>
  <p>!</p>
</div>
Copy the code

As can be seen, only the value of the fourth p tag is dynamic, but when vue 2.x diff from the parent div, tag by tag diff, no matter whether our value is dynamic or static, this will undoubtedly cause a great waste of performance.

Vue3 compilers and generates Block tree by analyzing static templates in compilation stage, which is a nested Block that cuts templates based on dynamic node instructions. The node structure inside each Block is fixed, and each Block only needs an Array to track the dynamic nodes it contains. With Block Tree, vue.js improves vNode update performance relative to the overall size of the template to the amount of dynamic content.

In addition, compilation optimizations for slot were included at compile time, cache optimizations for event-listening functions, and diff algorithms were rewritten at run time.

Syntax optimization: Composition API

Vue 1 x and vue 2 x writing component is essentially in writing a “contains the description object component options”, general term Option API, its design is according to the method, the computed, data, props and so on to categorize different options, The writing conventions are similar to the configuration parameters passed in when we used jquery plugins (such as a caroute graph). When components are small, this sort of categorization is obvious; But in large components, a component can have multiple logical concerns, and changing the code at a logical point can be a painful process of constantly switching up and down in a single file. Even though the scheme of mixins was put forward to encapsulate and cut business logic, mixins themselves also have many problems, such as the priority of the coverage policy of the same attribute and method fields, and the side effects caused to other mixins or master files after the modification of data fields in mixins.

Vue 3.0 provides a new API: The Composition API, which is also a separate installable @vue/ composition-API module, puts all the code for a logical concern into a function so that when a function needs to be modified, there is no need to jump around in a single file. Some logic reuse can also be achieved to a large extent.

Compare the two apis in terms of color and render a single file when there is more logic:

Composition characteristics of API

  • With the advantage of logic reuse, it also has better type support;
  • Since it’s essentially a function, when calling a function, naturally all types are derived, and you don’t want to use this for everything in the Option API;
  • In addition, the Composition API is tree-shaking optimized and code is easier to compress;
  • Of course, the Composition API is just a new writing enhancement and is not mandatory in VuE3. If your code is simple enough, you can continue to develop using the SFC Option API

Introduce RFC: Make changes to each version more controllable

  • The maintainer uses the RFC to determine what changes are made to each release
  • Users can also understand the cause and effect of the adoption or abandonment of each feature by reading RFC

The last

As Vue 3.0 is developed using ES2015 syntax, some apis, such as Proxy, are not polyfill, which means that the official need to issue a separate VERSION of IE11 compat to support IE11. However, according to the recent vueconf, Utah has stated that there will be no compatibility changes to IE11 in the near future, and Microsoft recently announced that the maintenance of IE11 will be discontinued soon in favor of Edge.

Vue 2.0 will be officially maintained for another 18 months, with the last major version released this year, vue 2.7, and only bugFix after that.