What would a perfect Vue practice project look like?

  • Presentation of data – Preferably with multiple levels of complex data
  • Creation of data – multiple functions can be diverged
  • Component abstraction – Cyclic progressive component development
  • Design and implementation of overall state data structure
  • Permission management and control
  • Real back-end APIS

The local environment

  • Node – v v10.15.3 > 9
  • NPM -v 6.14.9 > 6
  • Vue -v @vue/cli 4.5.9 >4.5 Not enough to upgrade

Development steps

  1. Install the node
  2. vue-cli npm install -g @vue/cli
  3. Vue create Project name

The related configuration

  1. NPM Run Serve starts
  2. Recommended plug-ins: esLint and vetur
  3. Eslint does not take effect: you can set it in settings.json

Cannot find module 'fork-ts-checker-webpack-plugin-v5' or any other solution.

Json -> NPM I –save -> NPM run serve

Related knowledge points

import { ref, computed, ... } from 'vue'

Setup () {} :

Logic processing and life cycle are usually written here, very important.Copy the code

Composition-Api

A set of less intrusive, functional apis allows us to "compose" the logic of components more flexibly.Copy the code

Ref: Convert reactive API (raw type)

const count = ref(0)
Copy the code

Computed: Computed attribute API, equivalent to computed attributes in VUe2

Reactive: Transforms reactive apis (complex or primitive types) that can replace refs, but remember toRefs instead

const data: DataProps = reactive({

    conunt: 0

})
Copy the code

Note: When reactive is used, it is difficult to write in HTML and requires data. A. Extend the operator, but there is a problem: when the value is taken out of the reactive object, the property loses its responsiveness. Hence the need for toRefs

ToRefs: With Reactive, the reactive object created by Reactive () is converted to a normal object, except that every attribute node on the object is reactive data of type REF ()

const refData = toRefs(data)
Copy the code

Interface: type inference interface

interface DataProps { count: Number }
Copy the code

DefineComponent: a defineComponent function that simply encapsulates setup functions and returns options objects. The most important thing about defineComponent is that it gives components proper argument type inference in TypeScript.

export function defineComponent (options:unknown) {    

return isFunction(options) ? { setup : options } : options    }
Copy the code

Props: Parameter set, similar to vue2

emits: List of emit events for the current component

Type: Array | Object

What it does: When emit is used in Vue3.0, the current component is required to record the EMIT event (if not, the console will throw a warning).

Purpose: To record events emitted by the current component and, when an object, to verify that the value passed in is valid.

Teleport:

React Portals. React Portal provides an excellent solution for rendering child nodes to DOM nodes that exist outside the parent component, and Teleport in Vue 3 is similar to this. For example, pass a popover nested inside a component to the outermost layer

Suspense: Resolve asynchronous request dilemmas and return a promise

Suspense is a new built-in tag in Vue3 that allows us to make asynchronous components whenever we want them to wait for data (usually in asynchronous API calls) using Vue3 Composition API. Previously, in Vue 2, we had to use conditions (such as V-if or V-else) to check that our data was loaded and to display backup content. But now Suspense is built in with Vue3, so we don’t have to worry about tracking when data is loaded and rendered accordingly.

<Suspense> <template #default> <async-com /></template> <template #fallback>Loading ... </template> </Suspense>Copy the code

Vue3. X Life cycle changes

Be replaced

beforeCreate -> setup()

created -> setup()
Copy the code

rename

beforeMount -> onBeforeMount

mounted -> onMounted

beforeUpdate -> onBeforeUpdate

updated -> onUpdated

beforeDestroy -> onBeforeUnmount

destroyed -> onUnmounted

errorCaptured -> onErrorCaptured
Copy the code

The addition of

Add the following two callback hooks to facilitate debugging:

onRenderTracked

onRenderTriggered
Copy the code

Reference: www.mybj123.com/8456.html

Global API changes

Problems with Vue2 global API:

  • In unit testing, global configuration can easily contaminate the global environment.

  • It becomes very difficult to share a Vue object with different configurations among different apps.

Main modification points:

Global configuration: vue. config-> app.config

Config. productionTip deleted config.ignoredElements renamed config.isCustomElement config.keyCodes deletedCopy the code

Global registration class API

Vue.component->app.component

Vue.directive->app.directive
Copy the code

Behavior extension class API

Vue.mixin->app.,ixin

Vue.use->app.use
Copy the code

other

If it is helpful to you, I hope I can get your thumbs up and recognition ~ thank you.