vue 动态添加方法

在 Vue.js 中，动态添加方法通常是通过创建计算属性 (Computed Property) 或者使用 JavaScript 的原型链来实现的，因为 Vue 内部并不直接支持动态添加实例级别的方法。以下是两种常见的做法：

### 计算属性 (Computed Properties)
你可以使用计算属性来封装一个函数，并根据需要返回一个新的、动态的方法。这样做的优点是计算属性只会在其依赖的数据发生变化时重新计算。

export default {
  data() {
    return {
      dynamicMethodData: '',
    };
  },
  computed: {
    dynamicMethod() {
      return () => {
        // 这里可以编写你想要的任何方法
        // 动态方法可以根据dynamicMethodData的变化而改变
        console.log(`This is a dynamically added method with data: ${this.dynamicMethodData}`);
      }
    }
  }
}

然后在模板中，你可以像引用普通方法一样使用 `this.dynamicMethod()`。

### 使用 prototype 链
如果你想在 Vue 实例的原型上动态添加方法，可以在 mounted 钩子或者自定义组件内部这样做，但这种方法不如计算属性那么灵活，因为它会立即影响所有实例，而不是只针对特定实例：

export default {
  mounted() {
    Object.defineProperty(this, 'dynamicMethodName', {
      get: function() {
        // 创建并返回动态方法
        return function() {
          console.log('Dynamic method called');
        };
      },
    });
  }
}

在这种情况下，`this.dynamicMethodName()` 就是一个新的方法，但它不是响应式的，也不会触发视图更新。