The benefits of vue3

  1. Realize logical extraction and reuse of code
  2. The Diff algorithm is faster
  3. Less memory
  4. Smaller packing volume
  5. Compositon Api: The Compositon Api was developed to solve the problem that writing components using traditional option configuration methods can lead to complex maintenance and low code reusability

Vue3 removes syntax

Vue3.0 is compatible with most of the syntax of version 2.0, but there are some damaging syntax updates, which should be paid attention to

  1. Instance method $ON removed (Existing implementation mode of eventBus no longer supports tripartite plug-in instead)
  2. Filter removed (interpolation can no longer use filters, can use methods instead)
  3. .sync syntax removed (merged with V-model syntax)

Build vue3

Create VUE scaffolding project YARN Create Project name can also use NPM personal custom YARN

You can see the downloaded package in your package-lock.json

The Compositon-API provides the following functions

  • Reactive – Processes simple data
  • Ref — Simple and complex data
  • ToRefs – Omits the object name in the template and accesses the data directly using the attribute name(state.user.name) can omit state directly (user.name)
  • Computed – Computed attributes can be used more than once
  • Watch — Listening, divided into normal listening immediately perform deep listening
  • Onmounted — Life cycle function
  • Other……

The setup () function

  1. These functions must be written in Setup as a starting point for the component API
  2. Setup cannot use this; this is undefined
  3. It will execute before beforecreated executes

Ref () function

  1. The value that is returned after the ref function is executed is an object that must be modified in the setup function and not in the.value template
  2. The ref function makes up for the lack of type support in the reactive function

Recommendation: Use reactive if you know the key name of the object to be transformed, otherwise use ref

To learn how to use other functions, please look for the author to update……. (You can do your own research, too.)

Components by value

1. Parent transmission Parent transmission is received in the child component through props

  1. The setup function takes two arguments, the first parameter being props and the second parameter being an object context
  2. Props is an object that contains all prop data passed by the parent component

2. Emit emit by triggering custom events

Using the Context object in the setup function, which contains the attrs, slots, emit attributes, emit can trigger the execution of a custom event to complete child to parent

Dojo.provide and inject

Role: Not only can data be passed across layers, but also reactive data can be passed through provide/ Inject

  1. The grandfather component is used in the setup methodDojo.provide functionProvide data
  2. The grandchild component is used in the setup methodInject functionTo get the data

That’s all for today. I’m tired. See you later