First, let’s take a look at some of the problems encountered in the use of VUe2.0

  1. Vue2.0 support for typeScript is limited.
  2. Mixins in VUe2.0 (extracted by function module)
    • Functions: It can encapsulate reusable code, which can be introduced into the page that needs to be used to merge the internal components such as data and method with the corresponding content in the parent component, which is equivalent to expanding the parent component.
    • Disadvantages: poor maintenance, name conflicts, unclear role of exposed variables.

What are the important improvements vue3.0 has made

  • Package size reduced by 41%
  • Initial rendering is 55% faster and updates 133% faster
  • Memory usage reduced by 54%
  1. Full typescript support
  2. Improved performance (rewritten diff algorithm, tree-shaking optimization)
    • Rewrite virtual DOM (add static flag, only compare PF nodes, skip static (constant) nodes, only deal with dynamic (template) nodes, thus greatly improve performance)
    • Tree -shaking network loading Performance using ES6 modular syntax
  3. Composition API (encapsulate all states, methods, and functions of a function into a single function for unified management)

Some differences between VUe2.0 and VUe3.0

  1. Object. Defineproperty (proxy can detect object and array changes between proxies)
    • Vue2 does data hijacking via Object.defineProperty, but for performance reasons, not every item in the array is hijacked. But using AOP section of thought to an array of seven methods (push, shift, pop, splice, unshift, sort, reverse) rewrite, so change the array index and length is monitoring.
    • Vue3 is a proxy implementation in ES6 that uses a layer of interception to proxy the entire object before accessing it (it can be any type of object, including a native array, a function, or another proxy)
  2. The v-IF v-for priority was adjusted. After the adjustment, the V-IF priority was higher than the V-FOR priority.
  3. The V-model syntax is deprecated in favor of modelValue
  4. Vue3.0 allows template to set a key value
  5. Discard global API New Vue in favor of createApp
  6. Discard Vue. Prototype, use
const app = Vue.createApp({})
app.config.globalProperties.$http = () = > {}
Copy the code
  1. Remove the event API, $on, $OFF, $once, $eventBus

Vue3.0 part of the API

  1. The setup function is an entry function to the compoditionAPI that exposes variables and methods defined in setup via a return.

    • Ref can declare variables of simple types and convert them into response expressions.

    • Reactive declares variables of complex types and transforms them into reactive forms.

    • ToRefs can make values of complex types that return directly from the SETUP function reactive.

2. The lifecycle function can handle the lifecycle function in the setup function. Since beforeCreate, Created, and setup execute at almost the same time, the processing can be written in the setup function.

  beforeCreate -> use setup()
  created -> use setup()
  beforeMount -> onBeforeMount
  mounted -> onMounted
  beforeUpdate -> onBeforeUpdate
  updated -> onUpdated
  beforeDestory -> onBeforeUnmount
  destroyed -> onUnmounted
  activated -> onActivated
  deactivated -> onDeactivated
  errorCaptured -> onErrorCaptured
  
  // Debugger function for debugging (record which values change when render is performed)
  onRenderTracked
  onRenderTriggered
Copy the code

3. Listener Watch

Mediate accepts three parameters: newValue (oldValue) => {} Parameter 3: Deep mediate or mediate configuration (deep: true, iMediate: true)



4. Compute attributes computed

When a value needs to be computed, a computed attribute can be used. As in VUe2, the callback function must have a return, which does not support asynchro. You can use set and GET methods, which can be read or modified directly. In general, the calculated properties do not change much.








All right, that’s it for today, Bey