– vue3API is divided into the following categories :(there is a general concept at the beginning)

1. Apply the configuration

Not a Vue applications will expose a config object const app = createApp ({}) app. Config. GlobalProperties. Foo = 'bar' equivalent vue2. X Vue. Prototype. Foo = 'bar'Copy the code

2. The application of API

Application apis are apis that change the behavior of global VUE. In Vue3, the createApp method is used to create an application instance, using method chain. Component config Directive mixin mount provide unmount use version. import { createApp } from 'vue' const app = createApp({})Copy the code

3. Global API

3.1 defineComponent

Import {defineComponent} from 'vue' const MyComponent = defineComponent({data(){return {count :1}}, methods: { increment(){ this.count++ } } })Copy the code

Or a setup function whose name will be used as the component name

import {defineComponent} from 'vue'

const Hello = defineComponent(function Hello(){
    const count = ref(0)
    return {count}
})
Copy the code

4. The options

Data props watch computed methods emits Expose Example Export Default {expose:['increment'], data(){return {count:0}}, menthods:{ increment(){ this.count++ } } }Copy the code

Life Cycle beforeCreate Created beforeMount Mounted beforeUpdate updated Activated deactivated beforeUnmount unmounted errorCaptured renderTracked renderTriggered

Activated is called when activated by a keep-alive cached component. This hook is not called during server-side rendering

Deactivated is called when a component cached by keep-alive is deactivated. This hook is not called during server-side rendering

RenderTriggered This event tells you what operation triggered the rerendering of the virtual DOM, as well as the target object and key for the operation.

5. Instructions

V-memo added V-IS deprecation

Using vue components on native elements <table> <tr is="vue:my-row-component"></tr> </table>Copy the code

6. Responsive apis

6.1 Responsiveness base API

6.1.1 reactive

Const obj = Reactive ({count:0}) Reactive transformations are "deep" -- they affect all nested properties. Function Reactive <T extends Object >(target: T):UnwrapNestedRefs<T>Copy the code
  • 6.1.2 readonly
Const original = Reactive ({count:0}) const copy = ReadOnly (original) watchEffect(()=>{ Console. log(copy.count) // for responsiveness tracing}) origin.count ++ // Changing riginal will start copy-dependent listeners copy.count++ // Changing copies will fail and cause a warningCopy the code
  • 6.1.3 isProxy Checks whether the object is a proxy created by Reactive or Readonly
  • 6.1.4 isReactive Checks whether an object is a reactive agent created by Reactive
  • 6.1.5 isReadyonly Checks whether the object is a read-only proxy created by readOnly
  • 6.1.6 toRow Returns the original object of the Reactive or Readonly agent
  • 6.1.7 markRaw marks an object so that it is never converted to a proxy. Return the object itself

6.2 Refs

  • 6.2.1 REF takes an internal value and returns a reactive and mutable REF object. Ref object with a single property(.value) specifying an internal value
Example: Const count=ref(0) console.log(count.value) // 0 count.value++ console.log(count.value) // 1 Reactive functions are used to make the object highly responsive. Interface Ref<T> {value: T} fuction ref < T > () value: T: ref < T > ref internal values specify the complex type, example: const foo = ref < string | number > (" foo ") foo value = '123'Copy the code
  • 6.2.2 unref Returns the internal value if the argument tries a ref, otherwise returns the argument itself
function useFoo(x:number | Ref<number>){
    const unwrapped = unref(x)
}
Copy the code
  • 6.2.3 toRef can be used to create a new REF for a property on the source response object. The REF can then be passed
const state = reactive({
    foo : 1,
    bar : 2
})
const fooRef = toRef(state, 'foo')

fooRef.value++
Copy the code

7. Single-file components

Language block

<tempalte> at most one <script> at most one <script setup> each. Vue file contains at most one script, which is preprocessed and used as a component setup() function, i.e. it is executed in each component instance. The < style > can be multipleCopy the code