Preface

Insert image description here

JS is beginning to move toward functional programming. How should I put it? It is using more and more back-end things?
Flexibility is becoming more and more convenient, but the encapsulation of each function will become more and more complex, which is why the backend is more complicated. Composition API

Insert image description here

Official website:

setup function

There is no this in setup
Insert image description here

It should be noted that the function of the return value of setup is the same as data. The returned value is used in the template, and the returned function replaces the method in methods.

Insert image description here
How to implement responsive data? You

can use ref to encapsulate this set of logic.

You only need to import this module when using it, so the reusability is very strong.

import useCounter from './hooks/useCounter'

And a feature is that the variables inside are all generated using const. Is there any reason for this? Currently, other tests can be used as well.

reactive

Don’t structure reactive data casually
Insert image description here

ref

Insert image description here

To grasp the key point, ref returns a variable responsive object and returns an object, so the following syntax is like that, and it will be automatically unpacked in the template.

Insert image description here

Comparison between ref and reactive

Generally, ref is used more often, and ref can also define more complex attributes.

Summary of reactive application scenarios (just a summary, not absolute)
Does this local data refer to data obtained from the server?
Insert image description here

Application scenarios of ref:
Insert image description here
Note that data obtained from the network can be assigned in onmounted.

fehelper extension plug-in

Debugging is more convenient after installation.
Insert image description here

readonly (understand)

Preface: One-way data flow . According to the principle of one-way data flow, the parent component is only responsible for transmitting data. The child component cannot modify the parent component. If you want to modify it, you must send out an event and let the parent component modify it. At the same time, you can Let the parent component know who wants to modify the data.
Insert image description here
So how should such modifications be modified, send out the event, and then let the parent component modify it:

Insert image description here

Supplementary functions of setup (understand)

These functions are a supplementary understanding. Just know it. It doesn’t matter if you don’t know it, because it is rarely used. The main thing is to master the use of reactive and ref.
Insert image description here
This toRefs is very useful.