Shulou(Shulou.com)06/01 Report--

This article mainly introduces how to use VUE3, has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let the editor take you to understand it.

Introduction to Vue3

On September 18, 2020, Vue.js released version 3.0, code name: One Piece (King of the Thief)

Took more than 2 years, 2600 + submissions, 30 + RFC, 600 + PR, 99 contributors

Tags address on github (https://github.com/vuejs/vue-next/releases/tag/v3.0.0)

What did Vue3 bring?

Performance improvement

41% reduction in package size

55% faster for initial rendering and 133% faster for updated rendering.

54% reduction in memory

Upgrade of source code

Using Proxy instead of defineProperty to implement responsiveness

Rewrite the implementation of virtual DOM and Tree-Shaking

Hug TypeScript

Vue3 can better support TypeScript.

New features

Composition API (combined API)

Setup configuration

Ref and reactive

Watch and watchEffect

Provide and inject

New built-in components

Fragment

Teleport

Suspense

Other changes

New Lifecycle Hook

The data option should always be declared as a function

Remove keyCode support as a modifier for v-on

First, create a Vue3.0 project

1. Create using vue-cli

Official document: https://cli.vuejs.org/zh/guide/creating-a-project.html

# # check @ vue/cli version and make sure @ vue/cli version is above 4.5.0 vue-- version## installs or upgrades your @ vue/clinpm install-g @ vue/cli## to create vue create vue_test## and start cd vue_testnpm run serve

two。 Create using vite

Vite official Chinese document: https://cn.vitejs.dev

What is vite? A new generation of front-end building tools

The advantages are as follows:

In the development environment, there is no need for packaging operation, and can be started quickly and coldly.

Light weight and fast thermal overload (HMR)

Real on-demand compilation, no longer waiting for the entire application to be compiled

Comparison of traditional build and vite build:

# # create a project npm init vite-app # # enter the project directory cd # # installation depends on npm install## to run npm run dev II. Common Composition API official document: https://v3.cn.vuejs.org/guide/composition-api-introduction.html

1. The setup with the prologue

Understanding: a new configuration item in Vue3.0, whose value is a function.

Setup is the "stage of performance" for all Composition API (group API).

Everything used in the component: data, methods, etc., should be configured in setup.

Two return values of the setup function:

If an object is returned, the properties and methods in the object can be used directly in the template. (focus on! )

If you return a rendering function, you can customize the rendering content. (all you need to know)

Note:

Vue2.x configuration (data, methods, computed … You can access the properties and methods in setup

However, the configuration of Vue2.x (data, methods, computed … ).

If there is a duplicate name, an error will be reported.

Try not to mix with Vue2.x configuration.

Setup cannot be an async function because the return value is no longer the object of return, but Promise, and the template cannot see the properties in the return object. (you can also return a Promise instance later, but you need the cooperation of Suspense and asynchronous components.)

2.ref function

Function: define a responsive data

Introduce: import {ref} from "vue"

Syntax: const xxx = ref (initValue)

Create a reference object (reference object, ref object) that contains responsive data

Operation data in JS: xxx.value

Read data from the template without .value, directly

{{xxx}}

Note:

The data received can be either a basic type or an object type

Basic types of data: responsiveness is still done by get and set of Object.defineProperty ()

Object type data: internally "resort" to a new function in Vue3.0-- reactive function

3.reactive function

What it does: define responsive data for an object type (don't use it for basic types, use the ref function)

Introduction: import {reactive} from 'vue'

Syntax: const proxy object = reactive (source object) receives an object (or array) and returns a proxy object (instance object of Proxy, proxy object for short)

The responsive data defined by reactive is "deep"

Internal Proxy implementation based on ES6, which manipulates the internal data of the source object through the proxy object

The principle of response in 4.Vue3.0

The responsive form of Vue2.x

The principle of implementation:

Object type: intercepts the reading and modification of attributes through Object.defineProperty () (data hijacking)

Array type: interception is achieved by rewriting a series of methods to update the array (wrapping the change method of the array)

Object.defineProperty (data, 'count', {get () {}, set () {}})

There is a problem:

Add and delete attributes, and the interface will not be updated

Modify the array directly through the subscript, and the interface will not be updated automatically

The responsive form of Vue3.0

The principle of implementation:

Through Proxy (proxy): intercepts the change of any attribute in the object, including: reading and writing of attribute value, addition of attribute, deletion of attribute, etc.

Through Reflect (reflection): manipulate the properties of the source object

Proxy and Reflect described in MDN documentation

New Proxy (data, {/ / intercept read attribute values get (target, prop) {return Reflect.get (target, prop)}, / / intercept to set attribute values or add new attributes set (target, prop, value) {return Reflect.set (target, prop, value)}, / / intercept and delete attributes deleteProperty (target, prop) {return Reflect.deleteProperty (target) Prop)}}) proxy.name = 'tom'

5.reactive vs. ref

Compare from the perspective of defining data:

Ref is used to define: basic type data

Reactive is used to define object (or array) type data

Note: ref can also be used to define object (or array) type data, which is automatically converted to a proxy object through reactive.

From the point of view of principle:

Ref implements responsive (data hijacking) through get and set of Object.defineProperty ().

Reactive implements responsive (data hijacking) by using Proxy and manipulates data within the source object through Reflect

Compare from the point of view of use:

Data defined by ref: .value is required to operate the data, and .value is not needed to read the data directly in the template when reading the data.

Data defined by reactive: .value is not required to manipulate and read data.

Two points for attention of 6.setup

Timing of setup execution

Execute once before beforeCreate, this is undefined

Parameters of setup

Attrs (leak detection props): the value is an object, including: properties passed from outside the component but not declared in the props configuration, equivalent to this.$attrs in Vue2

Slots: received slot content, equivalent to this.$slots in Vue2

Emit: a function that distributes custom events, equivalent to this.$emit in Vue2

Props: the value is an object and contains properties that are passed from outside the component and are declared to have been received within the component

Context: context object

7. Computing properties and monitoring

Computed function

Consistent with computed configuration in Vue2.x

Written as follows:

Import {computed} from 'vue'setup () {. / / Compute attribute-abbreviated let fullName = computed (() = > {return person.firstName +' -'+ person.lastName}) / / Compute attribute-complete let fullName = computed ({get () {return person.firstName +'-'+ person.lastName}) Set (value) {const nameArr = value.split ('-') person.firstName = nameArr [0] person.lastName = nameArr [1]})}

Watch function

Consistent with watch configuration in Vue2.x

Two small "pits":

When monitoring responsive data defined by reactive: oldValue cannot get it correctly and turns on depth monitoring forcefully (deep configuration fails)

When monitoring an attribute in responsive data defined by reactive: the deep configuration is valid

/ / case 1: monitor ref defined responsive data watch (sum, (newValue, oldValue) = > {console.log ('sum changed', newValue, oldValue)}, {immediate: true}) / / case 2: monitor multiple ref defined responsive data watch ([sum, msg], (newValue, oldValue) = > {console.log ('sum or msg changed', newValue) OldValue)}) / * case 3: monitor reactive-defined responsive data if watch monitors reactive-defined responsive data OldValue cannot be obtained correctly if watch monitors responsive data defined by reactive Then forced to enable in-depth monitoring * / watch (person, (newValue, oldValue) = > {console.log ('person changed', newValue, oldValue)}, {immediate: true, deep: false}) / / deep configuration here no longer works / / case 4: monitor an attribute watch (() = > person.job, (newValue, oldValue) = > console.log ('job of person has changed', newValue) in the responsive data defined by reactive OldValue)}, {immediate: true, deep: true}) / / case 5: monitor some attributes watch ([() = > person.job, () = > person.name], (newValue, oldValue) = > {console.log ('person job has changed', newValue, oldValue)}, {immediate: true, deep: true}) / / Special case watch (() = > person.job, (newValue)) OldValue) = > {console.log ('job of person has changed', newValue, oldValue)}, {deep: true}) / / here because it is monitoring an attribute in the object defined by reactive So the deep configuration is valid

