It has been a long time since I attended the first VueConf conference, yubo’s presentation was as interesting as ever ❤️, it was his efforts that kept the enthusiastic community atmosphere of the conference alive! Another Easter egg is Evan You brought his family and children to the scene, it was really fun!

Rain Creek @State of Vue

Current situation of the development of

Chrome DevTools has about 900,000 weekly active users, compared with 1.6 million for React. Evan recommends using Chrome DevTools to predict real developer data for Vue’s projects. Vue has a global reach, with events in many countries and can be found at events.vuejs.org. State of JavaScript 2018 states that it is the most satisfied front-end framework (91%) and the second most popular front-end framework in Stack Overflow data.

team

Vue now has about 20 active developers, most of the day-to-day work is related to Vue, and is run entirely independently, while costs come mostly from sponsors and have steadily increased over the past three years. Jiang Haoqun (@sodatea) is a full-time maintenance CLI and related tool chain.

3.0 progress

There was a set goal of vue.js 3.0 in late 2018, but most of the features were already available at the beginning of this year. But at the same time, I am also studying the latest solution in the industry. Vue uses the function of Proxy in 3.0, but IE 11 still cannot support it, but it has a certain market share.

faster

  1. Object.defineProperty -> Proxy: Proxy does not need to make many changes to the original object, which is more efficient
  2. Virtual DOM reconstruction: The startup speed of components is twice as fast as 2.5, and the generated VNode parameters are consistent. But it can be done better. The purpose of the Virtual DOM is not just speed, its core value is to express DOM state in JavaScript, so it has a cost of its own. That is, the VDOM tree needs to be rebuilt each time it is updated, so traditional VDOM has performance bottlenecks. The reason behind this is that VDOM was originally written by JSX as expressive logic (flexibility), not as a template language, so you can’t infer anything from the template content.
  • How to maximize the combination of static and static? It is compatible with the flexibility of the Render Function and the information expressed by the template

  • Separate the internal and external nodes of a logic, and treat each dynamic node as a fragment. This makes the dynamic node only appear under structural instructions such as V-if and V-for. Nodes are divided into Block trees (stem 😊) to reduce unnecessary traversal.

  • This makes vDOM update performance relative to template size => relative to the amount of dynamic content (i.e., make changes where they need to be made, with minimal manipulation)

  • Speed optimization: 2.6.10 (36ms), 3.0 (5.44ms) approximately 6 times faster

  1. More compile-time optimizations

TypeScript

  • ❌ Class API:
    • The original intent was to support TypeScript:thisThe Decorator proposal is unstable because the attribute type under is pushed so far that it cannot be implemented effectively
    • Class apis offer no new advantages other than the use of native apis, and OOP inheritance and other values are rarely used at the UI level
  • The Function – ✅ -based API:
    • Better TypeScript type derivation support (no manual type declarations required, one set of code supported at the same time), more flexible logic reuse (no naming conflicts, clearer sources of data such as props, no additional creation costs), tree-shaking friendly, code can be compressed
  • Latest RFC: github.com/vuejs/rfcs

Q&A

1. What are the shortcomings of Vue.js 3.0?

IE 11 will still support it, but it will take extra time to fix it. In addition, the disadvantages of 3.0 are being addressed

2. Are there any damaging changes in 3.0? Upgrade efficiency?

That’s the value of the RFC, all the big changes, the meaning behind them, how to deal with them. Basic changes are updated with automated tools. There will also be a compatible version, reducing the cost of updating.

3. React rendering slices, Vue will still have associated costs?

Slicing is not a panacea, only under extreme conditions can complete the guarantee of performance. Internal complexity is high, performance effects are not met after implementation, and slicing can cause destructive changes to code such as nextTick (because there may be multiple Nextticks).

4. Future development direction of Vue?

Low threshold, high value. It is maintained and updated as long as it is used

5. Many enterprise users are using React. Since there is better compatibility with Native, will Vue have better compatibility with Native in the future?

A set of code, multi – terminal implementation. React Native is available, but various manufacturers have corresponding countermeasures. Google has Flutter and Apple has SwiftUI. It is impossible for one company to use one development paradigm. As it happens, Vue is an independent open source, with no corporate competition.

There happens to be a mini program in China. I recommend uni-app made by DCloud.