vue之计算属性和侦听器

计算属性和侦听器

为什么需要计算属性，在Vue的模板解析其实有相当多的不便，只能解析挂载到vm的属性，这些东西要吗是data通过代理实现，但是如果需要对数据进行复杂的处理，那么在模板语法用javascript是非常不便的。

如果你学过react你就知道，其实计算属性相当于在rander函数内定义的变量，这个变量也是通过表达式计算的结果，可能包括state的属性，每次渲染（调用rander函数）的时候都肯定会重新计算其中的值。这其实也在一方面说明了为什么侦听属性和方法会有缓存的区别。

说了这么多那，写一个计算属性：

export default {
  data() {
    return {name: 'zix'}
  },
  computed: {
    //定义一个计算属性
    reversedName() {
      return this.name.split('').reserse().join('')
    }
  },
  //使用
  template: `<div>
    name: {{name}} => reversedName: {{reversedName}}
  </div>`
}

计算属性默认只有getter方法，如果想要对其改变值，可以用setter，这里有一个案例

export default {
  data() {
    return {firstName: 'Can', lastName: 'Wu'}
  },
  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]
    }
  }
  },
  //使用
  template: `<div>
    <div>firstName: <input v-model="firstName" /></div>
    <div>lastName: <input v-model="lastName" /></div>
    <div>fullName: <input v-model="fullName" /></div>
  </div>`
}

注意计算属性的痛点在于一定要返回一个值，然后再使用，可是在很多时候数据是需要从后端接口取到，这就
涉及到异步操作。这个时候watch侦听器就显得很重要了。

export default {
  data() {
    return {name: 'zix'}
  },
  computed: {
    //定义一个计算属性
    reversedName() {
      return this.name.split('').reserse().join('')
    }
  },
  //使用
  template: `<div>
    name: {{name}} => reversedName: {{reversedName}}
  </div>`,
  watch: {
    //这里如果name属性不用侦听器而用computed显然不太合适，应为computed的返回值显得无用
    name(fresh, stale) {
      //进行异步操作
    }
  }
}