vue 计算属性computed

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/m0_37068028/article/details/79812916

vue 计算属性

下例中，getName方法调用可以起到与使用计算属性name相同的作用

new Vue({
  el: '#root',
  template: `<div>
  <div>Name: {{name}}</div>
  <div>Name: {{getName()}}</div>
  <div>Number: {{number}}</div>
  <div><input v-model="number" /></div>
  </div>`,
  data () {
    return {
      fisrtName: 'hello',
      lastName: 'world',
      number: 0
    }
  },
  computed: {
    name () {
      console.log('new name')
      return `${this.fisrtName} ${this.lastName}`
    }
  },
  methods: {
    getName () {
      console.log('get name')
      return `${this.fisrtName} ${this.lastName}`
    }
  }
})

使用双向绑定，当input框更改number时，getName方法也会重新调用，而computed中的name方法则不会，由于更改number值使组件更新，导致getName方法重新执行。
当computed中的name方法的监听的firstName与lastName值发生改变时，name方法会重新调用，当即会做缓存起来，当改变number值时，name方法依旧不会执行。