Learn more about computed properties in vue

The following Vue.js tutorial column will take you to understand the calculated properties in vue. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to everyone.

#1. What is a computed attribute

Expressions within templates are very convenient, but they were originally designed to be usedSimple operation. Putting too much logic into a template can make it overweight and difficult to maintain. For example:

<p>
  {{ message.split('').reverse().join('') }}</p>

The expression here contains 3 operations, which is not very clear, so when you encounter complex logic, you should use Vue's special calculated attribute computed to process it.

2. Usage of computed attributes

Various complex logic can be completed in a computed attribute, including operations, function calls, etc., as long as the final return One result will do.

Let’s rewrite the above example using computed properties

<p>
  </p><p>Original message: "{{ message }}"</p>
  <p>Computed reversed message: "{{ reversedMessage }}"</p>　　//我们把复杂处理放在了计算属性里面了

var vm = new Vue({
    el: '#example',
    data: {
        message: 'Hello'
    },
    computed: {
        reversedMessage: function () {            // `this` 指向 vm 实例
            return this.message.split('').reverse().join('')
        }
    }
});

Result:

Original message: "Hello"

Computed reversed message: "olleH"

In addition to the simple usage in the above example, Computed properties can also rely on the data of multiple Vue instances. As long as any of the data changes, the calculated properties will be re-executed. , the view will also be updated.

    <p>
        <button>补充货物1</button>
        </p><p>总价为：{{price}}</p>
    

var app = new Vue({        
       el: '#app', 
   data: {
       package1: {
           count: 5,
           price: 5
       },
       package2: {
           count: 10,
           price: 10
       }
    },
    computed: {
     price: function(){         return this.package1.count*this.package1.price+this.package2.count*this.package2.price　　//总价随着货物或价格的改变会重新计算
     }
    },
    methods: {   //对象的方法
        add: function(){            this.package1.count++
        }
    }
});

There are two very practical tips for calculated properties that are easily overlooked: First, calculated properties can depend on other calculated properties; Second, calculated properties can not only rely on the data of the current Vue instance, but also Depends on the data of other instances, For example:

    <p></p>
    <p>{{ reverseText}}</p>

var app1 = new Vue({
   el: '#app1',
 data: {
      text: 'computed'
    }
});var app2 = new Vue({
    el: '#app2',
    computed: {
        reverseText: function(){
        return app1.text.split('').reverse().join('');  //使用app1的数据进行计算        }
    }
});

Each calculated property contains a getter and a setter. Our two examples above are the default usage of calculated properties. Just use getter to read.

When you need it, you can also provide a setter function. When you manually modify the value of a calculated property just like modifying an ordinary data, the setter function will be triggered to perform some custom operations, such as:

var vm = new Vue({
    el: '#demo',
    data: {
        firstName: 'Foo',
        lastName: 'Bar'
    },
    computed: {
        fullName: {            // getter
            get: function () {                return this.firstName + ' ' + this.lastName
            },            // setter
            set: function (newValue) {                var names = newValue.split(' ');                this.firstName = names[0];                this.lastName = names[names.length - 1];
            }
        }
    }
});//现在再运行 vm.fullName = 'John Doe' 时，setter 会被调用，vm.firstName 和 vm.lastName 也会相应地被更新。

In most cases, we will only use the default getter method to read a calculated property. Setters are rarely used in business, so when declaring a calculated property, you can directly use the default writing method , it is not necessary to declare both getter and setter.

3. Calculated attribute cache

In the above example, in addition to using calculated properties, we can also achieve the same effect by calling methods in expressions, such as :

<p>{{reverseTitle()}}</p>

// 在组件中methods: {
  reverseTitle: function () {    return this.title.split('').reverse().join('')
  }
}

We can define the same function as a method instead of a computed property, and the end result of both ways is indeed exactly the same. Just one uses reverseTitle() to get the value, and the other uses reverseTitle to get the value.

However, the difference is that computed properties are cached based on their dependencies. Computed properties are only re-evaluated when their associated dependencies change.

This means that as long as the title has not changed, accessing the reverseTitle calculated property multiple times will immediately return the previous calculation result without having to execute the function again.

A small example:

        <p>{{reverseTitle}}</p>
        <p>{{reverseTitle1()}}</p>
        <button>补充货物1</button>
        <p>总价为：{{price}}</p>

    computed: {
      reverseTitle: function(){          return this.title.split('').reverse().join('')　　//而使用计算属性，只要title没变，页面渲染是不会重新进这里来计算的，而是使用了缓存。
      },
     price: function(){         return this.package1.count*this.package1.price+this.package2.count*this.package2.price
     }
    },
    methods: {   //对象的方法
        add: function(){            this.package1.count++
        },
        reverseTitle1: function(){            return this.title.split('').reverse().join('')　　//点击补充货物，也会进这个方法，再次计算。不是刷新，而是只要页面渲染，就会进方法里重新计算。
        }
    },

In contrast, whenever a re-render is triggered, the calling method will always Execute the function again.

Why do we need caching? Suppose we have a computationally expensive property A, which requires traversing a huge array and doing a lot of calculations. Then we might have other computed properties that depend on A.

If there is no cache, we will inevitably execute the getter of A multiple times! If you don't want caching, use methods instead.

Related recommendations:

2020 front-end vue interview questions summary (with answers)

vue tutorial Recommendation: The latest 5 vue.js video tutorial selections in 2020

For more programming-related knowledge, please visit: Programming Teaching! !

The above is the detailed content of Learn more about computed properties in vue. For more information, please follow other related articles on the PHP Chinese website!