Vue 3.0 was released on September 18, 2020 at 11.30pm. So far, many companies have begun to encourage you to learn Vue3, and here xiaobian will contribute to you what he knows

Highlights of Vue3.0

  • Performance: 1.2 to 2 times faster than Vue2
  • Tree Shaking Support: Compiled on demand. Smaller than Vue2
  • Composition API (like React Hooks)
  • Better TyprScript support: Better Ts support
  • Custom Renderer API: Exposes Custom rendering apis
  • Fragment, Teleport (Protal), Supense: More advanced components
How does Vue3.0 get faster

  • Diff method optimization

    	// Compare Vue2 and Vue3 renderings with the following code
    <div>
        <span>Name:</span> 
        <a>{{data.name}}</a>
    </div>
Copy the code

    1. The virtual DOM in Vue2 is fully compared

    ! [insert picture description here] (HTTP: / / https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/9149af87cb1a40a8a0de7220885272c0~tplv-k3u1fbpfcp-zoom-1.im age)Copy the code

2. Static editing (PathFlag) is added in Vue3. When comparing with the last node, only the nodes with PathFlag are compared, and the specific content to be compared can be learned from the information of the flagCommon parameters for pathFlags

  • hoistStatic Static promotion

    1.Vue2 will be recreated every time regardless of whether the element is updated or not

    2.Vue3 will do static promotion for elements that do not participate in the update and will only be created once for direct reuse during rendering

  • The cache that the cacheHandlers event listens to

    By default, onClick is treated as a dynamic binding and is tracked every time it changes

    Because it’s the same function we don’t have to track the changes and we can just cache them and reuse them and we can see that there’s no static identifier in the code below to show that we don’t need to compare

  • SSR rendering

    When there is a lot of static content, it is pushed into a buffer as a string, and dynamic bindings are inserted through template interpolation, which is much faster than dom rendering

    When static content is of a certain magnitude, the _createStaticVNode method is used on the client to generate a static node. These static nodes are innerHtml directly, so there is no need to create an object and render it according to the object.

Vue3’s composite API

In Vue2, if we want to implement a function, first we need to define the data required by the function in data, and then we need to write the logic to implement the function in methods, computed or watch. For each function, we need to repeat the above data and separate it from the business logic. This is not conducive to our writing and maintenance, which is addressed in Vue3 below

  • The setup function is the entry file to the composition API
  1. Entry functions define variablesThe first thing we do is we declare variables in the setup function and in order for that variable to be listened to we need to introduce the ref to use and we need to render it on the page and we need to expose the variables in the template for that to take effect
  2. Write event functions in the entry fileAfter registering the events in the template, you can write the methods directly in the composite API
  3. Use of Reactive in a composite API

We learned earlier that ref is used to listen for changes in the composite API, but ref can only listen for changes in simple data types. Resctive is used to listen for changes in complex types

  1. The withdrawal of the composite APIWe can see that the above method puts all the user’s operations into the useRemoveStudent method and exposes it in the method. We introduce it directly in the composition API and then expose it for use, thus solving the pain of separating business logic and data in Vue2. We said that we can put data and logic into methods or we can put it into modules like this for import

  • The nature of the Composition API We can translate the Composition API into the blend/injection API, In fact, the content exposed by the return of our Composition API is injected into the optionApi into our data and methods. In actual development, Composition API and Option API can be used together

  • BeforeCreate: The component is created and data and methods are not initialized

  • The setup function is executed in the order between beforeCreate and created, so data and methods cannot be used in the setup function because we cannot use data and methods in the setup function, So in Vue, in order to avoid incorrect use, Vue3 directly changed the setup function “this” to “undefined” and the setup function can only be synchronous, not asynchronous

  • Reactive is the method provided in Vue3 to implement reactive data. In Vue2, the effect is that data is implemented via defineProperty. Reactive data in Vue3 is implemented by Proxy in ES6, essentially wrapping incoming data into a Proxy object

  • Reactive the reactive parameter must be an object (JSON/ARR)- By default, the interface will not be updated if the object is changed by passing it to Reactive

Two-way data binding for Vue

  • Vue2 uses object.defineProperty to convert Object properties to getters/setters. This property is a feature that cannot be shim in ES5 and is the reason why Vue does not support IE8 or later

In Vue, Object.defineProperty cannot monitor subscript changes of data, resulting in no real-time response when assigning new values to arrays directly via array subscripts. The vue only for an array of variation method to push/pop/shift/unshift/splice/sort/reverse did hack processing, response is limited

  • Vue3 uses a Proxy

-Proxy is a new feature in ES6, which translates to “Proxy”. It is used to “Proxy” certain operations. Proxy allows us to control external access to objects in a concise and easy-to-understand way. Its function is very similar to that of the proxy pattern in design mode. -Proxy creates a layer of interception before the target object. All external access to the object must pass this layer of interception. Therefore, Proxy provides a mechanism for filtering and rewriting external access. – The core advantage of using Proxy is that it can handle some non-core logic (e.g., logging before reading or setting certain properties of an object; Validation is required before setting some property values of an object. Access control for certain attributes, etc.). In this way, the object can only focus on the core logic, to achieve the separation of concerns, reduce the object complexity and other purposes.

Vue3 support for TS

Vue2 was originally written in pure ES(Javascript) without introducing a type checking system. Type checking is a great way to reduce the chance of introducing errors into the refactoring process. The subsequent adoption of Facebook’s Flow Type Checker does not significantly improve TypeScript’s deep integration with Visual Studio Code’s integrated development tools. The Flow Type Checker’s support for integrated development environments is also less than ideal. Switching to TypeScript will allow us to automatically generate declaration files, reducing the maintenance burden