Quickly use the latest 15 common APIs of vue3

Time:2021-5-12

Quickly use the latest 15 common APIs of vue3

Before that, I wrote a blog to introduce the new features of vue3. I had a brief understanding of the features of vue3, and at the end of the article, I gave you a little experience in vue3Compsition APISimple use of

Address of last article: follow Youda’s steps and experience the new features of vue3 in advance. You haven’t known vue3 yet, have you

Because at the beginning of this month, I set a small goal for myself. After learning the basic use of vue3, I used vue3 to do a small project by myself (to reveal a little, what I made is a small tool. Now 90% of it has been completed. Before the end of this month, I will show you through blog and provide design ideas. Please look forward to it…), This article will frequently compare vue2 to introduce vue3, and also explain each API combined with code examples, which is not only a summary of my knowledge, but also hope to help you

1、 Preface

As we all know, all versions of vue3 have been released one after another, and many teams have started to develop various libraries and upgrade vue2 to vue3. Of course, we can’t fall behind, so we should upgrade your vue2 to vue3 as soon as possible, and learn the new API with this article

You can click the article at the beginning of this article to upgrade. There is one in the previous articleNanny level tutorialTell you how to upgrade

2、 Text

Vue2 imports the entire Vue each time, such as themain.jsCode in file

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
  render: h => h(App)
}).$mount('#app')

But it’s obvious that we can’t use all of Vue’s APIs in our project, so many modules are useless

In vue3, many APIs are exposed for developers to use. We can import the required APIs from Vue according to our own needs. for examplemain.jsCode in

import { createApp } from 'vue';
import App from './App.vue'

createApp(App).mount('#app')

Took advantage ofimportandexportThe import and export syntax of the project realizes the function of packaging module on demand, and the file volume after project packaging is much smaller

This is what we need to do in this paperVue3 APIWhy do you have a detailed understanding

(1)setup

setupSo are functionsCompsition APIOur variables and methods are defined in this function. Let’s take a look at the usage

<template>
  <div id="app">
      <p>{{ number }}</p>
      < button @ Click = "add" > Add < / button >
  </div>
</template>

<script>
//1. Introduce ref function from Vue
import {ref} from 'vue'
export default {
  name: 'App',
  setup() {
      //2. Wrap a responsive variable number with ref function
    let number = ref(0)
    
    //3. Set a method
    function add() {
        //Number is wrapped by the ref function and its value is stored in. Value
      number.value ++
    }
    
    //4. Return number and add for use in template
    return {number, add}
  }
  
}
</script>

It is used in the above coderefFunction, which will be explained in detail below, here you just need to understand that its function is to wrap a responsive data, and you canrefFunction wrapped variables are considered vue2dataVariables in

In this way, the function of adding 1 to the number of a click button is simply realized


In vue2, we visitdataorpropsAll variables in thethis.numberYou can get it in this way, but you should pay special attention to that in setup,thisIt’s pointing toundefinedThat is to say, it can no longer pass like vue2thisTo get variables

So how to get itpropsWhat about the data in?

actuallysetupFunction also has two parameters, which arepropscontextThe former stores the parameter names and corresponding values that are allowed to be passed by the current component; The latter is a context object that can be accessed fromattremitslots

amongemitIt is the method that we are familiar with to communicate with the parent component in vue2, which can be called directly

(2) Life cycle

Vue2 hasbeforeCreatecreatedbeforeMountmountedbeforeUpdateEqual life cycle function

In vue3, these life cycle parts have changed, and the calling method has also changed. Let’s put a change diagram to have a brief understanding

Vue2 Vue3
beforeCreate setup
created setup
beforeMount onBeforeMount
mounted onMounted
beforeUpdate onBeforeUpdate
updated onUpdated
beforeDestory onBeforeUnmount
destoryed unMounted

These life cycle calls of vue3 are also very simple, and they start from thevueAnd then call it directly

<template>
  <div id="app"></div>
</template>

<script>
//1. Introduce multiple life cycle functions from Vue
import {onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, unMounted} from 'vue'
export default {
  name: 'App',
  setup() {
    onBeforeMount(() => {
      //Execute some code before mounting
    })

    onMounted(() => {
      //Execute some code after mounting
    })

    onBeforeUpdate(() => {
      //Execute some code before updating
    })

    onUpdated(() => {
      //Execute some code after the update
    })

    onBeforeUnmount(() => {
      //Execute some code before the component is destroyed
    })

    unMounted(() => {
      //Execute some code after the component is destroyed
    })

    return {}
  }
  
}
</script>

