The computed function in the Vue document implements dependency data awareness

Vue.js is a popular JavaScript framework that provides many useful features, of which computed functions are a good example. The computed function is a very useful function in a Vue instance, which can automatically update data based on dependencies. This article will explain how the computed function in the Vue document implements dependency data awareness.

1. The basic concept of computed function

In Vue, the computed function is a computational method that can calculate new data based on existing data. In other words, the computed function is usually used to calculate attribute values. But the calculated properties here are not calculated using functions, but using the get method and set method. Therefore, computed functions can not only get computed property values, but also set them.

The way the computed function works is: if the dependency value of the calculated property changes, it will recalculate and return the new calculated property value. For example, a computed property is determined by the sum of two data properties A and B. When the value of A or B changes, the computed property recalculates and returns a new sum value.

2. Implementation method of computed function

In Vue.js, calculated properties can be defined in two ways.

1. Use the object form to define

Define the required data in the data attribute, and then write the name of the calculated attribute and define how to calculate this attribute in the computed attribute. For example:

new Vue({
    data: {
        num1: 2,
        num2: 3
    },
    computed: {
        sum: function() {
            return this.num1 + this.num2;
        }
    }
});

In this example, two data attributes num1 and num2 are defined, and a calculated attribute sum is defined. The value of sum is calculated from the sum of num1 and num2.

2. Use the function form to define

The computed function can be used as a function to define calculated properties, so that the value of the calculated property can be obtained and set. For example:

new Vue({
    data: {
        num1: 2,
        num2: 3
    },
    computed: {
        sum: {
            get: function() {
                return this.num1 + this.num2;
            },
            set: function(newValue) {
                var parts = newValue.split('+');
                this.num1 = parseInt(parts[0], 10);
                this.num2 = parseInt(parts[1], 10);
            }
        }
    }
});

In this example, the same two data attributes num1 and num2 are defined, and a calculated attribute sum is defined. The value of sum is calculated from the sum of num1 and num2. However, here, we also define a set function to set the value of the computed property. It breaks the computed property value into two numbers and sets them to the values ​​of num1 and num2 respectively.

3. Awareness of dependent data in the computed function

The computed function implements the feature of dependent data awareness, which means that when the data on which the calculated attribute depends changes, the computed function will automatically restart Calculates the value of a computed property. This feature is very useful because it can effectively reduce the programmer's workload while improving the performance of the program.

For example, we can use a simple example to illustrate this feature:

new Vue({
    data: {
        name: 'Tom',
        age: 20,
        yearOfBirth: null
    },
    computed: {
        birthYear: function() {
            var currentYear = new Date().getFullYear();
            return currentYear - this.age;
        }
    }
});

In this example, the calculated property birthYear calculates the member's birth year based on his or her age. If the member's age changes, the calculated properties are recalculated. This is how computed functions achieve dependency data awareness. This feature reduces the burden on developers while also improving application responsiveness and performance.

4. Conclusion

Computed properties are an important function of Vue.js, and the computed function is the key to realizing calculated properties. By implementing dependency data-aware features, computed functions can effectively automatically update the values ​​of computed properties, thereby reducing the burden on developers and improving application performance and response speed. For the development of Vue.js, the computed function is an indispensable tool.

The above is the detailed content of The computed function in the Vue document implements dependency data awareness. For more information, please follow other related articles on the PHP Chinese website!