Different Between Vue3 and Vue2

Vue3 has made great changes in code compared with vue2, which makes us have a better experience in coding. Therefore, let's start to abandon vue2 and embrace vue3

What are the changes to Vue3

• Three new components have been added
  • Fragment supports multiple root nodes.
  • Suspense allows you to show specified content at wait times before components render.
  • Teleport allows child components to visually jump out of parent components (e.g., parent overflow: Hidden).
• The new instruction v-memo can be used to cache HTML templates, such as v-for lists that do not change
• support for tree-shaking, removing useless code, unused modules when packaging, making code packaging smaller.
• The new Composition API allows for better logic reuse and code organization. The code of the same function is not as scattered as before. Although minxin can be used to reuse the code in Vue2, there are problems, such as method or attribute names conflict, code source is not clear, etc.
• Using Proxy to replace Object. DefineProperty reconstructs the responsive system, which can listen for array subscript changes and new Object attributes, because it is not the Object attributes that are monitored, but the Object itself. It can also intercept 13 methods such as Apply and HAS.
• Refactoring the virtual DOM to cache events at compile time, compile slots into lazy functions, save static nodes for direct reuse (static promotion), and add static tags. The Diff algorithm optimizes the comparison process with the longest increasing subsequence, making the virtual DOM generation '200% faster.
• support v-bind in <style></style> to bind JS variables to CSS ( color: v-bind(str) ).
• setup replaces beforeCreate and created life cycles.
• Added two hook functions for the development environment. onRenderTracked if a component is updated tracks all changes to variables and methods in the component. onRenderTriggered returns the old and new values that changed each time a rendering is triggered, allowing for targeted debugging.
• After all, Vue3 is written in TS, so it has better support for TS.
• Vue3 is incompatible with IE11.

Composition API vs Options API

Composition API (also known as Composition API) is designed to solve the problems of the Options API in Vue2.

Vue2 can only organize code with data, computed, methods, and other fixed options, and as components become more complex, function-related attributes and methods are scattered all over the file, becoming more difficult to maintain.

Although minxin can be used for logical extraction reuse in Vue2, the properties and method names in Minxin will conflict with the names inside the component, and when multiple Minxin are introduced, we cannot know the source of the properties or methods used.

The Composition API addresses both of these problems by allowing you to organize your code freely, put everything related to the same function together, make your code more readable and maintainable, and extract it individually without causing naming conflicts, so it's more extensible.

setup

setup(props, context) {
  return {
    name: 'jstyro'
  }
}

<script setup> ... </script>

The setup() function executes before the beforeCreate() function.

The setup function takes two arguments, props and context. The setup function does not use this. Instead, it uses a context object instead of the current context-binding object. The context object has four attributes: attrs, slots, emit, expose.

In the setup function, ref and reactive are used instead of data syntax, and return can be used directly in the template, including variables and methods.

With the setup syntax, instead of writing export default {}, the subcomponents just need import and do not need to register their properties and methods in components as before.

And you can use await without async inside, as this will change the component's setup to async setup by default.

watch vs watchEffect

watch is used to listen for changes to one or more values passed in.  When fired, returns new and old values;  That is, it will not be executed the first time and will be re-executed only if it changes

import { ref, reactive, watch } from 'vue'

const name = ref('jstyro')

watch(name, (newValue, oldValue) => { ... }, { immediate: true, deep: true })

const boy = reactive({ age:18 })

// watch boy.age
watch(() => boy.age, ( newValue, oldValue ) => { ... })

// watch multiple key
watch([name, ()=> boy.age], (newValue, oldValue) => { ... } )

watchEffect is passed in an immediate execution function, so by default it is executed the first time;  There is no need to pass in the listening content. The data source in the function is automatically collected as a dependency, and the function is re-executed when the dependency changes. If there is no dependency, it is not executed.  The new and old values before and after the change are not returned

const count = ref(0);

watchEffect(() => console.log(count.value));
// -> logs 0

setTimeout(() => {
  count.value++;
  // -> logs 1
}, 100);

The common denominator is that watch and watchEffect share four behaviors.

watch shares behavior with watchEffect in terms of manual stoppage, side effect invalidation (with onInvalidate passed to the callback as the 3rd argument instead), flush timing and debugging.

defineProperty vs Proxy

• defineProperty can't listen for array subscript changes and new object properties, Proxy can
• defineProperty is to hijack object properties, Proxy is to proxy the entire object
• defineProperty has a lot of limitations and can only monitor a single property, so it must be monitored recursively at the beginning. The nested properties of the Proxy object are recursive at runtime, only the proxy is used, and there is no need to maintain a lot of dependencies, the performance is greatly improved, and the first rendering is faster
• defineProperty will pollute the original object. When modifying it, it will modify the original object. Proxy will proxy the original object and return a new proxy object, which is the proxy object.
• defineProperty is not compatible with IE8, Proxy is not compatible with IE11

This article is original, without authorization, any media or personal we media and any statement reproduced

Commercial infringement will be investigated, if you need authorization please contact[email protected]

The original link:https://www.jstyro.com/blog/different-between-vue2-and-vue3

Buy me a coffee