In particular,setupFunction instead ofbeforeCreateandcreatedTwo life cycle functions, so we can think of its execution time asbeforeCreateandcreatedbetween

(3)reactive

reactiveThe method is used to create a responsive data object, and the API also solves the problem of vue2 passing thedefinePropertyThe defect of data responsive

The usage is very simple. You only need to pass in the data as a parameter. The code is as follows

<template>
  <div id="app">
      <!--  4. Access count -- > in the responsive data object
      {{ state.count }}
  </div>
</template>

<script>
//1. Import reactive from Vue 
import {reactive} from 'vue'
export default {
  name: 'App',
  setup() {
       //2. Create responsive data objects
    const state = reactive({count: 3})

    //3. State return the responsive data object for template to use
    return {state}
  }
}
</script>

(4)ref

In the introductionsetupFunction, we use therefThe function encapsulates a responsive data object, which on the surface looks like the samereactiveIt looks as like as two peas, but it’s pretty much the same.refIt’s throughreactiveAn object is wrapped, and then the value is passed to thevalueAttribute, which explains why we need to add the.value

We can simplyref(obj)It’s like thisreactive({value: obj})

Here we write a piece of code to take a specific look

<script>
import {ref, reactive} from 'vue'
export default {
  name: 'App',
  setup() {
      const obj = {count: 3}
      const state1 = ref(obj)
      const state2 = reactive(obj)

    console.log(state1)
    console.log(state2)
  }
  
}
</script>

Take a look at the print results

Quickly use the latest 15 common APIs of vue3

be careful:What do you mean here.valueIt’s insetupFunctionrefThe object after packaging needs to be addedtemplateTemplate access is not required because it is automatically recognized as a template at compile timerefPackaged

So how do we chooserefandreactiveWhat about it?

