配置vue全局方法的两种方式实例

当我们在使用 Vue.js 开发时，我们经常需要在多个组件中使用同一个方法，这时候可以将这个方法作为全局方法。Vue.js 提供了两种方式来配置全局方法。

1.通过 Vue.prototype 实现全局方法

在 Vue.js 初始化时可以通过 Vue.prototype 给 Vue 实例添加自定义属性。通过 Object.defineProperty 实现这样的定义可以确保这个属性是不可改变和不可枚举的。

在 Vue.js 实例化之前，可以使用 Vue.prototype 挂载全局方法，这样就可以在每个 Vue 组件中使用了。如下例子，我们计算木棍的长度。

Vue.prototype.$calcStickLength = function (a, b) {
  return Math.sqrt(a * a + b * b);
}

在组件内使用 $ 符号调用全局方法：

<template>
  <div>
    <p>木棍长度 (3, 4): {{ $calcStickLength(3, 4).toFixed(2) }}</p>
  </div>
</template>

2.通过 Vue.mixin 实现全局方法

Vue.mixin 能够在全局注册混入对象，以实现混入公共组件属性。通过将一个混入对象作为参数传递给 Vue.mixin() 方法，可以全局注入公共属性和方法。

混入对象可以包含任何组件选项，如：computed、watch、methods 等等。如果组件和混入对象含有同名选项，则钩子函数会以递归方式合并成一个。

如下面的代码示例，我们创建一个全局 mixin，将 greet 方法添加到所有组件中。

Vue.mixin({
  methods: {
    greet(name) {
      alert(`Hello, ${name}!`);
    }
  }
});

然后，在使用组件时，我们可以直接在该组件内的 methods 中使用 greet 方法：

<template>
  <div>
    <button @click="greet('world')">Greet World</button>
  </div>
</template>

<script>
export default {
  name: "MyComponent"
};
</script>

在 Vue.js 中使用全局方法，可以提高开发效率和代码复用性。但是过多的使用全局方法可能会导致代码结构不够清晰，所以需要合理使用。