以下是对 Vue.use () 和 Vue.prototype.$ 的区别的详细解释：
1. Vue.use()
1.1 功能
-
安装插件：
- Vue.use () 是 Vue 框架提供的一个方法，用于安装 Vue 的插件。它可以将插件添加到 Vue 的系统中，让 Vue 具备更多的功能或特性。这些插件可以是路由（如 Vue Router）、状态管理（如 Vuex）、自定义指令、混入（Mixin）、全局组件等。
1.2 工作原理
-
插件安装过程：
-
当你调用 Vue.use (plugin) 时，Vue 会检查这个插件是否已经被安装过。如果没有，它会调用插件的
install方法（如果插件是一个对象且具有install方法），并将 Vue 实例作为第一个参数传递给这个install方法。例如：
-
收起
javascript
import Vue from 'vue';
import MyPlugin from './MyPlugin';
Vue.use(MyPlugin);
-
在
MyPlugin.js中，插件可能是这样的：
收起
javascript
export default {
install(Vue, options) {
// 在这里可以添加全局组件、全局指令、全局混入或修改 Vue 的其他属性
Vue.component('my-component', {
template: '<div>This is a custom component</div>'
});
Vue.directive('my-directive', {
inserted: function (el) {
el.style.backgroundColor = 'yellow';
}
});
Vue.mixin({
created() {
console.log('This is a mixin');
}
});
}
};
1.3 注意事项
-
插件的安装顺序：
- Vue.use () 会按照调用的顺序来安装插件，并且只会安装一次，避免重复安装。
2. Vue.prototype.$
2.1 功能
-
添加实例属性和方法：
- Vue.prototype. 来添加全局的实例属性和方法，这样所有的 Vue 组件实例都可以访问这些属性和方法。
2.2 工作原理
-
添加实例属性和方法：
-
例如，你可以在 Vue.prototype.$ 上添加一个自定义的方法，让所有 Vue 组件都可以使用它。例如：
-
收起
javascript
import Vue from 'vue';
Vue.prototype.$myMethod = function () {
console.log('This is my custom method');
};
-
在 Vue 组件中，可以这样使用：
收起
vue
<template>
<button @click="$myMethod()">Click Me</button>
</template>
2.3 注意事项
-
命名约定：
- 通常，为了避免与 Vue 自身的属性和方法冲突，添加到 Vue.prototype.` 作为前缀，这样可以很容易区分哪些是自定义的，哪些是 Vue 本身的。
3. 区别总结
3.1 用途不同
-
Vue.use() ：
- 主要用于安装插件，让 Vue 具备更多的功能，如添加全局组件、指令、混入等。
-
Vue.prototype.$ ：
- 主要用于给 Vue 实例添加全局的属性和方法，让组件实例可以方便地调用这些自定义的属性和方法。
3.2 作用范围不同
-
Vue.use() ：
- 影响 Vue 框架的整体功能，添加的插件可以影响 Vue 的组件、指令、混入等多个方面，对 Vue 的系统进行扩展。
-
Vue.prototype.$ ：
- 主要影响 Vue 的实例，添加的是实例级别的属性和方法，方便组件实例在自身内部使用。
4. 代码示例
4.1 使用 Vue.use () 安装插件
-
安装 Vue Router 插件：
收起
javascript
import Vue from 'vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter);
const router = new VueRouter({
routes: [
{ path: '/', component: HomeComponent }
]
});
4.2 使用 Vue.prototype.$ 添加实例方法
-
添加自定义实例方法：
收起
javascript
import Vue from 'vue';
Vue.prototype.$showAlert = function (message) {
alert(message);
};
5. 总结
-
Vue.use () 用于安装插件，将插件的功能集成到 Vue 系统中，丰富 Vue 的功能和特性。
-
Vue.prototype.$ 用于给 Vue 实例添加全局的属性和方法，方便组件实例使用。
在实际开发中，根据不同的需求，你可以选择使用 Vue.use () 来扩展 Vue 的系统功能，或者使用 Vue.prototype.$ 为组件实例添加全局的方法和属性。