Suggestions:

  1. Basic type value(StringNmuberBooleanAnd so on) or single valued objects (like{count: 3}In this way, objects with only one property value are usedref
  2. Reference type value(ObjectArray)Usereactive

(5)toRef

toRefIs to convert a value in an object into responsive data, which receives two parameters. The first parameter isobjObject; The second parameter is the property name in the object

The code is as follows:

<script>
//1. Import toref
import {toRef} from 'vue'
export default {
    setup() {
        const obj = {count: 3}
        //2. Convert the value of count attribute in obj object into responsive data
        const state = toRef(obj, 'count')
        
              //3. Return the data object wrapped by toref to template
        return {state}
    }
}
</script>

But on the surface, it looks liketoRefThis API seems very useless, because this function can also be usedrefThe code is as follows

<script>
//1. Import ref
import {ref} from 'vue'
export default {
    setup() {
        const obj = {count: 3}
        //2. Convert the value of count attribute in obj object into responsive data
        const state = ref(obj.count)
        
              //3. Return the data object wrapped by ref to template
        return {state}
    }
}
</script>

At first glance, it seems to be true. In fact, there are differences between the two. We can compare them through a case. The code is as follows

<template>
    <p>{{ state1 }}</p>
    < button @ Click = "ADD1" > Add < / button >

    <p>{{ state2 }}</p>
    < button @ Click = "add2" > Add < / button >
</template>

<script>
import {ref, toRef} from 'vue'
export default {
    setup() {
        const obj = {count: 3}
        const state1 = ref(obj.count)
        const state2 = toRef(obj, 'count')

        function add1() {
            state1.value ++
            Console.log ('original value: ', obj');
            Console.log ('responsive data object: ', state1');
        }

              function add2() {
            state2.value ++
            Console.log ('original value: ', obj');
            Console.log ('responsive data object: ', State2');
        }

        return {state1, state2, add1, add2}
    }
}
</script>

We use them separatelyrefandtoReftakeobjIncountAnd two methods are declared to makecountValue increase, print the original value after each increaseobjAnd packaged responsive data objects, as well as the changes in the view

ref:

Quickly use the latest 15 common APIs of vue3
As you can see, the value of the responsive data is adjusted+1After the operation, the view changes, the original value does not change, and the value of the responsive data object also changes, which shows thatrefIt is an analysis of the original dataCopyAt the same time, the view will be updated synchronously when the value of the responsive data object changes

toRef:

Quickly use the latest 15 common APIs of vue3
As you can see, the value of the responsive data is adjusted+1After the operation, the view does not change, the original value changes, and the value of the responsive data object changes, which shows thattoRefIt is an analysis of the original dataquote, will affect the original value, but will the view be updated after the value of the responsive data object changes

Conclusion:

  1. refIt is a copy of the incoming data;toRefIs a reference to the incoming data
  2. refChanges in the value of will update the view;toRefChanges in the value of do not update the view

(6)toRefs

That’s ittoRefAfter that, it’s easy to understandtoRefsThis function supports one parameter, namelyobjobject

Let’s take a look at its basic use

<script>
//1. Import torefs
import {toRefs} from 'vue'
export default {
    setup() {
        const obj = {
          Name: 'front end impression',
          age: 22,
          gender: 0
        }
        //2. Convert the value of count attribute in obj object into responsive data
        const state = toRefs(obj)
        
        //3. Print and check
        console.log(state)
    }
}
</script>

The print results are as follows:

Quickly use the latest 15 common APIs of vue3
What is returned is an object, which contains each packaged responsive data object

(7)shallowReactive

Just listen to the name of the API. It’s a gradual processreactiveDoes it mean the originalreactiveIt’s deep. Yes, it’s an API for performance optimization

In fact, it willobjPass as parameter toreactiveWhen generating a responsive data object, ifobjIf there is more than one level of, each level will be usedProxyPackage it once, let’s verify it

<script>
import {reactive} from 'vue'
export default {
    setup() {
        const obj = {
          a: 1,
          first: {
            b: 2,
            second: {
              c: 3
            }
          }
        }
        
        const state = reactive(obj)

        console.log(state)
        console.log(state.first)
        console.log(state.first.second)
    }
}
</script>

Take a look at the print results:

Quickly use the latest 15 common APIs of vue3
Imagine if an object level is deep, then each level usesProxyAfter packaging, it is very unfriendly to the performance

Now let’s take a lookshallowReactive

<script>
import {shallowReactive} from 'vue'
export default {
    setup() {
        const obj = {
          a: 1,
          first: {
            b: 2,
            second: {
              c: 3
            }
          }
        }
        
        const state = shallowReactive(obj)

        console.log(state)
        console.log(state.first)
        console.log(state.first.second)
    }
}
</script>

Take a look at the print results:

Quickly use the latest 15 common APIs of vue3
The result is very clear, only the first layer is coveredProxyThe code is as follows:

<template>
    <p>{{ state.a }}</p>
    <p>{{ state.first.b }}</p>
    <p>{{ state.first.second.c }}</p>
    < button @ Click = "change1" > change 1 < / button >
    < button @ Click = "change2" > change2 < / button >
</template>
<script>
import {shallowReactive} from 'vue'
export default {
    setup() {
        const obj = {
          a: 1,
          first: {
            b: 2,
            second: {
              c: 3
            }
          }
        }
        
        const state = shallowReactive(obj)
        
        function change1() {
          state.a = 7
        }

        function change2() {
          state.first.b = 8
          state.first.second.c = 9
          console.log(state);
        }

        return {state}
    }
}
</script>

Take a look at the specific process:

Quickly use the latest 15 common APIs of vue3
First of all, we click the second button to change the structure of the second layerbAnd the third tiercAlthough the value has changed, the view has not been updated;

When we click the first button, we change the position of the first layeraThe whole view is updated;

It can be explained that,shallowReactiveThe value of the first layer property is monitored. Once it changes, the view is updated

(8)shallowRef

It’s a shallow oneref, andshallowReactiveIt’s also used for performance optimization

shallowReactiveMonitor the data changes of the first layer of the object to drive the view updateshallowRefIt’s monitoring.valueTo update the view

Let’s look at the code

<template>
    <p>{{ state.a }}</p>
    <p>{{ state.first.b }}</p>
    <p>{{ state.first.second.c }}</p>
    < button @ Click = "change1" > change 1 < / button >
    < button @ Click = "change2" > change2 < / button >
</template>

<script>
import {shallowRef} from 'vue'
export default {
    setup() {
        const obj = {
          a: 1,
          first: {
            b: 2,
            second: {
              c: 3
            }
          }
        }
        
        const state = shallowRef(obj)
        console.log(state);
        
        function change1() {
          //Directly reassign state. Value
          state.value = {
            a: 7,
            first: {
              b: 8,
              second: {
                c: 9
              }
            }
          }
        }

        function change2() {
          state.value.first.b = 8
          state.value.first.second.c = 9
          console.log(state);
        }

              return {state, change1, change2}
    }
}
</script>

First of all, let’s take a look at the quiltshallowRefWhat is the structure after packaging

Quickly use the latest 15 common APIs of vue3
And then we’ll see what happens if we change the value

Quickly use the latest 15 common APIs of vue3
First, we click the second button and find that the data has been changed, but the view has not been updated;

So I click the second button, and I’m about to finish the whole process.valueWhen the value is reassigned, the view is updated immediately

At this point, it’s too much trouble. If you want to change the data, you have to re assign the value. Don’t worry. At this time, we can use another API calledtriggerRefCall it to immediately update the view, which receives a parameterstate, that is, therefobject

Let’s use it

<template>
    <p>{{ state.a }}</p>
    <p>{{ state.first.b }}</p>
    <p>{{ state.first.second.c }}</p>
    < button @ Click = "change" > change < / button >
</template>

<script>
import {shallowRef, triggerRef} from 'vue'
export default {
    setup() {
        const obj = {
          a: 1,
          first: {
            b: 2,
            second: {
              c: 3
            }
          }
        }
        
        const state = shallowRef(obj)
        console.log(state);

        function change() {
          state.value.first.b = 8
          state.value.first.second.c = 9
          //Drive view update immediately after modifying value
          triggerRef(state)
          console.log(state);
        }

              return {state, change}
    }
}
</script>

Let’s take a look at the specific process

Quickly use the latest 15 common APIs of vue3
As you can see, we didn’t give it.valueRe assignment, only after modifying the value, called thetriggerRefThe view is updated

(9)toRaw

toRawMethod is used to get thereforreactiveObject of the original data

Let’s take a look at the code first

<template>
    <p>{{ state.name }}</p>
    <p>{{ state.age }}</p>
    < button @ Click = "change" > change < / button >
</template>

<script>
import {reactive} from 'vue'
export default {
    setup() {
        const obj = {
          Name: 'front end impression',
          age: 22
        }

        const state = reactive(obj)    

        function change() {
          state.age = 90
          console.log(obj); //  Print raw data obj
          console.log(state);  //  Print reactive objects
        }

        return {state, change}
    }
}
</script>

Let’s take a look at the process

Quickly use the latest 15 common APIs of vue3
We have changedreactiveObject, and you see the original dataobjAnd bereactiveThe values of wrapped objects have changed, so we can see that they are a reference relationship

At this point, we think that if we change the original data directlyobjWhat happens to the value of? The answer is:reactiveThe value of will also change, but the view will not be updated

It can be seen that when we want to modify the data but do not want the view to be updated, we can choose to modify the values on the original data directly. Therefore, we need to obtain the original data first. We can use thetoRawmethod

toRawReceive a parameter, namelyrefObject orreactiveobject

<script>
import {reactive, toRaw} from 'vue'
export default {
    setup() {
        const obj = {
          Name: 'front end impression',
          age: 22
        }

        const state = reactive(obj)    
        const raw = toRaw(state)

        console.log(obj === raw)   // true
    }
}
</script>

The above code proves thistoRawMethods fromreactiveObject to get the original data, so we can easily modify the value of the original data without updating the view to do some performance optimization

be careful:In addition, whentoRawThe parameters received by the method arerefObject, you need to add.valueTo get the original data object

(10)markRaw

markRawMethod to mark raw data as nonresponsive, that is, usingreforreactiveWhen it is packaged, it can’t realize data response. It receives a parameter, that is, the original data, and returns the marked data

Let’s look at the code

<template>
    <p>{{ state.name }}</p>
    <p>{{ state.age }}</p>
    < button @ Click = "change" > change < / button >
</template>

<script>
import {reactive, markRaw} from 'vue'
export default {
    setup() {
        const obj = {
          Name: 'front end impression',
          age: 22
        }
        //The original data obj is marked by markraw, so that its data update is no longer tracked
        const raw = markRaw(obj)   
        //Try to wrap raw with reactive to make it responsive data
        const state = reactive(raw)    

        function change() {
          state.age = 90
          console.log(state);
        }

        return {state, change}
    }
}
</script>

Let’s take a look at what’s beingmarkRawCan the data processed by this method be usedreactivePackaged as responsive data

Quickly use the latest 15 common APIs of vue3
As you can see from the figure, even if we change the value, we will not update the view, that is, we do not implement data responsiveness

(11)provide && inject

The same as in vue2provideandinjectIt works the same, except that in vue3 you need to manuallyvueImport from

Here is a brief description of the functions of these two methods

  • provide: passing data to child components and descendant components. Receive two parameters, the first parameter iskey, that is, the name of the data; The second parameter isvalueThat is, the value of the data
  • inject: receive data from parent component or ancestor component. Receive a parameterkeyThat is, the name of the data passed by the parent component or ancestor component

Let’s say there are three componentsA.vueB.vueC.vueOf whichB.vueyesA.vueSub components of,C.vueyesB.vueSubcomponents of

// A.vue
<script>
import {provide} from 'vue'
export default {
    setup() {
        const obj= {
          Name: 'front end impression',
          age: 22
        }

        //Pass the data named info to child components and descendant components
        provide('info', obj)
    }
}
</script>

// B.vue
<script>
import {inject} from 'vue'
export default {
    setup() {    
        //Receive data from a.vue
        inject('info')  // {Name: 'front end impression', age: 22}
    }
}
</script>

// C.vue
<script>
import {inject} from 'vue'
export default {
    setup() {    
        //Receive data from a.vue
        inject('info')  // {Name: 'front end impression', age: 22}
    }
}
</script>

(12)watch && watchEffect

watchandwatchEffectAre used to monitor a data change to perform the specified operation, but the usage is still different

watch:watch( source, cb, [options] )

Parameter Description:

  • Source: it can be an expression or a function, which is used to specify the dependent object for listening
  • CB: fallback function executed after dependent object changes
  • Options: parameters. The configurable properties include immediate (immediate trigger callback function) and deep (deep listening)

When listeningrefType:

<script>
import {ref, watch} from 'vue'
export default {
    setup() {    
        const state = ref(0)

        watch(state, (newValue, oldValue) => {
          Console.log (` original value is ${oldvalue} '))
          Console.log (` new value is ${newvalue} '))
          /*Print results after 1 second:
                  The original value is 0
                  The new value is 1
          */
        })

        //After 1 second, change the state value to + 1
        setTimeout(() => {
          state.value ++
        }, 1000)
    }
}
</script>

When listeningreactiveType:

<script>
import {reactive, watch} from 'vue'
export default {
    setup() {    
        const state = reactive({count: 0})

        watch(() => state.count, (newValue, oldValue) => {
          Console.log (` original value is ${oldvalue} '))
          Console.log (` new value is ${newvalue} '))
          /*Print results after 1 second:
                  The original value is 0
                  The new value is 1
          */
        })

        //After 1 second, change the value of state. Count to + 1
        setTimeout(() => {
          state.count ++
        }, 1000)
    }
}
</script>

When listening to multiple values at the same time:

<script>
import {reactive, watch} from 'vue'
export default {
    setup() {    
        const state = reactive({ count: 0, name: 'zs' })

         watch(
            [() => state.count, () => state.name], 
            ([newCount, newName], [oldvCount, oldvName]) => {
              Console. Log (oldvcount) // old count value
              Console. Log (newcount) // new count value
              Console.log (oldname) // old name value
              Console.log (newvname) // new name value
            }
          )

          setTimeout(() => {
            state.count ++
            state.name = 'ls'
          }, 1000)
    }
}
</script>

becausewatchWe have specified the listening object in the first parameter of the method. Therefore, when the component is initialized, the callback function in the second parameter will not be executed. If we want it to be executed first, we can set it in the third parameter objectimmediate: true

watchThe default method is to monitor the data specified by us gradually. For example, if the monitored data is nested in multiple layers, the deep data change will not trigger the callback of monitoring. If we want to monitor the deep data, we can set it in the third parameter objectdeep: true

Supplement:The watch method will return a stop method. If you want to stop listening, you can directly execute the stop function


Let’s talk about it nextwatchEffectIt’s related towatchThe main differences are as follows:

  1. There is no need to manually pass in dependencies
  2. The callback function is executed once each initialization to get the dependency automatically
  3. The original value cannot be obtained, only the changed value can be obtained

Take a look at how this method works:

<script>
import {reactive, watchEffect} from 'vue'
export default {
    setup() {    
          const state = reactive({ count: 0, name: 'zs' })

          watchEffect(() => {
          console.log(state.count)
          console.log(state.name)
          /*Print on initialization:
                  0
                  zs

            Print after 1 second:
                  1
                  ls
          */
          })

          setTimeout(() => {
            state.count ++
            state.name = 'ls'
          }, 1000)
    }
}
</script>

As you can see from the above code, we don’t have thewatchMethod to pass in a dependency, but directly specify a callback function

When the component is initialized, the callback function is executed once, and the data to be detected is automatically obtainedstate.countandstate.name

According to the above characteristics, we can choose which monitor to use

(13)getCurrentInstance

We all know that in any component of vue2, you can get the instance of the current component throughthisAnd in vue3, a lot of our code is theresetupFunction, and in that functionthisIt’s pointing toundefinedHow to get the instance of the current component?

In this case, another method can be used, that isgetCurrentInstance

<template>
    <p>{{ num }}</p>
</template>
<script>
import {ref, getCurrentInstance} from 'vue'
export default {
    setup() {    
        const num = ref(3)
        const instance = getCurrentInstance()
        console.log(instance)

        return {num}
    }
}
</script>

Let’s take a look at the print results

Quickly use the latest 15 common APIs of vue3
becauseinstanceIt contains too much content, so it is not complete, but the main content is in the figure. Let’s focus on itctxandproxyBecause these two are what we wantthisContent of

Quickly use the latest 15 common APIs of vue3
Quickly use the latest 15 common APIs of vue3
You can see thatctxandproxyThe content of is very similar, but the latter is wrapped with a layer relative to the formerproxyThis shows thatproxyIt’s responsive

(14)useStore

In vue2, we use vuex throughthis.$storeTo get the vuex instance, but the previous part described thethisThe way to get is different, and we are in vue3getCurrentInstance().ctxAnd it’s not found in the study$storeHow to get the vuex instance? This is about to passvuexOne of the methods in isuseStore

//Index.js in the store folder
import Vuex from 'vuex'

const store = Vuex.createStore({
    state: {
      Name: 'front end impression',
      age: 22
    },
    mutations: {
      ……
    },
    ……
})

// example.vue
<script>
//Import usestore method from vuex
import {useStore} from 'vuex'
export default {
    setup() {    
        //Get vuex instance
        const store = useStore()

        console.log(store)
    }
}
</script>

Let’s take a look at the print results

Quickly use the latest 15 common APIs of vue3
Then it can be used normally as beforevuexIt’s over

(15) Get label element

Finally, one morerefAnother function is to get tag elements or components

In vue2, we get elements by giving them arefProperty, and then through thethis.$refs.xxBut this is no longer applicable in vue3

Let’s take a look at how to get elements in vue3

<template>
  <div>
    < div ref = "El" > div element < / div >
  </div>
</template>

<script>
import { ref, onMounted } from 'vue'
export default {
  setup() {
    //Create a DOM reference with the same name as the ref attribute name of the element
    const el = ref(null)

    //The target element can only be obtained through El after mounting
    onMounted(() => {
      El. Value. InnerHTML ='content modified '
    })

    //Return the created reference
    return {el}
  }
}
</script>

The operation of getting elements is divided into the following steps:

  1. First give therefProperty, assuming thatel
  2. And then in thesetupCall in functionrefFunction whose value isnullAnd assign to the variableelNote here that the variable name must be the same as the one we set for the elementrefSame property name
  3. Put the reference to the element into a variableelReturn out

supplement: the set element reference variable can only be accessed after the component is mounted, so it is invalid to operate the element before mounting

Of course, if we refer to a component element, we will get the instance object of the component. We won’t do too much demonstration here

3、 Concluding remarks

This article is also the author’s learning and understanding of vue3. Because in the previous learning process, I also consulted a large number of documents and materials, and constantly tested and groped, as well as my experience in the vue3 project, which made me have a deeper understanding of vue3. At the same time, I found that many small partners in various communities or social groups were not familiar with the vue3 API, or even knew that there were these APIs, So I wrote this summary article to share what I know and understand with you

Welcome to the official account:Front end impressionTo share front-end technical knowledge

Recommended Today

Looking for frustration 1.0

I believe you have a basic understanding of trust in yesterday’s article. Today we will give a complete introduction to trust. Why choose rust It’s a language that gives everyone the ability to build reliable and efficient software. You can’t write unsafe code here (unsafe block is not in the scope of discussion). Most of […]