WatchEffect function

The trick of watch is to specify both the properties of the monitor and the callback of the monitor.

The trick of watchEffect is that you don't have to specify which property to monitor, and which property is used in the monitored callback, then monitor which property.

WatchEffect is a bit like computed:

But computed pays attention to the calculated value (the return value of the callback function), so you have to write the return value.

WatchEffect pays more attention to the procedure (the function body of the callback function), so you don't have to write the return value.

/ / whenever the data used in the callback specified by watchEffect changes, directly re-execute the callback watchEffect (() = > {const x1 = sum.value const x2 = person.age console.log ('callback configured by watchEffect')})

8. Life cycle

Life cycle of Vue2.x:

Life cycle of Vue3.0:

Lifecycle hooks in Vue2.x can continue to be used in Vue3.0, but two have been renamed:

BeforeDestroy changed its name to beforeUnmount

Destroyed changed its name to unmounted

Vue3.0 also provides lifecycle hooks in the form of Composition API, which corresponds to hooks in Vue2.x as follows:

BeforeCreate=== > setup ()

Created=== > setup ()

BeforeMount=== > onBeforeMount

Mounted=== > onMounted

BeforeUpdate=== > onBeforeUpdate

Updated=== > onUpdated

BeforeUnmount=== > onBeforeUnmount

Unmounted=== > onUnmounted

9. Custom hook function

What is hook? -- essentially a function that encapsulates the Composition API used in the setup function

Similar to mixin in Vue2.x

Advantages of custom hook: reuse code to make the logic in setup clearer and easier to understand

10.toRef

What it does: create a ref object whose value value points to an attribute in another object

Syntax: const name = toRef (person, 'name')

Application: when you want to provide an attribute in a responsive object separately for external use without losing the responsiveness

Extension: toRefs has the same function as toRef, but multiple ref objects can be created in batches. Syntax: toRefs (person)

III. Other Composition API

1.shallowReactive and shallowRef

ShallowReactive: responsive (shallow responsive) that deals only with the outermost attributes of an object

ShallowRef: only deal with the responsive type of basic data types, not the responsive processing of objects

