[VUE] filter过滤器、计算属性、methods方法的区别

参考资料：

https://blog.csdn.net/kekeChris/article/details/104758106/

https://blog.csdn.net/weixin_39152200/article/details/107174590

https://www.cnblogs.com/panax/p/10824594.html

filter过滤器

vue 对数据提供一个 filter 的处理器，用以在不改变data 的情况下 输出前端需要的数据格式。

定义过滤器有两种方式，第一种是全局过滤器，我们可以直接在vue对象上使用filter方法注册过滤器，这种全局注册的过滤器在任何一个组件内都可以使用。第二种则是组件内部的过滤器，注册组件内部过滤器则只能在当前组件内使用，接下来我们使用这两种方式注册过滤器函数。

全局过滤器

Vue.filter('formatTime', function (value) {
  const date = new Date(val);
  const hour = date.getHours();
  const minutes = date.getMinutes();
  const seconds = date.getSeconds();
  return `${hour} : ${minutes} : ${seconds}`;

})

组件内部的过滤器

<template>
  <span>{{ time | formatTime }}</span>
</template>

<script>
export default {
  filters: {
    formatTime(value) {
      // 过滤器的值作为过滤器函数的参数
      const date = new Date(value);
      const hour = date.getHours();
      const minutes = date.getMinutes();
      const seconds = date.getSeconds();
      return `${hour} : ${minutes} : ${seconds}`;
    }
  },
  data() {
    return {
      time: '2024-01-01'
    }
   },
  methods: {}
}
</script>

<style lang="scss" scoped></style>

1.在一个{{message}}模板中 可以添加多个filter 函数对message 处理；

   如：{{ message | filterA | filterB }}

2.在filter中可有传多个参数，但是filters的function的默认第一位参数 当前的message的值 value，所以在写函数的时候应注意，自定义的参数是从第二位开始传的。

   如：{{ message | filterA('arg1', arg2) }}

filterA 被定义为接收三个参数的过滤器函数。其中 message 的值作为第一个参数，普通字符串'arg1'作为第二个参数，表达式 arg2 的值作为第三个参数。

计算属性

可以将计算属性看做是Vue对象中定义的一个特殊的属性，不像普通属性那样直接返回结果，而是经过计算后再返回结果。在一个计算属性里可以完成各种复杂的逻辑，包括运算、函数调用等。计算属性值会基于其响应式依赖被缓存。一个计算属性仅会在其响应式依赖更新时才重新计算。这意味着只要 响应式依赖 不改变，无论多少次访问，都会立即返回先前的计算结果，而不用重复执行 getter 函数。

示例：

<template>
  <span>{{ publishedBooksMessage }}</span>
</template>

<script>
export default {
  data() {
    return {
      author: {
        books: [
          "Advanced Guide",
          "Basic Guide",
          "The Mystery",
        ],
      },
    }
   },
   computed: {
    // 一个计算属性的 getter
    publishedBooksMessage() {
      return this.author.books.length > 0 ? 'Yes' : 'No'
    }
  },
  methods: {}
}
</script>

<style lang="scss" scoped></style>

methods方法

是在method中定义一个方法，和正常的javascript定义方法是一样。method中定义的方法是没有默认参数的，和过滤器不一样。每次访问，即使返回结果都一样时，method中定义的方法每一次都仍会重新进行调用，不同于计算属性只调用一次。

示例：

<template>
  <span>不止1个：{{ getMessage(1) }}</span>
  <span>不止2个：{{ getMessage(2) }}</span>
</template>

<script>
  export default {
    data() {
      return {
        author: {
          books: [
            "Advanced Guide",
            "Basic Guide",
            "The Mystery",
          ],
        },
      };
    },
    methods: {
      getMessage(length) {
        return this.author.books.length > length ? "Yes" : "No";
      },
    },
  };
</script>

<style lang="scss" scoped></style>

filter过滤器、计算属性、methods方法的区别

过滤器
1、过滤器适合多个同样计算方法的属性的计算；
2、过滤器可以定义为全局过滤器，在多个vue实例中使用；
3、过滤器可以接收多个参数进行计算；
4、过滤器没有缓存机制，每调用一次都会计算一次；
5、过滤器相当于定义一个特殊的方法

计算属性
1、计算属性适合用在单个属性的计算；
2、计算属性只能在单个vue实例中使用；
3、计算属性不能直接传参数，只能使用data中定义的变量进行计算，或者使用闭包来接收参数；
4、计算属性有缓存机制，可减少调用次数；
5、计算属性相当于定义一个变量

methods方法

1、methods方法适合无同样计算方法的计算、多个属性的计算、异步执行的计算等；
2、methods方法可以灵活定义，在vue实例中使用；
3、methods方法没有默认参数，需要自定义参数；
4、methods方法没有缓存机制，每调用一次都会计算一次；
5、methods方法相当于一个正常的javascript定义的方法；