computed

Do not use computed

Simple string splicing

import Vue from 'vue'

new Vue({
  el: '#root',
  template: `
    <div>
      <span>Name: {{firstName + ' ' + lastName}}</span>
    </div>
  `,
  data: {
    firstName: 'Jokcy',
    lastName: 'Lou'
  }
})

Using computed

new Vue({
  el: '#root',
  template: `
    <div>
      <span>Name: {{name}}</span>
    </div>
  `,
  data: {
    firstName: 'Jokcy',
    lastName: 'Lou'
  },
  computed: {
    name () {
      return `${this.firstName} ${this.lastName}`
    }
  }
})

Using methods

The display results are the same as computed

new Vue({
  el: '#root',
  template: `
    <div>
      <span>Name: {{name}}</span>
      <span>Name: {{getName()}}</span>
    </div>
  `,
  data: {
    firstName: 'Jokcy',
    lastName: 'Lou'
  },
  computed: {
    name () {
      return `${this.firstName} ${this.lastName}`
    }
  },
  methods: {
    getName () {
      return `${this.firstName} ${this.lastName}`
    }
  }
})

The Benefits of Using Computer

When we change the number, the whole application will be re-rendered, and the vue will be re-rendered into the dom by the data. At this point, if we use the getName method, with rendering, the method will also be called, and computer will not recalculate, thus the performance overhead is relatively small. When new values need a lot of computation to get, caching is of great significance.

If the data on which computed depends changes, the computed attribute will be recalculated and cached; when other data is changed, the computed attribute will not be recalculated, thus improving performance.

When the value we get needs to be processed, we can use computed.

import Vue from 'vue'

new Vue({
  el: '#root',
  template: `
    <div>
      <p>Name: {{name}}</p>
      <p>Name: {{getName()}}</p>
      <p>Number: {{number}}</p>
      <p><input type="text" v-model="number"/></p>
      <p>FirsName: <input type="text" v-model="firstName"/></p>
      <p>LaseName: <input type="text" v-model="lastName"/></p>
    </div>
  `,
  data: {
    firstName: 'Jokcy',
    lastName: 'Lou',
    number: 0
  },
  computed: {
    name () {
      console.log('new name')
      return `${this.firstName} ${this.lastName}`
    }
  },
  methods: {
    getName () {
      console.log('getName invoked')
      return `${this.firstName} ${this.lastName}`
    }
  }
})

Operation of computed settings

Through the set method of computed, the operation of setting can be carried out.

For example, by changing the value of name, you can also change the values of firstName and lastName from the computed attribute name.

This is not recommended. Generally, computed attribute data is composed of new data based on multiple data. It is easy to combine, but it is not easy to disassemble and reset.

template: `
    <div>
      <p>Name: <input type="text" v-model="name"/></p>
    </div>
  `,
  data: {
    firstName: 'Jokcy',
    lastName: 'Lou',
  },
  computed: {
    name: {
      get () {
        console.log('new name')
        return `${this.firstName} ${this.lastName}`
      },
      set (name) {
        const names = name.split(' ')
        this.firstName = names[0]
        this.lastName = names[1]
      }
    }
  },

watch

For example, listen for firstName data and perform some operations based on the new values that are changed.

new Vue({
  template: `
    <div>
      <p>FullName: {{fullName}}</p>
      <p>FirsName: <input type="text" v-model="firstName"/></p>
    </div>
  `,
  data: {
    firstName: 'Jokcy',
    lastName: 'Lou',
    fullName: ' '
  },
  watch: {
    firstName (newName, oldName) {
      this.fullName = newName + ' ' + this.lastName
    }
  }
})

Note: In the previous example, the initial fullName is not valueable and will only be displayed when the data changes. Because the watch method will not be executed by default, it will only be executed when the data changes are monitored.

immerdiate attribute

By declaring that the immediate option is true, you can immediately execute a handler.

watch: {
    firstName: {
      handler (newName, oldName) {
        this.fullName = newName + ' ' + this.lastName
      },
      immediate: true
    }
  },

watch is not suitable for displaying a certain data and data assembly, etc. watch is used to monitor data changes and perform certain command operations (sending data requests to the background)

deep attribute

When using deep, when we change the value of obj.a, watch can't listen for data changes. By default, handler only listens for changes in attribute references, that is, only listens for one layer, but it can't change the attributes inside the object.

new Vue({
  template: `
    <div>
      <p>Obj.a: <input type="text" v-model="obj.a"/></p>
    </div>
  `,
  data: {
    obj: {
      a: '123'
    }
  },
  watch: {
    obj: {
      handler () {
        console.log('obj.a changed')
      },
      immediate: true
      // deep: true
    }
  }
})

By using deep: true for in-depth observation, when we listen for obj, we will traverse the attributes layer under obj, adding listening events. In this way, the performance overhead will increase, as long as any attribute value in obj is modified, handler will be triggered.

How to optimize?

In strings, write obj deep property calls, vue parses layer by layer, finds a, and listens.

watch: {
    'obj.a': {
      handler () {
        console.log('obj.a changed')
      },
      immediate: true
      // deep: true
    }
  }

Be careful

Do not modify the values of the data you depend on, especially computed, in computer or watch; if you do, you may trigger a wireless loop.