vue入门——计算属性和侦听属性

1 计算属性

  在前边有讲到双括号表达式中，可以使用 JavaScript 表达式，但是这种表达式会让我们的模板变得复杂，降低代码的可读性，且难以维护，例如：

<div id="example">
  {{ message.split('').reverse().join('') }}
</div>

  为了解决这个问题，我们可以使用计算属性：

<div id="app">
    <p>{{ message }}</p>
    <p>{{ reversedMessage }}</p>
</div>
<script>
    // vm  实例
    const vm = new Vue({
        el : '#app', // element
        data : { // model
            message : 'Hello world',
        },
        computed: {
            reversedMessage: function () {
                // `this` 指向 vm 实例
                return this.message.split(' ').reverse().join(',')
            }
        }
    })
</script>

• 计算属性和方法的区别

  通过上边的例子，可能你已经发现，将 reversedMessage 定义为一个方法， 不是一样的效果吗？的确是这样，如果定义为一个方法，最终展示的效果是一样的；区别在于，计算属性是基于它们的依赖进行缓存的，只有依赖发生变化时，才会重新计算求值；也就是说如果 message 没有发生变化，计算属性每次能够直接返回正确的结果，而方法每次都会重新计算。

2 侦听属性

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

<script>
var watchExampleVM = new Vue({
  el: '#watch-example',
  data: {
    question: '',
    answer: 'I cannot give you an answer until you ask a question!'
  },
  watch: {
    // 如果 `question` 发生改变，这个函数就会运行
    question: function (newQuestion, oldQuestion) {
      this.answer = 'Waiting for you to stop typing...'
      this.debouncedGetAnswer()
    }
  },
  created: function () {
    // `_.debounce` 是一个通过 Lodash 限制操作频率的函数。
    // 在这个例子中，我们希望限制访问 yesno.wtf/api 的频率
    // AJAX 请求直到用户输入完毕才会发出。想要了解更多关于
    // `_.debounce` 函数 (及其近亲 `_.throttle`) 的知识，
    // 请参考：https://lodash.com/docs#debounce
    this.debouncedGetAnswer = _.debounce(this.getAnswer, 500)
  },
  methods: {
    getAnswer: function () {
      if (this.question.indexOf('?') === -1) {
        this.answer = 'Questions usually contain a question mark. ;-)'
        return
      }
      this.answer = 'Thinking...'
      var vm = this
      axios.get('https://yesno.wtf/api')
        .then(function (response) {
          vm.answer = _.capitalize(response.data.answer)
        })
        .catch(function (error) {
          vm.answer = 'Error! Could not reach the API. ' + error
        })
    }
  }
})
</script>

  上边的代码，监听了 question ，当发生变化时，调用 getAnswer 方法，发送一个异步请求；但是，使用 watch 监听，只要对应的属性发生了变化，就会调用相关的方法，因此，如果是发生请求到后台，压力会比较大，因此，一般会配置 lodash 一起使用，lodash 主要作用在于，设置一段时间延迟，再去执行相关方法。

• watch: 监听的方法，一般由两个参数 (newValue, oldValue)；

• 监听对象的某个属性变化：

  data() {
  	a: {
  		b: ''
  	}
  },
  watch() {
  	'a.b': function(val, oldVal) {
  	}
  }
  

  深度监听，有时候我们监听对象属性的变化，但是，属性特别多，我们只需要某一个属性变化，就认为对象变化，可以使用深度监听

  watch() {
  	a: {
  		handler (val, oldVal) {
  			//...
  		},
  		deep: true
  	}
  }
  

• 计算属性和侦听属性的区别：

  根据上边的介绍，好像计算属性和侦听属性类似，那它们的区别在哪呢？计算属性具有缓存，可以计算多个变量；而侦听属性，只能侦听一个特定的值，适用于当一个值发生变化时，执行相关的操作。