起因
在老项目改造中，发现同事写了在methods中的一个函数写这么一句代码this.$options.filters.formatDateRange(time,id)，对于略知一二 filters 作用的我感到纳闷，这好像不符合filters的应用场景？
配合chantGPT来一波学习
问： vue 中 filters 有什么作用？
答： 在 Vue.js 中，filters（过滤器）可以用来处理模板中的数据，对数据进行格式化或过滤，并将处理后的数据显示在页面上。filters 可以在插值表达式、v-bind 表达式和 v-for 指令中使用。
filters 的主要作用是对数据进行格式化，如将日期格式化、将数字格式化为货币等。在实际应用中，经常需要对数据进行格式化以便更好的展示，而使用 filters 可以将这些数据处理逻辑与组件的其他代码分离开来。
例如，有一个日期数据需要在模板中展示，但是这个日期数据的格式（例如：年-月-日）可能不太符合我们的需求。针对这种情况，我们可以通过编写一个简单的 filter 来处理日期格式：
Vue.filter('dateFormat', function(dateStr) {
const date = new Date(dateStr)
return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`
})
然后，在模板中通过管道符 | 使用这个 filter：
<p>{{ book.publishDate | dateFormat }}</p>
问：这跟普通的方法调用有什么区别？（那我把 dateFormat 写在 methods 中，然后模板中调用不也一样？）
答： 与普通的方法调用相比，Vue.js 中的 filters 有以下几个区别：
- 数据处理和模板分离
在 Vue.js 中，filters 可以将模板中的数据处理逻辑单独抽离出来，使得模板代码更加简洁易懂，同时也让代码更容易维护。
- 自动更新模板
与普通方法不同，filters 可以自动更新模板中的数据。当数据发生变化时，对应使用了该 filter 的模板内容会自动更新，无需手动调用方法更新模板。
- 全局共享
在 Vue.js 中，filters 可以注册为全局可用的，从而在任何组件模板中使用，无需重复编写代码。这样可以使得代码更加简洁易懂，并且方便组件的复用。
- 支持参数传递
filters 可以接收一个或多个参数，并返回处理后的结果。这使得 filter 可以根据不同的参数值，实现不同的数据处理逻辑。
很明显，
filters会将传入的数据进行修改并返回符合我们需要展示的格式，那是否会把源数据给修改掉呢？
问： filters 并不改变源数据，只是对源数据进行拷贝，处理以后返回一个新的数据展示在模板中？
答： 可以这么理解，Vue.js 中的 filters 确实不会直接改变源数据，它们只会将源数据进行拷贝，并在拷贝后的数据上进行处理，最终返回一个新的数据展示在模板中。
在 Vue.js 中，数据是通过数据绑定实现的。当数据发生变化时，Vue.js 会检测到变化并更新视图。为了不影响原始数据的状态，Vue.js 在内部会对数据进行深拷贝，即复制一份与原数据相同的数据副本。这样做的好处是，无论数据变化多少次，都不会对原始数据造成影响，确保数据的可靠性和安全性。
在使用 filters 处理数据时，Vue.js 也会对原始数据进行深拷贝，生成一个新的数据副本，然后将其传入 filters 进行处理。filters 处理后得到的结果也是一个新的数据副本，与原始数据无关。这种方式可以确保源数据不被改变，同时，也保证了处理后的数据能正确展示在模板中，达到了数据处理和模板分离的目的。
总结：filters其实跟 computed有部分相似，会自动监听数据，在数据发生改变时自动调用，更多的应用场景实际是用户需要不断输入值和输入值和页面显示值不同。
