Historical problems with VUe2

Why Vue3? There were joking complaints

Don’t level up any more. I can’t do this anymore

The framework must be upgraded for a reason, to solve a problem or to introduce new features, or it will not be upgraded across large versions that are incompatible. Why does VUE have VUE3? Let’s take a look at the VUe2 framework and some legacy issues. Vue2 is made up of components, reactive, virtual DOM, runtime, and browser-coupled modules. However, due to historical reasons, it has the following shortcomings:

  1. Vue2 is based on flow. js for type verification, but now flow. js has stopped maintenance.
  2. Vue2’s runtime coupling of browser operations will require changes to the vue core code if applets need to be adapted.
  3. Vue2’s responsiveness is also not a proxy in the true sense, but uses Object.defineProperty() for compatibility with IE, which has a big performance problem.
  4. Components with a large number of codes, such as data and methods, are isolated from data and methods. When there are a large number of lines, you need to check back and forth, which is not conducive to maintenance.

New features for VUE3

As a responsive system, vuE3 is no longer compatible with IE11.
Custom renderer, independent of browser-specific rendering, which only needs to add a module to render small programs, increased support for small programs.
TypeScript refactoring enhances type safety.
Composition API Composition syntax is easy to maintain in cases where data definition and method separation lead to distraction and complex logic with many lines of code.
Vue2 writing
let App = {
  data() {
    return {
      count: 1}},methods: {
    add() {
      this.count++
    }
  },
  computed: {
    double() {
      return this.count * 2
    }
  }
}
Vue.createApp(App).mount('#app')
Copy the code
Vue3 writing
const { reactive, computed } = Vue
let App = {
  setup() {
    const state = reactive({
      count: 1
    })
    function add() {
      state.count++
    }
    const double = computed(() = > state.count * 2)
    return { state, add, double }
  }
}
Vue.createApp(App).mount('#app')
Copy the code
Vue 3 also comes with fragments, Teleport, and Suspense components
  • Fragment: Vue 3 components no longer require a unique root node, removing many useless placeholder divs.
  • Teleport: Allows components to be rendered inside other elements, especially useful when developing popover components.
  • Suspense: Asynchronous components to make it easier to develop components with asynchronous requests.
A new generation of engineering tools Vite

Webpack uses precompilation, often due to a lot of project files, leading to the packaging time to the level of minutes, seriously affecting the development experience, while Vite uses on-demand loading, can greatly shorten the startup time, almost second during development, on-demand loading.

Vue2 Do you want to upgrade vue3

conclusion

  • The engineering tool Vite provides a silky debugging experience.

  • For the final product, Vue 3 has higher performance and smaller size.

  • For the average developer, the Composition API Composition syntax provides a better form of organizing code.

  • The new responsive system is proxy-based and can also be used independently.

  • Vue 3 comes with new fragments, Teleport and Suspense components.

  • For the secondary development of Vue, custom renderers make it much easier to develop cross-end applications.

  • For Vue source maintainers, full modules are refactored in TypeScript for better maintainability.