Shulou(Shulou.com)06/02 Report--

This article introduces the example analysis of the new usage of computed in vue3. The content is very detailed. Interested friends can use it for reference. I hope it will be helpful to you.

For the use of computed in vue3, because vue3 is compatible with vue2's optional API, you can use vue2 directly.

When using computed in combined API, you need to first introduce: import {computed} from "vue". After the introduction of computed, there are two parameters that can be passed in: callback function and options. See exactly how it is used?

1. Functional writing in vue2, computed writing:

Computed: {sum () {return this.num1+ this.num2}} can also be written in vue3 if you use optional API, mainly looking at the use of combined API.

Example 1: summation

When import {ref, computed} from "vue" export default {setup () {const num1 = ref (1) const num2 = ref (1) let sum = computed (() = > {return num1.value + num2.value})}} calls computed, an arrow function is passed in and the return value is sum. It is easier to use than before. If you need to calculate multiple property values, you can call it directly. Such as:

Let sum = computed (() = > {return num1.value + num2.value}) let mul = computed (() = > {return num1.value * num2.value}) this example is too simple. If you don't understand it, you can read the full example 1 later in the article.

Second, options writing calculation attribute only getter by default, and setter can also be provided when needed. The usage in vue2 is as follows:

Computed: {mul: {get () {/ / num1 trigger return this.num1 * 10} when the value of set (value) {/ / mul is changed, trigger this.num1 = value / 10} when the value of set (value) is changed. The mul attribute magnifies the num1 by 10%. If you change the value of mul, num1 will also change.

In vue3:

Let mul = computed ({get: () = > {return num1.value * 10}, set: (value) = > {return num1.value = value/10}}) these two kinds of writing are not quite the same, there is not much difference between careful observation, get and set calls are the same.

In this example, the code is simple. If you don't quite understand it, you can check out the complete example 2 at the end of the article.

Full instance 1:

{{num1}} + {{num2}} = {{sum}}

Num1 self-add num2 self-add import {ref, computed} from "vue" export default {setup () {const num1 = ref (1) const num2 = ref (1) let sum = computed (() = > {return num1.value + num2.value}) return {num1, num2, sum} complete instance 2:

{{num1}} + {{num2}} = {{sum}}

Num1 self-add num2 self-add

{num1} * 10 = {{mul}} change the value import {ref, computed} from "vue" export default {setup () {const num1 = ref (1) const num2 = ref (1) let sum = computed (() = > {return num1.value + num2.value}) let mul = computed ({get: () = > {return num1.value * 10}, set: (value) = > {return num1.value = value/10}}) return {num1, num2, sum Mul}} 3. How to pass a parameter to the computed parameter calculation attribute?

{{item}} import {ref, computed,reactive} from "vue" export default {setup () {const arr = reactive (['', 'hehe']) const sltEle = computed ((index) = > {console.log ('index',index);}) return {arr,sltEle}} is written this way directly, and an error occurs when running: Uncaught TypeError: $setup.sltEle is not a function.

Reason:

The computed calculation property does not give a return value, we are calling a function, and what is returned inside the computed is not a function, so an error is reported: sltEle is not a function.

Solution:

You need to return a function inside the calculated property. Modify the code as follows:

Const sltEle = computed (() = > {return function (index) {console.log ('index',index);}}) this is the end of the sample analysis of the new usage of computed in vue3. I hope the above can be helpful and learn more. If you think the article is good, you can share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.