Similarities and differences between Vue2 and VUe3

This is a summary and summary of some of the documentation and personal understanding of TS+ VUe3 that distinguishes the obvious differences between VUe2 and VUe3.

Focus on

1.Object.defineproperty => Proxy

2.Option API => Composition API

3.Vite(New scaffold tool)

4.TypeScript(better TS support)

specific

1. Hooks

  • The life cycle
Import {ref, reactive, onMounted onUpdated} from 'vue' new setup () / / / / 1. Can be used instead of beforCreated; //2. Without this, add two new parameters,props and context. The props cannot be structed (unresponsive), and context can be. 1. Properties of the returned object are merged with properties of the object returned by the data function into properties of the component object. 2. Methods in the returned object will merge with methods in methods. // -setup (props, context)/setup(props, {attrs, slots, emit}) // -props: // -attrs: an object that contains attributes not declared in the props configuration, equivalent to this.$attrs // -slots: $slots // -emit this.$slots // -emit: This.$emit // modifysonMounted () onUpdated() onUnmounted() // Can now be called multiple times and in code order.Copy the code
  • Calculate attribute
import { computed } from 'vue' <! -- Only getter --> const data = computed(() => {return data1 + data2; }) <! Getters and setters --> const data = computed({getter(){}, setter(val){},})Copy the code
  • Watch to monitor
Import {watch,watchEffect} from 'vue' import {watch,watchEffect} from 'vue' () => { fullName3.value = user.firstName + '-' + user.lastName; },// Do not need to write handler {immediate: true, // whether the initialization is performed immediately, the default is false deep: True, // Whether deep monitoring, //watchEffect (() => {console.log(nameobj.name); //watchEffect () => {console.log(nameobj.name); //watchEffect () => {console.log(nameobj.name); //watchEffect () => {console.log(nameobj.name); })Copy the code
  • Custom hooks

Similar to mixins in VUe2, js/ TS files are encapsulated in advance and imported for use

Reactive data

// Const data = ref<string>(" ABC "); Value :{{data}} const data = reactive({name: string:" ", age? // Call toRefs() const stateAsRefs = toRefs(data)... return{ ... StateAsRefs,// You can use the attributes in data directly on the template}Copy the code

Principle of responsive data

  • Vue2 two-way data binding:

Implemented through the data hijacking plus publisher (subscriber) pattern, “overrides getter and setter methods for Object.defineProperty to be compatible with common array methods.

  1. Implement a listener Observer that hijacks and listens for all properties in data and uses Object.defineProperty to turn all properties into getters and setters, notifying subscribers if any changes are made.

  2. Dep is a subscriber that manages the listener Observer and subscriber Watcher uniformly, notifies the Watcher with dep.notify ().

  3. Implement a subscriber Watcher that receives notification of property changes and updates the view.

  4. Implement an instruction parser Compile, scan and parse each node and attribute, and initialize the corresponding subscriber according to initialization template data

  • Vue3 Responsive data principle:

Implementation via Porxy proxy pattern

1. Proxy intercepts any operations on any data attributes and methods, including reading and writing of attribute values, adding and deleting attributes, etc. 2. Reflect dynamically performs specific operations on corresponding attributes of the object to be ProxyCopy the code

The difference is that observer mode manually adds getters and setters by iterating through the data in the data, so there is no response if the data added by certain methods does not trigger the observer, while proxy mode directly listens to the object, which will be triggered whenever the object changes.

3. Component value transfer

  • Props adds the emit event

Similar to vue2 except that vue3 lacks this and uses this.emit() to change to setup(props,{emit}){}

  • Provide (export) and inject(import)

The parent transmits values without passing through parent components, similar to provide and inject of VUe2

  • vuex

We recommend TS syntax, define the type of global state, reuse interface,type and generics, and pass in action and mutation for annotation. The code is more standardized and the logic is more rigorous

4. The new components

1. Fragment

Vue3 templates do not need the root element. Vue2 templates need the root element wrapped

Benefits: Reduced label hierarchy and memory footprint

Ii. Teleport

Teleport lets our child component DOM not be nested in the parent component’s DOM, but still have access to the parent’s values and methods

Benefits: The dom of the child component is at the same level as the DOM of the parent component, and the parent component’s properties and methods can be used

Girl three

They allow our application to render some back-up content while waiting for asynchronous components, allowing us to create a smooth user experience

Benefit: A transitional display to display when asynchronous components are not loaded