❮ Vue3 Directory Structure Vue3 Tutorial ❯

Vue3 Computed Properties

Computed property keyword: computed.

Computed properties are very useful when dealing with complex logic.

Consider the following example of reversing a string:

Example 1

<div id="app">
  {{ message.split('').reverse().join('') }}
</div>

In Example 1, the template becomes quite complex and difficult to understand.

Next, let's look at an example using computed properties:

Example 2

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue Test Example - tutorialpro.org(tutorialpro.org)</title>
<script src="https://cdn.staticfile.org/vue/3.0.5/vue.global.js"></script>
</head>
<body>
<div id="app">
  <p>Original String: {{ message }}</p>
  <p>Reversed String: {{ reversedMessage }}</p>
</div>

<script>
const app = {
  data() {
    return {
      message: 'tutorialpro!!'
    }
  },
  computed: {
    // Computed property getter
    reversedMessage: function () {
      // `this` points to the vm instance
      return this.message.split('').reverse().join('')
    }
  }
}

Vue.createApp(app).mount('#app')
</script>
</body>
</html>

In Example 2, a computed property reversedMessage is declared.

The provided function will serve as the getter for the property vm.reversedMessage.

vm.reversedMessage depends on vm.message, and will update whenever vm.message changes.

computed vs methods

We can use methods instead of computed properties, and both will achieve the same effect. However, computed properties are cached based on their dependencies, and will only re-evaluate when those dependencies change. In contrast, methods will always execute the function when re-rendering occurs.

Example 3

methods: {
  reversedMessage2: function () {
    return this.message.split('').reverse().join('')
  }
}

Using computed properties can be more performant, but if you do not want caching, you can use methods.

computed setter

Computed properties default to only having a getter, but you can also provide a setter when needed:

Example 4

const app = {
  data() {
    return {
      name: 'Google',
      url: 'http://www.google.com'
    }
  },
  computed: {
    site: {
      // getter
      get: function () {
        return this.name + ' ' + this.url
      },
      // setter
      set: function (newValue) {
        var names = newValue.split(' ')
        this.name = names[0]
        this.url = names[names.length - 1]
      }
    }
  }
}
vm = Vue.createApp(app).mount('#app')
document.write('name: ' + vm.name);
document.write('<br>');
document.write('url: ' + vm.url);
document.write('<br>------ Update Data ------<br>');
// Calling the setter, vm.name and vm.url will be updated accordingly
vm.site = 'tutorialpro.org https://www.tutorialpro.org';
document.write('name: ' + vm.name);
document.write('<br>');
document.write('url: ' + vm.url);

From the example, when vm.site = 'tutorialpro.org http://www.tutorialpro.org'; is executed, the setter is called, and vm.name and vm.url are updated accordingly.

❮ Vue3 Directory Structure Vue3 Tutorial ❯