“This article has participated in the good article call order activity, click to see: back end, big front end double track submission, 20,000 yuan prize pool for you to challenge!”

Why Vue3

When a vUE level framework is upgraded to a major version, it does not happen overnight. Instead, the decision is made after long-term research and demonstration of the feasibility of the new solution. There are many factors involved, and I listed below some of the factors that are more concerned for our users

  1. With the release of the ES2015 standard, Javascript has been significantly improved, and the Proxy feature is particularly important for VUE, because in Vue2, the principle of responsive data is to iterate over the data Object properties passed by the user through the object.defineProperty API. To turn it into getters and setters. There are three problems with this approach:
  • Since you need to traverse all the properties on a data object, there are performance problems if the property structure of a data object is deeply nested
  • Because you need to iterate over properties, you need to know in advance what properties are on the object before you can turn them into getters and setters. In Vue2, you can only add reactive attributes to objects nested in data by using vue. set or this.$set. However, this method does not add root-level reactive attributes
  • You cannot change an array in a responsive way with subscripts or length attributes. Instead, you must change an array in a responsive way with array methods :push, pop, shift, unshift, and splice

Proxy is a good solution to the above three problems, because Proxy actually represents the operation of the whole object. The operation of Proxy is as follows:

  • Property access
  • Attribute set
  • Properties of new
  • Attribute to delete

In my opinion, Proxy is a feature that intercepts properties from a higher dimension without paying attention to the actual form of object structure, which can greatly reduce the mental burden caused by property operations.

  1. Vue2 is not Typescript friendly because it was originally designed without regard to the importance of the type system. A common way to support Typescript is to use vue-classs-Componet or Vue-property-decorators. In Vue3, the source code is written in Typescript and is inherently Typescript friendly, so third-party libraries associated with Typescript can do better.

  2. The Vue3 has a smaller volume than the Vue2. Vue3 does this by moving most of the global APIS and internal utility functions to the module.exports property. This allows the modern mode Module Bundler to statically analyze module dependencies and remove unused code. There are parts of the framework that are never “tree shaken” (the parts of the code that are never removed from the framework) because they are essential to any type of application, and these indispensable parts are called baseline sizes. Despite the many new features, Vue3 has a compressed baseline size of about 10KB, less than half that of Vue2

Why use Vue3

Vue3 brings many new features:

  • Performance: 1.2 to 2 times faster than Vue2
  • Tree Shaking Support: Supports on-demand compilation with smaller volume
  • Composition API: Composition API, similar to React Hooks
  • Custom Renderer API: Exposes the Custom rendering API
  • Fragment, Teleport (Protal), Suspense: Add three components
  • Better TypeScript support: Better TS support

While many of these new features address the pain points used in Vue2, the following takes the Composition API as an example to illustrate the benefits of Vue3

In Vue2, we usually write components by option. Write the business logic according to the options that Vue2 gives us, such as Components, Data, Watch, mixin. The advantage of this is that all options of the same class are under one option, but the disadvantage is also very obvious:The code that implements the same business functional logic is forcibly separated by the way this option is written. The result is that when developing or maintaining a feature, you may have to jump around a lot to sort it out, which can lead to a dramatic increase in mental burden.

在Vue3In the useComposition APIYou can put the same piece of logical code together nicely, greatly reducing the mental burden. Here is a diagram to give you an intuitive sense of the distribution of the same business functional logic code in Vue2 and Vue3 in actual development

Using the Composition API, you can encapsulate reused logical code for use by other components, thus greatly reducing the amount of code you write. The thinking here is very similar to that of the react hooks, only without the restrictions that react uses:

  • Never call hooks inside a loop, condition, or nested function. Be sure to always call them at the top of your React function.
  • Do not call hooks in normal JavaScript functions.

Compare Composition API to mixins in Vue2. While both allow logic reuse, mixins come with well-known side effects:

  • Mixins are black boxes, and you can’t directly know what features or properties are exposed
  • Because mixins are black boxes, it is easy to cause naming conflicts, which can lead to bugs that are extremely difficult to troubleshoot

This class of problems can be well solved using the Composition API. Because it explicitly exposes functionality and attributes, it can be used to clearly trace the origin of attributes and methods, thus avoiding problems

conclusion

In this article, I just briefly explained the new features brought by Vue3 and the convenience brought to us in development. More things still need to be explored in the actual project. Here, we can quote a sentence: “The zhongjue is shallow on paper

Personal blog

www.carlblog.site/ has recently set up a personal blog, which will regularly publish articles about the summary of technical experience. I hope you are interested in it and don’t run away! ~