This is the ninth day of my participation in the First Challenge 2022. For details: First Challenge 2022.

Vue3 slowly learn series! 🙉

Computed attribute computed

Why use computed properties?

Sometimes it’s convenient to use expressions directly within a template, but putting too much logic into a template can make the template too heavy and difficult to maintain. Such as:

If you want to use the full name in more than one place, writing it all the time can be cumbersome. So you should use computed properties for more complex logic or if you need to use the same computed results frequently.

Rewrite it as a calculated property

Modifies the result of a calculated property

If you modify the computed fullName, you will get a warning that the computed fullName is a read-only property.

So if you want to change it, you also need to provide a setter.

Vue3 calculation attribute writing method

Vue2 is written as above. Vue3 is also compatible, but Vue can also be written in combination.

Basic writing

< p > result: {{sum}}</p> <script setup> import { ref, computed } from "vue" const a = ref(1) const b = ref(2) let sum = computed(()=>{ return a.value + b.value }) </script>Copy the code

Calculation of multiple

  let sum = computed(()=>{
    return a.value + b.value
  })

  let mul = computed(()=>{
    return a.value * b.value
  })
Copy the code

Make modifiable

let mul = computed({
    get:()=>{
      return a.value *10
    },
    set:(value)=>{
      return a.value = value/10
    }
})
Copy the code

Replace filter filters

In 2.x, developers can use filters to deal with generic text formats. As of Vue 3.0, filters have been removed and are no longer supported. The official advice is to replace them with method calls or computed properties.

Such as:

Computed attribute parameter transmission

Actually, it’s written pretty much the same way, but you can see that for computed tomography we don’t use direct parameter transfer, and if you use direct parameter transfer, you’ll see that you get an error

The reason:

For computed attributes, no return value is given. We are calling a function, and computed internally does not return a function, so an error is reported: XXX is not a function.

Solutions:

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

Complete writing of vue3

	<p>{{ accountInUSD(accountBalance) }}</p>
	 
	<script setup>
      import {ref, computed } from "vue"
      const accountBalance = ref(100);
      const accountInUSD = computed(()=>{
         return function(value){
           return '$' + value
         }
       })
   </script>
Copy the code

At the end

Welcome erratum 💥

References:

Computed properties

Filter removal

🎨 [thumbs up] [concerns] don’t get lost, more front-end dry goods waiting for you to unlock

Phase to recommend

👉 JavaScript Proxy how to use?

Do you know how to use getters and setters in 👉 JS?

👉 In-depth understanding of ES6 arrow objects

👉 JS decorator pattern instance analysis