Computed properties and listeners details

1. Calculated properties

Expressions in templates are very convenient, but they are designed primarily for simple calculations. Putting too much logic in a template can make it cumbersome and difficult to maintain.

For example:

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

At this point, the template is no longer just a simple declarative logic. You have to look at it for a while to realize that what we want here is to display the reverse string of the variable message . It becomes even more difficult to handle when you want to include this flipped string in multiple places in your template.

So, for any complex logic, you should use computed properties.

1.1 Basic Example

<div id="example">
  <p>Original message: "{{ message }}"</p>
  <p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>
var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  computed: {
    // Computed property getter
    reversedMessage: function () {
      // `this` refers to the vm instance return this.message.split('').reverse().join('')
    }
  }
})

result:

Original message: "Hello"

Computed reversed message: "olleH"

Here we declare a computed property reversedMessage . The function we provide will be used as the getter function for property vm.reversedMessage :

console.log(vm.reversedMessage) // => 'olleH'
vm.message = 'Goodbye'
console.log(vm.reversedMessage) // => 'eybdooG'

You can open the browser console and modify vm in the example yourself. The value of vm.reversedMessage always depends on the value of vm.message .

You can bind computed properties in templates just like binding normal property . Vue knows vm.reversedMessage depends on vm.message , so when vm.message changes, all bindings that depend on vm.reversedMessage are also updated. And the best part is that we’ve created this dependency in a declarative way: the computed property getter has no side effects, which makes it easier to test and understand.

1.2 Computed Property Cache vs Method

You may have noticed that we can achieve the same effect by calling methods in expressions:

<p>Reversed message: "{{ reversedMessage() }}"</p>
// In component methods: {
  reversedMessage: function () {
    return this.message.split('').reverse().join('')
  }
}

We can define the same function as a method instead of a computed property. The end result is indeed exactly the same either way. However, the difference is that computed properties are cached based on their reactive dependencies. They are only re-evaluated when the associated reactive dependencies change. This means that as long as message has not changed, multiple accesses to reversedMessage computed property will immediately return the previously computed result without having to execute the function again.

This also means that the following computed property will no longer update, because Date.now() is not a reactive dependency:

computed: {
  now: function () {
    return Date.now()
  }
}

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

Why do we need caching? Suppose we have a computationally expensive property A that requires traversing a huge array and doing a lot of calculations. We may then have other computed properties that depend on A Without caching, we would inevitably execute A 's getter multiple times! If you don't want caching, use methods instead.

1.3 Computed properties vs. monitored properties

Vue provides a more general way to observe and respond to changes in data on Vue instance: listening to properties. When you have some data that needs to change when some other data changes, it's easy to abuse watch - especially if you've used AngularJS before. However, it is often better to use computed properties instead of imperative watch callbacks.

Consider this example:

<div id="demo">{{ fullName }}</div>
var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar',
    fullName: 'Foo Bar'
  },
  watch:
    firstName: function (val) {
      this.fullName = val + ' ' + this.lastName
    },
    lastName: function (val) {
      this.fullName = this.firstName + ' ' + val
    }
  }
})

The above code is imperative and repetitive. Compare this to the computed property version:

var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar'
  },
  computed: {
    fullName: function () {
      return this.firstName + ' ' + this.lastName
    }
  }
})

Much better, isn't it?

1.4 Computed property setters

Computed properties have only a getter by default, but you can also provide a setter if needed:

// ...
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]
    }
  }
}
// ...

Now when you run vm.fullName = 'John Doe' , setter will be called and vm.firstName and vm.lastName will be updated accordingly.

2. Listener

While computed properties are more appropriate in most cases, there are times when a custom listener is necessary. That’s why Vue provides a more general way to respond to changes in data through the watch option. This approach is most useful when you need to perform asynchronous or expensive operations when data changes.

For example:

<div id="watch-example">
  <p>
    Ask a yes/no question:
    <input v-model="question">
  </p>
  <p>{{ answer }}</p>
</div>
<!-- Because the ecosystem of AJAX libraries and general tools is already quite rich, Vue core code is not repeated-->
<!-- These features are provided to keep things lean. This also gives you the freedom to choose tools you are more familiar with. -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lodash.min.js"></script>
<script>
var watchExampleVM = new Vue({
  el: '#watch-example',
  data: {
    question: '',
    answer: 'I cannot give you an answer until you ask a question!'
  },
  watch:
    // If `question` changes, this function will run question: function (newQuestion, oldQuestion) {
      this.answer = 'Waiting for you to stop typing...'
      this.debouncedGetAnswer()
    }
  },
  created: function () {
    // `_.debounce` is a function that limits the frequency of operations via Lodash.
    // In this example, we want to limit the frequency of accessing yesno.wtf/api // The AJAX request will not be made until the user has finished typing. To learn more about // the `_.debounce` function (and its cousin `_.throttle`),
    // Please refer to: https://lodash.com/docs#debounce
    this.debouncedGetAnswer = _.debounce(this.getAnswer, 500)
  },
  methods: {
    getAnswer: function () {
      if (this.question.indexOf('?') === -1) {
        this.answer = 'Questions usually contain a question mark. ;-)'
        return
      }
      this.answer = 'Thinking...'
      var vm = this
      axios.get('https://yesno.wtf/api')
        .then(function (response) {
          vm.answer = _.capitalize(response.data.answer)
        })
        .catch(function (error) {
          vm.answer = 'Error! Could not reach the API. ' + error
        })
    }
  }
})
</script>

result:

Ask a yes/no question:

I cannot give you an answer until you ask a question!

In this example, using the watch option allows us to perform an asynchronous operation (accessing an API), limit how often we perform that operation, and set intermediate status before we get the final result. These are things that computed properties cannot do.

This is the end of this article about the details of calculated properties and listeners. For more related calculated properties and listeners, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope everyone will support 123WORDPRESS.COM in the future!