June 18, 2021 - Using watch in VueJS

VueJS

While computed properties are more appropriate in most cases, there are times when a custom watcher is necessary. That’s why Vue provides a more generic way to react to data changes through the watch option. This is most useful when you want to perform asynchronous or expensive operations in response to changing data. VueJS Watchers

html

<div id="watch_example">
  Killograms : <input type="text" v-model="kilograms">
  Pounds : <input type="text" v-model="pounds">
</div>

javascript

var vm = new Vue({
  el: '#watch_example',
  data: {
    kilograms : 0,
    pounds: 0
  },
  methods: {
  },
  computed :{
  },
  watch : {
    kilograms: function(val) {
      this.kilograms = val;
      this.pounds = val * 0.453592;
    }
  }
});

June 18, 2021 - Using computed properties in VueJS

VueJS

In-template expressions are very convenient, but they are meant for simple operations. Putting too much logic in your templates can make them bloated and hard to maintain. That’s why for any complex logic, you should use a computed property. VueJS Computed

Example of good use of computed properties

<div id="computed_example">
  First Name : <input type="text" v-model="firstName">
  Last Name : <input type="text" v-model="lastName">
  Full Name : <input type="text" v-model="fullName">
</div>

Example of bad use of computed properties. Avoid too much logic in the template for example or this becomes increasingly verbose

<div id="computed_example">
  First Name : <input type="text" v-model="firstName">
  Last Name : <input type="text" v-model="lastName">
  Full Name : <input type="text" v-model="this.firstName + ' ' + this.lastName">
</div>

javascript

var vm = new Vue({
  el: '#computed_example',
  data: {
    firstName : "John",
    lastName: "Doe"
  },
  methods: {
  },
  computed :{
    fullName: function () {
        return this.firstName + ' ' + this.lastName
    }
  },
});