[JavaScript知识库]计算属性，过滤器，侦听器

计算属性

计算属性是基于它们的响应式依赖进行缓存的。
只在相关响应式依赖发生改变时它们才会重新求值。
这就意味着只要 message 还没有发生改变，多次访问 reversedMessage 计算属性会立即返回之前的计算结果，而不必再次执行函数。

<div id="example">
  <p>Original message: "{{ message }}"</p>
  <p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>

var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  computed: {
// 声明了一个计算属性 reversedMessage。我们提供的函数将用作属性 vm.reversedMessage 的 getter 函数
    reversedMessage () {
      // this 指向 vm 实例
      return this.message.split('').reverse().join('')
    }
  }
})

与使用methods里的函数相比，每当触发重新渲染时，methods里的函数会再次执行，因为没有缓存。

侦听器

侦听器：
一个对象，键是需要观察的表达式，值是对应回调函数，也可以是方法名，或者包含选项的对象。
Vue 实例将会在实例化时调用 $watch()，遍历 watch 对象的每一个 property。

  watch: {
    // 值可以是一个回调函数
    a: function (val, oldVal) { /* ... */ },
    // 值还可以是一个方法名
    b: 'someMethod',
    // 值还可以是一个对象
    c: {
      handler: function (val, oldVal) { /* ... */ },
      deep: true,		// 回调会在任何被侦听的对象的 property 改变时被调用, 不论其被嵌套多深
      immediate: true	// 回调将会在侦听开始之后被立即调用, 而不是侦听的数据更改后才会调用
    }
  }

// deep
// 默认情况下, 侦听器侦听对象只侦听引用的变化, 只有在给对象赋值时它才能被监听到。
// 所以需要使用deep选项, 让其可以发现对象内部值的变化, 将deep的值设置为true, 那么无论该对象被嵌套的有多深, 都会被侦听到。

过滤器

过滤器可以用在两个地方：双花括号插值和 v-bind 表达式。

<!-- 在双花括号中 -->
<!-- 过滤器函数总将表达式的值作为第一个参数。本例, capitalize 过滤器函数将 message 的值作为第一个参数。 -->
{{ message | capitalize }}

<!-- 在 `v-bind` 中 -->
<div v-bind:id="rawId | formatId"></div>

<!-- 过滤器可以串联 -->
{{ message | filterA | filterB }}

<!-- filterA 被定义为接收三个参数的过滤器函数。 -->
<!-- 其中 message 的值作为第一个参数,普通字符串 'arg1' 作为第二个参数, 表达式 arg2 的值作为第三个参数. -->
{{ message | filterA('arg1', arg2) }}

filters: {
  capitalize (value) {
    if (!value) return ''
    return value.toString().charAt(0).toUpperCase() + value.toString().slice(1)
  }
}

this.$watch

// 三个参数: 一参为被侦听的数据, 二参为数据改变时callBack, 三参可选为设置的选项对象
vm.$watch('msg', 
  function () {
    // 干了点事儿
  }, 
  {
    deep: Boolean, 
    immediate: Boolean
  }
)

// 当 model 发生改变时,为表单设置值
this.$watch('model', () => {
  this.model && this.form.setFieldsValue(pick(this.model, fields))
})

// 当监听的数据的在初始不确定, 由多个数据得到时, 可以将第一个参数写成函数类型
vm.$watch(function () {
  // 表达式 this.a + this.b 每次得出一个不同的结果时该函数都会被调用
  // 这就像监听一个未被定义的计算属性
  return this.a + this.b
}, /**参数和上面一致*/)

计算属性vs侦听器

计算属性擅长处理的是：多个数据影响一个数据。
侦听器擅长处理的是：一个数据影响多个数据。

计算属性的应用场景是计算的内容依赖多个属性，每次依赖项发生变化时，都会重新缓存结果。
在数据变化频率比较高，执行异步或者开销较大的操作时，适合使用侦听器。
在侦听器中可以执行异步，但是计算属性中不可以。
computed和watch的使用场景
侦听器详解