Vue3.0

1. Data declaration

• ref

  1. Concept: ref is used to declare any type of data, which must be obtained through xx.value. If ref uses pointer data, internal calls are still converted to reactive calls.

  2. Use:

     const count = ref(1);
     conut.value++;
     Copy the code

• reactive

  1. Concept: Reactive is used to declare data of type object. Reactive uses proxy to do this;

  2. Use:

     const data = reactive({a: 1}) || const data = reative([1, 2, 3]);
     data.a = * || data.push(*);
     Copy the code

• toRef

  1. Value is used to receive props data from the parent component.

  2. Use:

     // Get the title inside the props; setup (props) { const myTitle = toRef(props, 'title'); console.log(myTitle.value); }; // toRef = toRef; // toRef = toRef; const state = reactive({ age: 99, name: 'Goku' }); const ageRef = toRef(state, 'age')Copy the code

• toRefs

  1. Value: used when receiving props data from a parent component. ToRefs can directly deconstruct values without manual assignment. Can also be used with variables declared by reactive and then returned with… toRefs(xx)

  2. Use:

     // Decompose all data received by props into myTitle; setup (props) { const myTitle = toRefs(props); console.log(myTitle.value); } // toRefs and toRef take the key from the object and continue the function of the response, because the normal deconstruction of an object with responsive data will cause the deconstructed variable to lose the function of the response; So toRefs and toRef fix this very well; const state = reative({ age: 99, name: 'Goku' }); const {age , name} = toRefs(state); Const {age, name} =... stateCopy the code

2. Life cycle

3. Calculate attributes

• computed

  1. Concept: As with vue2. X, used to set a dependency on a value;

  2. Use:

     XXX = computed(()=>{return final value; });Copy the code

4. Data monitoring

• watch

  1. Concept: like vue2. X, used to listen for changes in a value;

  2. Use:

     Watch (xx, (newVal, oldVal)=>{// logic processing});Copy the code

• WatchEffect (incorrect concept explanation, to be confirmed)

  1. Concept: it will be executed once during initialization. If there is a dependency judgment, it will be called again after the dependency is established and the code executed by the judgment has changed.

  2. Use:

     WatchEffect (() = > {});Copy the code

5. Component references

• components

  1. Concept: As used with vue2. X, asynchronously loaded components refer to point 8 below;

  2. Use:

     Import xx from xx; Components: {};Copy the code

6. Communication between components

• Parent component passes to child component, and uses parent component methods

  1. Concept:

     The pass method is the same as the vue2. X use :xx=xx binding;

     Reactive ({xx: xx, fun ()=>{}}) reactive({xx: xx, fun ()=>{}})

  2. Use:

     The subcomponent use is received via setup(props) and used by props.xx.xx;

     If the vue2.x method is used to pass the child component, then the child component calls ctx.emit(“xx”) using the setup(CTX) context.

  3. The parent component is bidirectional bound to the v-model to the child component, which is received by modelValue, props:{modelValue: {type: xx}};

  4. As for the changes of VUe3.0 V-Model components, in Vue3.0, V-Models can be bound to multiple components or named as follows: V-Model: xx = XXX; The rest is the same as normal bidirectional binding;

• Parent component gets child component data, methods

  1. Concept: Get the identity in the same way as vue2.x, by binding ref=”xx” to the child component, but the xx name is related to the following to get the child component; In this example, if ref=”haha” is used, haha is also used.
  2. Use:, using const haha = ref(); The haha name must be the same as the ref name of the child component. The parent component accesses data and methods through hahaha. Value.

7. Use routes

• Vue-router4 or later must be imported into the main routing file

  Import {createRouter, createWebHashHistory} from 'vue-router', const routes = {component registration}, createRouter({history: createWebHashHistory(), routes });Copy the code

  CreateApp (App).use(router).mount(‘# App ‘);

  Get the current routing object from the component:

  import { useRouter, userRoute } from 'vue-router' const router = useRouter(); $router; // This.$router; // This. const route = useRoute(); // Get the current route data, equivalent to this.$route in vue2.xCopy the code

8. The new API

• defineAsyncComponent

  Definition: used to load components asynchronously;

  Use:

  /* Const AsyncCategory = defineAsyncComponent(() =>import("./AsyncCategory. Vue ")) /* Second */ import Loading from './Loading.vue'; const AsyncCategory = defineAsyncComponent({ loader: () => import("./AsyncCategory.vue"), loadingComponent: Loading, placeholder component: display this component when AsyncCategory is not loaded errorComponent: Delay when AsyncCategory fails to load 2000, how long to wait before displaying loadingComponent /** Err: error message, retry: function that calls retry to retry attempts: record the number of attempts */ onError: function(err, retry, attempts) { } });Copy the code

• suspense

  Definition: a built-in global component that has two slots: default: displays default content if default can be displayed;

  Fallback: If default cannot be displayed, the content of fallback will be displayed.Copy the code

  Use:

  	<suspense>
       	<template v-slot:default>
       		<content />
       	</template>
       	<template v-slot:fallback>
       		<div>
       			loading...
       		</div>
       	<template>
       </suspense>
  Copy the code

• CSS variable injection in state-driven style

  Definition: easier control of CSS styles in data

  Use:

  <template>
  	<div class="text">hello</div>
  </template>
  
  <script>
  export default {
  	data () {
  		return {
  			color: "red"
  		}
  	}
  }
  </script>
  
  <style :vars="{color}">
  .text {
  	color: var(--color);
  }
  </style>
  Copy the code

• teleprot

  Definition: a global popover component that can penetrate the outermost parent component in a child component;

  use

  <Teleport  to="body">
  	<div>
  		...
  	</div>
  </Teleport>
  Copy the code