如何在普通JavaScript函数中调用Vue实例的方法？

首先，咱们先理清核心问题：你没法调用app.some_method()大概率是变量作用域或者实例访问权限的问题，下面分情况给你解决方案：

1. 确保Vue实例app处于全局作用域 #

如果你的Vue实例是在局部作用域（比如DOMContentLoaded回调、IIFE里）定义的，外部函数根本找不到这个app变量。举个反例：

// 错误示例：app在局部作用域，外部访问不到
document.addEventListener('DOMContentLoaded', function() {
  var app = new Vue({
    el: "#APP",
    data: { /* 你的数据 */ },
    methods: {
      some_method: function() {
        // 方法逻辑
      }
    }
  });
});

function some_js_func() {
  app.some_method(); // 这里的app是undefined！
}

解决办法很简单，把app挂载到全局的window对象上：

document.addEventListener('DOMContentLoaded', function() {
  // 把实例绑定到window，让外部能访问
  window.app = new Vue({
    el: "#APP",
    data: { /* 你的数据 */ },
    methods: {
      some_method: function() {
        console.log("方法被调用了！");
      }
    }
  });
});

function some_js_func() {
  // 现在可以正常调用了
  window.app.some_method();
}

some_js_func();

2. 直接从挂载元素获取Vue实例（应急方案） #

如果因为某些原因没法把app暴露到全局，你可以通过Vue挂载的DOM元素获取实例（注意：这是Vue内部属性，不推荐长期使用，仅作应急）：

function some_js_func() {
  // 通过挂载元素的__vue__属性获取实例
  const app = document.getElementById('APP').__vue__;
  app.some_method();
}

3. 排查常见拼写/挂载问题 #

如果上面的方法还是不行，先检查这几点：

• 确认some_method的拼写完全一致（大小写、下划线都不能错）
• 确认Vue实例的el: "#APP"对应的DOM元素确实存在于页面中（没有拼写错误，元素在实例创建前已经加载）
• 如果some_method里用到了this（比如访问this.some_data），调用时不需要额外绑定this，直接app.some_method()就会自动把this指向Vue实例

更Vue化的替代方案 #

如果你的外部函数和Vue应用关联紧密，其实可以把它放到Vue的methods里，或者用Vue的事件总线来通信，但如果必须保持外部函数的独立性，前面的方法就足够解决问题了。

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