Vue.js calculation attribute best practice: efficient data processing and code maintenance

Vue.js's calculation attribute is a powerful feature that allows you to dynamically assign and convect data based on the responsive state. The correct use of calculation attributes can make your code more concise, more efficient, and easier to maintain. However, improper use can cause unexpected errors and performance problems.

This article will introduce the best practice of the Vue calculation attribute to help you make full use of its advantages.

What is the calculation attribute?

Vue computing attribute is a special attribute in Vue, which will be automatically updated when their dependency items change. Unlike methods, they cached until their dependencies change, which makes them an effective choice for derivatives.

The following is a basic example:

import { ref, computed } from 'vue';

const firstName = ref('John');
const lastName = ref('Doe');

const fullName = computed(() => `${firstName.value} ${lastName.value}`);

Here, as long as firstName or lastName changes, fullName will be updated automatically without manually re -calculating.

The best practice of calculating attributes

Now we have learned what the Vue calculation attribute is, let us understand the best practice.

1. The calculation attribute is used in derivative status

Avoid the use of calculation attributes directly or set. Instead, retain them for calculation or conversion based on existing states.

The correct usage:

const cartItems = ref([{ price: 10 }, { price: 15 }]);
const totalPrice = computed(() => cartItems.value.reduce((sum, item) => sum + item.price, 0));

The error usage:

const cartItems = ref([]);
const addItem = computed(() => (item) => cartItems.value.push(item)); // 使用方法來修改狀態(tài)

2. Avoid the side effects in the calculation of the attribute

The calculation attribute should be pure without side effects. This ensures their predictability and only for calculating values.

The correct usage:

const items = ref([1, 2, 3]);
const doubledItems = computed(() => items.value.map(item => item * 2));

The error usage:

const items = ref([1, 2, 3]);
const doubledItems = computed(() => {
  console.log('Doubled items calculated'); // 副作用
  return items.value.map(item => item * 2);
});

3. The expensive calculation of cache

One of the main advantages of calculating attributes is its cache mechanism. For expensive calculations, this mechanism can avoid unnecessary re -calculation.

const largeData = ref([...Array(1000000).keys()]);
const sum = computed(() => largeData.value.reduce((a, b) => a + b, 0));

4. Create a two -way binding computing property with Getter and Setter

When you need a calculation property that can be obtained and sets the value, use Getter and Setter. This is very useful for derivatives that affect other responsive data.

import { ref, computed } from 'vue';

const firstName = ref('John');
const lastName = ref('Doe');

const fullName = computed({
  get: () => `${firstName.value} ${lastName.value}`,
  set: (newValue) => {
    const [first, last] = newValue.split(' ');
    firstName.value = first;
    lastName.value = last;
  }
});

5. Decompired the complex calculated attributes

In order to readability and maintenance, avoid too complicated computing attributes. If necessary, decompose it into a smaller and reusable part.

const basePrice = ref(100);
const tax = ref(0.1);

const priceWithTax = computed(() => basePrice.value * (1 + tax.value));
const formattedPrice = computed(() => `$${priceWithTax.value.toFixed(2)}`);

Learn more

If you want to know more about Vue, NUXT, JavaScript or other useful technologies, please click the link below or picture to see VueSchool:

Summary

Calculating attributes are important tools for high -efficiency management derivatives in Vue. By following the best practice, such as avoiding side effects and using complex logic with cache and decomposition, you can ensure that your application maintains high performance and maintainability. From today, these techniques are used to write more concise and robust Vue components!

I wish you a happy coding!

The above is the detailed content of Good practices for Vue Computed Properties. For more information, please follow other related articles on the PHP Chinese website!