vue的计算属性和侦听器

计算属性

理解

1、computed用来监控自己定义的变量，该变量不在data里面声明，直接在computed里面定义，然后就可以在页面上获取到并进行相应的数据处理

2、computed里可以完成各种复杂的逻辑，包括运算、函数调用等，只要最终返回一个结果就可以。

案例：

<template>
    <div @click='add'> + </div>
</template>

data(){
    return{
        num1: 11,
        num2: 33
    }
  },
  computed:{
      total:function(){
      return this.num1 + this.num2 //总分会随着num1，num2的变化而重新计算
    },
  },
  methods:{
      add(){
          this.num1++
      }
  }

上面案例中total返回的是num1和num2的总和，且每次点击加号时total的值都会随着num1的变化而变化，由此可知计算属性可以依赖多个Vue 实例的数据，只要其中任一数据变化，计算属性就会重新执行，视图也会更新。

计算属性的setter

计算属性默认只有 getter ，不过在需要时你也可以提供一个 setter ：

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]
    }
  }
}

现在再运行 vm.fullName = 'John Doe' 时，setter 会被调用，vm.firstName 和 vm.lastName 也会相应地被更新。

侦听器 watch

虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的侦听器。这就是为什么 Vue 通过 watch 选项提供了一个更通用的方法，来响应数据的变化。
当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的

例如：

<div id="watch-example">
  <p>
    Ask a yes/no question:
    <input v-model="question">
  </p>
  <p>{{ answer }}</p>
</div>

watch: {
    // 如果 `question` 发生改变，这个函数就会运行
    question: function (newQuestion, oldQuestion) {
      this.answer = 'Waiting for you to stop typing...'
    }
  },

当我们监听的数据发生变化时，相应的函数就会运行，这个函数的第一个参数是变化的值，第二个参数是原来的值