Vue3中无法复用外部JS格式化函数的问题及解决咨询

问题原因 #

Vue3 收紧了模板作用域的访问规则。在 Vue2 中，挂载到window的全局函数会被自动注入所有组件的模板作用域，所以你能直接在模板里调用formatDob这类函数。但 Vue3 移除了这个自动注入逻辑，模板默认仅能访问当前组件实例的属性、方法，以及显式注册的全局属性，未注册的全局函数在模板里会被判定为未定义。

跨页面/Vue实例复用格式化函数的方案 #

1. 全局注册属性（推荐多实例场景） #

在创建Vue实例前，将格式化函数挂载到Vue的全局属性上，所有组件都能直接访问：

// 若通过script标签引入DataFormatting.js，函数会挂载在window上
const { formatDob, formatDobWithAge } = window;

// 全局注册到Vue
const app = Vue.createApp({});
app.config.globalProperties.$formatDob = formatDob;
app.config.globalProperties.$formatDobWithAge = formatDobWithAge;
app.mount('#app');

模板中使用方式：

<p>{{ $formatDob(user.dob) }}</p>
<p>{{ $formatDobWithAge(user.dob) }}</p>

Options API组件内也可通过this.$formatDob调用。

2. 全局混入（Mixin） #

创建混入文件，将格式化函数注入所有组件：

// formatMixin.js
export default {
  methods: {
    formatDob: window.formatDob,
    formatDobWithAge: window.formatDobWithAge
  }
}

// 主入口注册全局混入
const app = Vue.createApp({});
app.mixin(formatMixin);
app.mount('#app');

模板中无需前缀直接调用：

<p>{{ formatDob(user.dob) }}</p>

3. 局部引入（适合单组件使用） #

仅在需要的组件内引入函数并挂载到methods：

// 组件代码
export default {
  methods: {
    formatDob: window.formatDob,
    formatDobWithAge: window.formatDobWithAge
  }
}

模板调用方式同上。

4. 自定义指令（针对DOM文本格式化场景） #

如果仅需格式化DOM文本，可封装自定义指令：

const app = Vue.createApp({});
app.directive('format-dob', {
  mounted(el, binding) {
    el.textContent = window.formatDob(binding.value);
  },
  updated(el, binding) {
    el.textContent = window.formatDob(binding.value);
  }
});
app.mount('#app');

使用示例：

<p v-format-dob="user.dob"></p>

是否需要转为Vue组件？ #

不需要。这类纯数据格式化的工具函数，保持JS函数形式更灵活——既可以在Vue模板中使用，也能在普通JS逻辑（比如接口数据预处理）中调用。只有当格式化需要结合特定UI样式或交互时，才需要封装成组件。

内容的提问来源于stack exchange，提问作者Scuzzlebutt