Learn how to use computed properties in Vue in one article

Do you know when to use Vue to calculate properties? How to use computed properties? The following article will take you to understand the Vue computed properties and introduce the basic usage of Vue computed properties. I hope it will be helpful to you.

Computed properties

Sometimes, we put too much logic in the template, resulting in the template being overweight and difficult to maintain. For example:

<div id="app">
  {{ message.split(&#39;&#39;).reverse().join(&#39;&#39;) }}
</div>

In such a situation, we have to look at it for a while to realize that here is the flipped string that we want to display the variable message, and once we want to use the flipped character multiple times in the template When stringing, it will be more troublesome. Therefore, when we deal with complex logic, we should use calculated properties. [Related recommendations: "vue.js Tutorial"]

Basic Usage

Computed properties are properties in the Vue configuration object and are used as follows :

<div id="app">
   <!-- 计算属性的值可以像data数据一样，直接被使用 --> 
  {{ someComputed }}
</div>
const vm = new Vue({
  el: &#39;#app&#39;,
  computed: {
     // 返回的值，就是计算属性的值
    someComputed () {
      return &#39;some values&#39;
    }
  }
})

For example, if we want to get the reversed string of a string, we can use the calculated property to do it:

<div id="app">
  <p>原始字符串: "{{ msg }}"</p>
  <p>翻转字符处啊: "{{ reversedMsg }}"</p>
</div>
const vm = new Vue({
  el: &#39;#app&#39;,
  data: {
    msg: &#39;Hello&#39;
  },
  computed: {
    reversedMsg: function () {
      return this.msg.split(&#39;&#39;).reverse().join(&#39;&#39;);
    }
  }
})

We can see that the value of reversedMsg depends on msg value, so when we change the value of msg, the value of reversedMsg will also change accordingly.

Computed properties vs methods

In fact, our above functions can also be achieved using methods, such as:

<div id="app">
  <p>原始字符串: "{{ msg }}"</p>
  <p>翻转字符串: "{{ reversedMsg() }}"</p>
</div>
const vm = new Vue({
  el: &#39;#app&#39;,
  data: {
    msg: &#39;Hello&#39;
  },
  methods: {
    reversedMsg: function () {
      return this.msg.split(&#39;&#39;).reverse().join(&#39;&#39;);
    }
  }
})

Although it is called in an expression Methods can also achieve the same effect, but there is an essential difference between using calculated properties and using methods. When using methods, each time the page is re-rendered, the corresponding method will be re-executed, such as:

<div id="app">
  <p>{{ name }}</p>
  <p>{{ reversedMsg() }}</p>
</div>
const vm = new Vue({
  el: &#39;#app&#39;,
  data: {
    msg: &#39;Hello&#39;,
    name: &#39;shanshan&#39;
  },
  methods: {
    reversedMsg: function () {
      console.log(&#39;方法执行啦&#39;);
      return this.msg.split(&#39;&#39;).reverse().join(&#39;&#39;);
    }
  }
})
vm.name = &#39;duyi&#39;;

In the above example, we can see that once the value of name is changed, the page will be re-rendered. At this moment The method execution string is printed in the console, which means that the reversedMsg function has been executed, but we do not need this method to be executed, because the changed data has nothing to do with this function. If the logic within this function is very complex, then In terms of performance, it is also a consumption.

But if you use calculated attributes, there will be no such phenomenon, such as:

const vm = new Vue({
  el: '#app',
  data: {
    msg: 'Hello',
    name: 'shanshan'
  },
  computed: {
    reversedMsg: function () {
      console.log('计算执行啦');
      return this.msg.split('').reverse().join('');
    }
  }
})
vm.name = 'duyi';

You can see at this time that when the data name is reassigned, the calculated attributes are not executed. Therefore, the most essential difference between calculated properties and methods is: Computed properties are cached based on responsive dependencies. The value of a calculated property is always stored in the cache, as long as the data it depends on does not change. Each time a computed property is accessed, the cached result is returned immediately instead of executing the function again. The method is to trigger re-rendering every time, and calling the method will always execute the function again.

So, why do you need caching?

Suppose we have a calculated attribute A, which needs to traverse a huge array and do huge calculations. Then we need to use this calculated attribute A. If there is no cache, we will execute the function of A again, so the performance overhead becomes very large.

In-depth calculated properties

In addition to being written as a function, calculated properties can also be written as an object. There are two properties in the object, getter&setter, both of which are is a function, written as follows:

const vm = new Vue({
  el: '#app',
  computed: {
    fullName: {
      getter () {
         // 一些代码
      },
      setter () {
         // 一些代码
      }
    }
  }
})

getter reading

In the previous step, we directly wrote the calculated property as a function, which is the getter function. In other words, calculated properties only have getters by default. This of the getter is automatically bound to the Vue instance.

When will it be executed?

When we get a calculated attribute, the get function will be executed.

const vm = new Vue({
  el: '#app',
  data: {
    msg: 'Hello'
  },
  computed: {
    reversedMsg: {
      getter () {
        return this.msg.split('').reverse().join('');
      }
    }
  }
})

setter setting

Optional, the set function will be executed when reassigning a value to the calculated property. Parameter: the value to be reset. This of the setter is automatically bound to the Vue instance.

const vm = new Vue({
  el: '#app',
  data: {
    msg: 'Hello',
    firstStr: ''
  },
  computed: {
    reversedMsg: {
      getter () {
        return this.msg.split('').reverse().join('');
      },
      setter (newVal) {
        this.firstStr = newVal[0];
      }
    }
  }
})

It should be noted that even if a value is assigned to a calculated property, the calculated property will not change. To repeat, the calculated property will only be recalculated when the dependent responsive property changes.

Practice_Name filtering

personArr: [
  { 
    name: '', 
    src: '.jpg', 
    des: '颈椎不好', 
    sex: 'm', 
    id: '056482' 
  },
  { 
    name: '', 
    src: '.jpg', 
    des: '我是谁', 
    sex: 'f', 
    id: '157894' 
  },
  { 
    name: '', 
    src: '.jpg', des: '我长得很好看', 
    sex: 'f', 
    id: '2849245' 
  },
  { 
    name: '', 
    src: '.jpeg', 
    des: '你没有见过陌生的脸', 
    sex: 'm', 
    id: '348515' 
  },
  { 
    name: '', 
    src: '.jpeg', 
    des: '瓜皮刘', 
    sex: 'm', 
    id: '478454'
  }
]

Practice_Select all products

courseList: [
  {
    poster: '.jpg',
    title: '',
    price: 1299,
    cart: 1,
    id: 0
  },
  {
    poster: '.jpg',
    title: '',
    price: 1148,
    cart: 1,
    id: 1595402664708
  },
  {
    poster: '.jpg',
    title: '',
    price: 1,
    cart: 1,
    id: 1596305473062
  },
  {
    poster: '.jpg',
    title: '',
    price: 1,
    cart: 1,
    id: 1595413512182
  },
  {
    poster: '.jpg',
    title: '',
    price: 12798,
    cart: 1,
    id: 1596302161181
  },
  {
    poster: '.jpg',
    title: '',
    price: 1,
    cart: 1,
    id: 1596300025301,
  },
]

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

The above is the detailed content of Learn how to use computed properties in Vue in one article. For more information, please follow other related articles on the PHP Chinese website!