如何修改Vue3的createGetter函数默认逻辑以解析{{}}格式变量？

核心思路 #

通过**猴子补丁（Monkey Patch）**重写Vue3响应式系统中的createGetter函数，在属性被访问时自动检测并解析带{{}}的字符串，从组件实例中提取对应路径的真实值，无需逐个修改Vue文件。

具体实现步骤 #

在项目入口文件（如main.ts）中添加以下代码：

import { createApp } from 'vue'
import { createGetter } from '@vue/reactivity'
import App from './App.vue'

// 保存原始的createGetter函数
const originalCreateGetter = createGetter

// 重写createGetter
;(createGetter as any) = function createGetterOverride(target: any, key: string | symbol, receiver: any) {
  // 先调用原始getter获取值
  const value = originalCreateGetter(target, key, receiver)

  // 仅处理字符串类型且符合{{xxx}}格式的值
  if (typeof value === 'string' && value.startsWith('{{') && value.endsWith('}}')) {
    // 提取路径（比如{{table.name}} → table.name）
    const path = value.slice(2, -2).trim()
    // 从receiver（即组件实例）中按路径取值
    let current = receiver
    const keys = path.split('.')
    for (const k of keys) {
      if (current == null) break
      current = current[k]
    }
    // 如果取到有效值则返回，否则返回原字符串
    return current ?? value
  }

  // 不符合条件则返回原始值
  return value
}

createApp(App).mount('#app')

关键细节说明 #

• 路径解析逻辑：通过slice(2, -2)去掉首尾的{{}}，再用split('.')拆分路径，逐层从组件实例（receiver）中获取对应属性。
• 边界处理：如果路径不存在（比如{{nonExist.key}}），会返回原始的{{nonExist.key}}字符串，避免报错。
• 响应式保持：由于最终返回的是实例上的响应式属性，当原始属性（如table.name）变化时，widgetName的取值也会自动更新，保持响应式特性。

验证效果 #

以你提供的示例组件为例：

<template>
  <div>
    <div>{{widgetName}}</div>
    <div>{{productName}}</div>
  </div>
</template>
<script>
export default {
  props: {
    widgetName: {
      type: String,
      default: '{{table.name}}',
    }
  },
  data () {
    return {
      productName: '{{product.name}}',
      product: { name: 'phone' },
      table: { name: 'good' },
    };
  },
  created () {
    console.log(this.widgetName) // 输出 'good'
    console.log(this.productName) // 输出 'phone'
  },
};
</script>

运行后会自动解析widgetName和productName的{{}}变量，无需修改组件代码即可得到预期结果。

注意事项 #

1. 版本兼容性：该方案依赖Vue3的内部API结构，若Vue版本更新导致createGetter的参数或逻辑变化，可能需要调整补丁代码。
2. 性能影响：每次属性访问都会触发格式检查和路径解析，若项目中大量使用此类变量，建议添加缓存逻辑优化性能。
3. 全局生效：该补丁会对所有组件的响应式属性（props、data、computed等）生效，若需针对特定范围处理，可在判断逻辑中添加额外条件。

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