Home >Web Front-end >JS Tutorial >How to use vue computed properties correctly

How to use vue computed properties correctly

php中世界最好的语言Original: 2018-04-20 14:24:185027browse

This time I will show you how to use vue calculated properties correctly and what are the precautions for using vue calculated properties correctly. The following is a practical case, let's take a look.

1. What is a computed attribute

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

<p id="example">
 {{ 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 a result is returned in the end.

Let’s rewrite the above example using computed properties

<p id="example">
 <p>Original message: "{{ message }}"</p>
 <p>Computed reversed message: "{{ reversedMessage }}"</p>　　//我们把复杂处理放在了计算属性里面了
</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, calculated 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, and the view will also Will be updated.

<body>
  <p id="app">
    <button @click="add()">补充货物1</button>
    <p>总价为：{{price}}</p>
  </p>
</body>
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 rely on other instances. Data, for example:

 <p id="app1"></p>
  <p id="app2">{{ 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, only using getters 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 attributes, we can also call methods in expressions. To achieve the same effect, 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 calculated property, and the final results of the two methods are indeed exactly the same. Just one uses

reverseTitle() to get the value, and the other uses reverseTitle to get the value.

The difference, however, is that computed properties are cached based on their dependencies. A computed property is only re-evaluated when its 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 @click="add()">补充货物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-rendering 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.

Let’s take a look at the use of Vue calculated properties

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>计算属性</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <script src="../js/Vue.js"></script>
  <script src="../js/vue-resource.js"></script>
  <script>
    window.onload = function(){
      var vm = new Vue({
        el:'#box',
        data: {
          a: 1,
        },
        computed:{
          b:function(){
            return this.a+1;
          }
        }
      });
      console.log(vm.a);
    }
  </script>
</head>
<body>
<p id="box">
  a => {{a}}
  <br>
  b => {{b}}
</p>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>计算属性</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <script src="../js/Vue.js"></script>
  <script src="../js/vue-resource.js"></script>
  <script>
    window.onload = function(){
      var vm = new Vue({
        el:'#box',
        data: {
          a: 1,
        },
        computed:{
          b:function(){
            return this.a+1;
          }
        }
      });
      document.onclick = function(){
        vm.a = 101;
      }
    }
  </script>
</head>
<body>
<p id="box">
  a => {{a}}
  <br>
  b => {{b}}
</p>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>计算属性</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <script src="../js/Vue.js"></script>
  <script src="../js/vue-resource.js"></script>
  <script>
    window.onload = function(){
      var vm = new Vue({
        el:'#box',
        data: {
          a: 1,
        },
        computed:{
          b:{
            get:function(){
              return this.a+2;
            },
            set:function(val){
              this.a=val;
            }
          }
        }
      });
      document.onclick = function(){
        vm.b = 10;
      }
    }
  </script>
</head>
<body>
<p id="box">
  a => {{a}}
  <br>
  b => {{b}}
</p>
</body>
</html>

I believe you have mastered the method after reading the case in this article. For more exciting things, please pay attention to php Other related articles on the Chinese website!

How to use vue computed properties correctly

Related articles