It’s been almost a year since Vue3 was released, and I’ve been riding the wave and learning about the new Vue3 features, but haven’t been working on them yet. Fortunately, this company encourages the use of new technology, and the author also put Vue3 into work not long ago, and found that it is still very smooth 😎 to record what the author has learned and used, and continue to update it…

Vue3 and Vue2

The Vue2 structure is as follows:

components: {},
mixins: {},
props: {},
data() {
  return {};
},
computed: {},
watch: {},
created: {},
mounted: {},
methods: {},
Copy the code

Be familiar withVue2Readers should know that we will generally be indataDefine data inmethodsDeclaration method, throughthisInvoke the required data and methods.

I think you and I have also felt that when the. Vue file features complex, code is too long, we need to switch between template, data, methods back and forth, very frustrated 😤

Of course, it doesn’t stop there! I don’t know if you’ve ever used mixins at work. Admittedly, mixins have their advantages and benefits, but their disadvantages are also obvious:

  • Conflicting naming
  • Unknown data source, debugging is very cool 😵……

Presumably based on the above questions, Vue3 created 👏 and launched the Composition API

The birth of Vue3

Vue3’s Composition API not only combines the pieces of logic together, but also separates the pieces of functional logic into separate files. Below, I will introduce it ceremoniously

setup

This is a new feature added to Vue3 as an entry point to the Composition API. The structure is as follows:

export default {
  setup(){}};Copy the code

The timing of setup execution varies on the web. However, in my tests, setup is executed before the beforeCreate life cycle. You can also test it by following the following code: 🤔

setup(props, context) {
  console.log('setup');
},
beforeCreate() {
  console.log('beforeCreate');
},
created() {
  console.log('created');
},
Copy the code

Setup can accept two parameters, props and context, as shown in the code above. Let’s talk briefly about these two properties:

  1. props: Passes between parent and child componentspropThe value passed. Directly on the code:
// This is the props received
props: {
  num: {
    type: Number.default: 0,},obj: {
    type: Object.default: () = >{},}},Copy the code

The props parameter in setup takes the num and obj properties passed in above and performs the related logic operations

Tips: Props cannot be deconstructed using ES6 because the deconstructed data would be unresponsive. What if we want to deconstruct it but keep it responsive? Don’t worry, Vue3 introduces the toRefs function, which we’ll learn about later

  1. contextAlternative:Vue2In thethis

We’ll use this a lot in Vue2. However, in Vue3, you cannot use this. Therefore, the context provides several of the most commonly used properties: emit, slot, and so on:

setup(props, {emit}) {
  emit('alert', type);
},
Copy the code

Ref, Reactive, toRefs

In Vue2, we usually define data in data, and we know that data defined in data is usually reactive. So, how do we define data in Vue3? Ref and Reactive are born from this. In general, ref defines bidirectional binding of js base types; Reactive defines the bidirectional binding of object types. Usage:

<template>
  <p>{{ name }}</p>

  <p>{{ data.age }}</p>
  <p>{{ data.sex }}</p>
</template>

<script>
import {ref, reactive, toRefs} from "vue";

export default {
  setup(props, {root}) {
    // ref is usually used to define base types
    const name = ref(' ');

    // reactive is usually used to define object types
    const data = reactive({
      age: 11.sex: 'other'.phone: 0.address: ' '});return {
      name,
      data
    }
  }
}
</script>
Copy the code

As you may have noticed, when we define object types in Reactive and need to use them in templates, we need Data. A property, when you have a lot of data, it’s pretty cumbersome. As with props, we can’t deconstruct it directly or it will lose responsiveness. Therefore, Vue3 proposes the toRefs function. Use toRefs to convert all properties in object types defined by Reactive to base types defined by REF. The above code can be modified as follows:

<template>
  <p>{{name}}</p>

  <p>{{age}}</p>
  <p>{{sex}}</p>
</template>

<script>
import {ref, reactive, toRefs} from "vue";

export default {
  setup(props, {root}) {
    // ref is usually used to define base types
    const name = ref(' ');

    // reactive is usually used to define object types
    const data = reactive({
      age: 11.sex: 'other'.phone: 0.address: ' '});return{ name, ... toRefs(data) } } }</script>
Copy the code

computed

Go directly to the code and feel computed in Vue3

<template>
  <p>{{double}}</p>
</template>

<script>
import {ref, computed} from "vue";

export default {
  setup(props, {root}) {
    const num = ref(12);

    const double = computed(() = > {
      return num.value * 2;
    });

    return {
      double,
    }
  }
}
</script>
Copy the code

watch

  1. Listening to therefDefined data
<script>
import {ref, watch} from "vue";

export default {
  setup(props, {root}) {
    const num = ref(12);

    watch(
      num,
      (newValue, oldValue) = > {
        console.log(newValue, oldValue); }); } } </script>Copy the code
  1. Listening to thereactiveDefined data
<script>
import {reactive, watch} from "vue";

export default {
  setup(props, {root}) {
    const data = reactive({
      age: 100.address: 'test'
    });

    watch(
      () = > data.age,
      (newValue, oldValue) = > {
        console.log(newValue, oldValue); }); } } </script>Copy the code

Vue3 retains the keywords deep and immediate, as shown in the following code

<script>
import {reactive, watch} from "vue";

export default {
  setup(props, {root}) {
    const data = reactive({
      age: 100.address: 'test'
    });

    watch(
      () = > data.age,
      (newValue, oldValue) = > {
        console.log(newValue, oldValue);
      },
      {
        deep: true.immediate: true}); } } </script>Copy the code

The life cycle

The life cycle of Vue2 and Vue3 is a little different. Please refer to 🤲

subsequent

Here are the features in Vue3. In addition to the features described above, there are many new features in Vue3 such as watchEffect, custom Hooks, Teleport, and more. Since I do not use these features frequently in my work, I will not record them here, and I will update 🥱 when I use them or learn them later