Vue 进阶面试题, Vue 过滤器的作用是什么?如何实现一个 Vue 过滤器?

QA

Step 1

Q:: Vue 过滤器的作用是什么？

A:: Vue 过滤器的作用是对文本、数据进行格式化处理。过滤器可以在模板表达式中使用，用于对显示给用户的数据进行临时处理，通常用于文本格式化（如日期格式化、货币格式化等），使代码更加简洁易读。过滤器本质上是一个函数，它接收输入值并返回处理后的输出值。

Step 2

Q:: 如何实现一个 Vue 过滤器？

A:: 要实现一个 Vue 过滤器，可以使用 Vue 的全局或局部注册方式。在全局注册中，可以在 Vue 实例化前通过 Vue.filter 方法注册过滤器；在局部注册中，可以在组件的 filters 选项中定义过滤器函数。示例如下：

全局注册：

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

局部注册：

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

Step 3

Q:: Vue 过滤器与计算属性、方法的区别是什么？

A:: Vue 过滤器、计算属性和方法都可以对数据进行处理，但它们的使用场景和侧重点有所不同。过滤器主要用于模板中的简单格式化操作；计算属性适合用于依赖其他数据的复杂计算，且具有缓存机制；方法则适用于需要在模板中调用不具备缓存的函数时。

用途

Vue 过滤器常用于需要对显示给用户的数据进行格式化的场景，例如日期显示、货币格式化、字符串处理等。在实际生产环境中，当需要在不同组件中复用相同的数据格式化逻辑时，Vue 过滤器能够极大简化代码，同时增强代码的可读性和可维护性。因此面试中考察这部分内容，主要是为了评估候选人对 Vue 基础知识的掌握情况以及在实际项目中如何处理数据展示的问题。\n

相关问题

🦆

Vue 中如何实现自定义指令?▷

在 Vue 中，自定义指令用于对 DOM 元素进行底层操作。可以通过全局或局部方式注册自定义指令，示例代码如下：

全局注册：

 
Vue.directive('focus', {
  inserted: function (el) {
    el.focus()
  }
})

局部注册：

 
directives: {
  focus: {
    inserted(el) {
      el.focus()
    }
  }
}

🦆

Vue 中的生命周期钩子有哪些?▷

Vue 的生命周期钩子包括从组件创建到销毁的多个阶段，常见的有：beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed。每个钩子函数对应组件在特定阶段的处理逻辑。面试中考察这一内容，主要是为了了解候选人对 Vue 组件生命周期的掌握程度，以及如何在不同生命周期阶段处理业务逻辑。

🦆

Vue 中如何实现路由守卫?▷

Vue Router 提供了路由守卫功能，可以在路由跳转前、跳转后或解析阶段进行操作。主要的路由守卫有全局守卫、路由独享守卫和组件内守卫，示例代码如下：

全局前置守卫：

 
router.beforeEach((to, from, next) => {
  // 在这里处理逻辑
  next()
})

🦆

Vue 中如何使用 Vuex 管理状态?▷

Vuex 是 Vue.js 的状态管理模式，主要用于管理应用中多个组件共享的状态。Vuex 包含 state（状态）、getters（派生状态）、mutations（同步更改状态的方法）、actions（异步操作）和 modules（模块化）等概念。使用 Vuex 可以确保数据的一致性和可维护性，特别适合大型复杂应用。

Vue 的源码有哪些巧妙的设计如何在 Vue 中保存页面的当前状态