Vue filtersfilter、computed、methods、watch对比

熟悉Vue的人对filtersfilter、computed、methods、watch都不陌生，它们四者都可以用来处理数据，那么它们究竟有什么差异呢？

一、filtersfilter（过滤器）

1、用于一些常见的文本格式化（格式化数据）

2、过滤器函数总接收表达式的值 (之前的操作链的结果) 作为第一个参数（必须要有参数，没有参数过滤就没有任何意义）

3、不能直接访问this（如果一定要访问，可以定义一个全局变量在created（）方法中指向this，不过不推荐此做法）

4、不会缓存格式化的数据

5、有全局过滤器（Vue.filter）和局部过滤器（filters）（当全局过滤器和局部过滤器重名时，会采用局部过滤器）

6、在调用时就会触发（调用频次高）

7、支持链式调用（增加了组合拼接的能力，可以在项目架构层面定义一堆基础的、简单的filter，按需在组件内组合适用）

8、复用性高（可以在组件外抽象）

9、一般用于模板渲染

10、适用于格式化输出场景（比如日期格式化）

11、得到的值需要return出去

过滤器可以用在两个地方：

双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。

过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示：

<!-- 在双花括号中 -->
{{ message | capitalize }}

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

局部过滤器

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

全局过滤器

Vue.filter('capitalize', function (value) {
  if (!value) return ''
  value = value.toString()
  return value.charAt(0).toUpperCase() + value.slice(1)
})

new Vue({
  // ...
})

官方详解：https://cn.vuejs.org/v2/guide/filters.html#ad

二、computed（计算属性）

1、处理任何复杂逻辑（逻辑相关）

2、具有缓存能力（基于响应式依赖进行缓存）

3、调用频次低（只在相关响应式依赖发生改变时才会重新求值，对系统消耗小）

4、复用性低（依赖于组件，难以抽取成独立逻辑）

5、应用范围广泛（可以应用在其他computed、methods、生命周期函数、模板）

6、可以使用this

7、基于已有的属性（通过现有的属性计算出一个新的属性）

8、只能在组件内部或通过mixins对象定义

9、适用于复杂的数据转换、统计等场景。

10、默认只有 getter，不过在需要时你也可以提供一个 setter

11、得到的值需要return出去

12、参数传递（闭包传值：https://www.jianshu.com/p/95606f32c5f5）

基础示例：

<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: {
    // 计算属性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 实例
      return this.message.split('').reverse().join('')
    }
  }
})

官方详解：https://cn.vuejs.org/v2/guide/computed.html#计算属性

三、methods（方法）

1、不可以使用箭头函数

2、在调用时就会触发（调用频次高）

var vm = new Vue({
  data: { a: 1 },
  methods: {
    plus: function () {
      this.a++
    }
  }
})
vm.plus()
vm.a // 2

四、watch(侦听器)

1、当需要在数据变化时执行异步或开销较大的操作时

2、允许我们执行异步操作 (访问一个 API)，限制我们执行该操作的频率，并在我们得到最终结果前，设置中间状态。（这些都是计算属性无法做到的）

3、监控已有属性（一旦属性发生了改变就去自动调用对应的方法）

4、不会缓存数据（每次打开页面都会重新加载一次）

5、一般使用较少（计算属性在大多数情况下更合适）

官方详解：https://cn.vuejs.org/v2/guide/computed.html#侦听器