本文共 2121 字，大约阅读时间需要 7 分钟。

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

一、filters\filter（过滤器）

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

局部过滤器

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）

基础示例：

    
  
     
Original message: "{{ message }}"
  
     
Computed reversed message: "{{ reversedMessage }}"
    

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#侦听器

转载地址：https://www.cnblogs.com/lijianyi/p/14602749.html 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！