In September 2020, Uda released the official version of Vue3. The biggest change I see between this new edition and the old one is the addition of a Composition API.

When you are developing a large project and creating Vue components, there is a lot of code duplication between one component and another component in the project, which can become costly to maintain and lead to further maintenance of the code. In this case, you might think of mixins as an API. Although mixins are designed to reduce code repetition and submit development efficiency, maintenance is not very effective. Once I change something in the shared code part, it will affect the interaction of another component. I don’t like the idea of having to go to another component and change the code.

The Composition API was created to improve the maintenance of common code, and is used in the Setup location. The setup option should be a function that accepts props and context, and we can expose everything that it returns to the rest of the component (compute properties, methods, lifecycle hooks, and so on) as well as the component’s template. One thing to note here is that since the component instance has not been created when setup is executed, this is not in the Setup option. This means that you will not be able to access any properties declared in the component — local state, computed properties, or methods — except props.

In order to achieve better contrast effect, I use VUe2 and VUe3 respectively to achieve the same effect, which has achieved contrast.

Demonstration effect

Vue3

The main page

<template>
  <submit @submit="changeTarget"></submit>
  <say v-model:say="change"></say>
  <display :say="change" :target="start"></display>
</template>
Copy the code

I started with three components:

  • Submit is used to submit your own starting value
  • Say is used to enter your content
  • Display is used to show your effect

Say components

In component say, I used v-Model in VUe3 for bidirectional binding. In 3.x, I can directly change the name of v-Model on a custom component, instead of changing the model option within the component, which means we can use multiple V-Models on a custom component.

// app.vue
<template>
  <say v-model:say="change"></say>
</template>
Copy the code

Say component inside

// say.vue <template> <div class="say"> Please enter your content </div> < inpu@ input="changeValue" :value="say"/> </template> <script type="text/ecmascript-6"> export default { name: "hello", props: ["say"], methods: { changeValue(e) { let says = e.target.value; this.$emit("update:say", says); }}}; </script>Copy the code

The display components

For now, let’s focus on the display part, where I used the Composition API in Vue3, and put the Setup part in the Display component

// display. Vue <template> <p> Display </p> <div> multiply: {{muliplyTotal}}</div> <div> add: {{addTotal}}</div> </template> <script> import { toRef } from 'vue' import {muliplyNum, addNum} from ".. /common/util/tool"; export default { props: ['target', 'say'], setup(props) { let muliplyTotal= muliplyNum(toRef(props, 'target'), toRef(props, 'say')) let addTotal = addNum(toRef(props, 'target'), toRef(props, 'say')) return { muliplyTotal, addTotal } } } </script>Copy the code

The value passed by props creates a ref for the property of the source response object via toRef, holds a reactive link to its source property, passes it to muliplyNum and addNum, and returns the result returned by the function to the component.

// tool.js

import {watch, ref} from 'vue'

export function addNum(start, value) {
    let display = ref(0)
    watch(value, (newVal) => {
        let total = start.value
        let arr = newVal.split('')
        arr.forEach((i) => {
            total = total + parseInt(i)
        })
        display.value = total
    })
    return display
}

export function muliplyNum(start, value) {
    let display = ref(0)
    watch(value, (newVal) => {
        let eachValue = start.value
        let value = parseInt(newVal)
        display.value = parseInt(eachValue) * value
    })
    return display
}
Copy the code

Ref is used to create a response for the object display, and watch is used to observe the changes in the values passed by props and make the corresponding logic. Finally, the logic returns the data of the response.

Vue2

I wrote the same business logic using VUe2

The main page

The main page is mostly the same, except for the component say. Due to the requirements of v-Model bidirectional binding, we need to add a.sync modifier to the property say to achieve bidirectional binding.

<template>
  <div>
    <submit @submit="changeTarget"></submit>
    <say :say.sync="change"></say>
    <display :say="change" :target="start"></display>
  </div>
</template>
Copy the code

The display components

<template> <div> <p> </p> <div> Multiplication: {{muliplyTotal}}</div> <div> addition: {{addTotal}}</div> </div> </template> <script type="text/ecmascript-6"> import { addNum, muliplyNum } from '.. /common/js/tool' export default { props: ['say', 'target'], data () { return { muliplyTotal: 0, addTotal: 0 } }, watch: { say (newVal) { this.addTotal = addNum(this.target, newVal) this.muliplyTotal = muliplyNum(this.target, newVal) } } } </script>Copy the code

Different from the display component in vue3 before, a watchapi is mainly added to monitor the number of say incoming from outside and make corresponding code logic due to changes.

// tool.js
export function addNum (start, value) {
  let total = start
  let arr = value.split('')
  arr.forEach((i) => {
    total = total + parseInt(i)
  })
  return total
}

export function muliplyNum (start, value) {
  return parseInt(value) * start
}

Copy the code

conclusion

And you might look at this and say, well, why don’t you just do it with computed. And you can do that, you can do it with less code than you do now, and it’s easier to do it. And I’m just going to do that here just to show you how to do it.

After comparing vue3 and vue2 codes, the advantages and disadvantages are as follows:

  • Although vue2 code is small, it is not friendly to maintain, and some reactive features cannot be wrapped together with functions alone, resulting in a separate setting on the main page.
  • Although VUE3 has more code, it has higher commonality between components, because I putwatchandrefAnd all kinds of responsive APIS encapsulated in the function, if the next time you want to use another component, you can call the function directly;

From this point of view, Vue3’s Composition API has definitely improved in terms of maintaining components. There are more scenarios to explore, and hopefully Vue3 will get better and better.