When will you use it?

If there is an object data, the structure is relatively deep, but the change is only the outer layer attribute change = = > shallowReactive

If there is an object data, subsequent functions will not modify the properties in the object, but create a new object to replace = = > shallowRef

2.readonly and shallowReadonly

Readonly: make a responsive data read-only (deep read-only)

ShallowReadonly: make a responsive data read-only (shallow read-only)

Application scenario: when you do not want the data to be modified

3.toRaw and markRaw

ToRaw:

Function: to convert a responsive object generated by reactive into a normal object

Usage scene: used to read the normal object corresponding to the responsive object. All operations on this ordinary object will not cause page updates.

MarkRaw:

Some values should not be set to responsive, such as complex third-party class libraries.

Skipping responsive conversion can improve performance when rendering large lists with immutable data sources

Function: Mark an object so that it will never be a responsive object again

Application scenarios:

4.customRef

Purpose: create a custom ref and explicitly control its dependency tracking and update trigger

Achieve anti-shaking effect:

{{keyword}} import {ref, customRef} from 'vue'export default {name:' Demo', setup () {/ / let keyword = ref ('hello') / / use the built-in ref / / custom myRef function myRef (value, delay) {let timer / / to implement custom return customRef ((track) through customRef Trigger) = > {return {get () {track () / / tell Vue that the value is the return value that needs to be "tracked"} Set (newValue) {clearTimeout (timer) timer = setTimeout (() = > {value = newValue trigger () / / tell Vue to update the interface} Delay)})} let keyword = myRef ('hello', 500) / / use programmer-defined ref return {keyword}}

5.provide and inject

Function: to achieve communication between ancestral components and descendant components

Tricks: ancestor components have a provide option to provide data, and descendant components have an inject option to start using this data

How to write it:

In the ancestor component:

Setup () {. Let car = reactive ({name: 'Benz', price: '400000'}) provide ('car', car).}

In the descendant component:

Setup (props, context) {. Const car = inject ('car') return {car}.}

6. Judgment of responsive data

IsRef: check whether a value is a ref object

IsReactive: check whether an object is a responsive agent created by reactive

IsReadonly: check whether an object is a read-only proxy created by readonly

IsProxy: check whether an object is a proxy created by the reactive or readonly method

IV. Advantages of Composition API

Problems in 1.Options API

Using traditional OptionsAPI, adding or modifying a requirement needs to be modified separately in the data,methods,computed.

Advantages of 2.Composition API

We can organize our code and functions more elegantly, so that the code of related functions can be organized more orderly.

5. New components

1.Fragment

In Vue2, a component must have a root tag

In Vue3, a component can have no root tag, and multiple tags are included internally in a Fragment virtual element

Benefits: reduce label levels and reduce memory footprint

2.Teleport

What is Teleport? Teleport is a technology that can move our component html structure to a specified location

I am a pop-up window to close the pop-up window

3.Suspense

Render some extra content while waiting for asynchronous components to make the application have a better user experience

Steps to use:

Bring in components asynchronously:

Import {defineAsyncComponent} from 'vue'const Child = defineAsyncComponent (() = > import ('. / components/Child.vue'))

Use the Suspense package component and configure default and fallback:

I am App component loading. VI. Other

1. Transfer of global API

Vue2.x has many global API and configurations

For example: register global components, register global directives, etc.

/ / register global component Vue.component ('MyButton', {data: () = > ({count: 0}), template:' Clicked {{count}} times.'}) / / register global directive Vue.directive ('focus', {inserted: el = > el.focus ()})

Adjustments have been made to these API in Vue3.0

Adjust the global API, i.e. Vue.xxx, to the application instance (app)

2.x Global API (Vue) 3.x instance API (app) Vue.config.xxxapp.config.xxxVue.config.productionTip remove Vue.componentapp.componentVue.directiveapp.directiveVue.mixinapp.mixinVue.useapp.useVue.prototypeapp.config.globalProperties

two。 Other changes

The data option should always be declared as a function

Change of transition animation class name:

Vue2.x is written:

.vMuthenterji.vMuttingeMusto {opacity: 0;}. VMuthingeMeime.vMuthenterripto {opacity: 1;}

Vue3.x is written:

.v-enter-from,.v-leave-to {opacity: 0;} .v-leave-from,.v-enter-to {opacity: 1;}

Remove keyCode as a modifier for v-on and no longer support Vue.config.keyCodes.xxx (key aliases)

Remove the v-on.native modifier

Bind events in the parent component:

Declare custom events in the subcomponent:

Export default {emits: ['close'] / / the events declared here are counted as custom events, so click is the native event in the parent component}

Remove filter filter

Although the filter looks convenient, it needs a custom syntax to break the assumption that the expression in large brackets is "just JavaScript", which not only has the cost of learning, but also has the cost of implementation. It is recommended to use method calls or calculation attributes to replace the filter.

Thank you for reading this article carefully. I hope the article "how to use VUE3" shared by the editor will be helpful to everyone. At the same time, I also hope that you will support and pay attention to the industry information channel. More related knowledge is waiting for you to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.