Vue.js 是一款流行的前端JavaScript框架，它允许开发者创建复杂、响应式的用户界面。在Vue中，过滤器（filter）是一种特殊的功能，用于转换数据，比如格式化日期、货币或者进行其他文本处理。在这个实例中，我们将探讨如何创建一个自定义的Vue过滤器来实时更新当前时间。
我们来看一下提供的代码片段。在这个例子中，Vue应用通过`<div id="ssl">`初始化，创建了一个名为`em`的新Vue实例。这个实例有一个数据属性`currentTime`，用来存储当前时间，初始值为`new Date()`，即浏览器本地时间。
接下来，定义了一个名为`filterTime`的过滤器，它接收`currentTime`作为参数，并将其转换为易于阅读的格式，如“2023年03月15日10时30分45秒”。这个过滤器通过`getFullYear()`, `getMonth()`, `getDate()`, `getHours()`, `getMinutes()`, 和 `getSeconds()`方法获取日期和时间的各个部分，并用适当的字符串连接起来。
为了使时间实时更新，我们利用Vue的生命周期钩子函数`created()`。在这个函数中，设置了一个定时器`setInterval`，每秒执行一次，将`currentTime`更新为新的`Date`对象，这样视图就会自动更新，因为Vue会监听`currentTime`的变化并重新渲染相关的DOM元素。
此外，代码中还提到了Vue内建的时间过滤器，如`| formatTime('YMD')`，这些内建的过滤器可以方便地对日期进行格式化，但在这个例子中，我们使用的是自定义的`filterTime`过滤器，它不仅格式化日期，还包含了小时、分钟和秒。
Vue过滤器的使用方式有两种：一种是在模板中，通过管道符号（`|`）来调用，例如`{{ currentTime | filterTime }}`；另一种是在JavaScript中直接调用，例如`Vue.filter('filterName', function(value) {...})`，这样就可以在模板中使用`filterName`过滤器了。
总结一下，这个例子展示了如何在Vue中创建和使用自定义过滤器，以及如何结合Vue的生命周期钩子实现数据的实时更新。这是一项基本技能，对于开发动态且交互丰富的Web应用至关重要。了解和掌握过滤器可以帮助我们在Vue项目中更灵活地处理和展示数据，提升用户体验。
