vue 计算属性VS方法和侦听器

计算属性

vue的计算属性就是当其依赖的属性值发生改变的时候，这个属性值也会自动发生更新，和它相关的DOM部分也会同步发生更新。

<div id="app">
  <div>姓: <input type="text" v-model="firstname"></div>
  <div>名: <input type="text" v-model="lastname"></div>
  <div>姓名: {{fullname}}</div>
  <div>姓名: {{fullname}}</div>
</div>

new Vue({
  el: '#app',
  data: {
    firstname: '',
    lastname: ''
  },
  computed: {
    fullname: function() {
      return this.firstname + this.lastname
    }
  }
})

这时不管是改变firstname或者lastname，fullname的值都会自动更新。
计算属性是基于它们的响应式依赖进行缓存的，只有相关响应式依赖发生变化时才会重新求值。所以即使页面中有多个地方都用到fullname，但是firstname和lastname没有改变，计算属性会立即返回之前的计算结果，而不必再次执行函数。

计算属性的 setter

计算属性默认只有getter，不过我们可以在需要的时候提供一个setter。

fullname: {
  get: function() {
    return this.firstname + this.lastname
  },
  set: function(val) {
    this.firstname = val.split('')[0]
    this.lastname = val.split('')[1]
  }
}

方法

<div id="app">
  <div>姓: <input type="text" v-model="firstname"></div>
  <div>名: <input type="text" v-model="lastname"></div>
  <div>姓名: {{fullname()}}</div>
  <div>姓名: {{fullname()}}</div>
</div>

new Vue({
  el: '#app',
  data: {
    firstname: '',
    lastname: ''
  },
  methods: {
    fullname: function() {
      console.log('eee');
      return this.firstname + this.lastname
    }
  }
})

定义为方法，结果虽然是相同的，但是如果页面有多个地方都用到fullname的时候，会重复运行函数。

侦听器

<div id="app">
  <div>姓: <input type="text" v-model="firstname"></div>
  <div>名: <input type="text" v-model="lastname"></div>
  <div>姓名: {{fullname}}</div>
</div>

new Vue({
  el: '#app',
  data: {
    firstname: '',
    lastname: '',
    fullname: ''
  },
  watch: {
    firstname: function(val) {
      console.log(val);
      this.fullname = val + this.lastname
    },
    lastname: function(val) {
      console.log(val);
      this.fullname = this.firstname + val
    }
  }
})

如果是用侦听器的写法，需要监听多个属性的改变，这样看代码会显得很重复。