Vue 进阶系列丨vue2和vue3定义插件的区别-优快云博客

本文详细介绍了Vue.js插件的定义与使用方法，并通过示例展示了如何为Vue应用添加自定义指令，包括Vue 2.x和Vue 3.x的不同实现方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Vue 进阶系列教程将在本号持续发布，一起查漏补缺学个痛快！若您有遇到其它相关问题，非常欢迎在评论中留言讨论，达到帮助更多人的目的。若感本文对您有所帮助请点个赞吧！

2013年7月28日，尤雨溪第一次在 GItHub 上为 Vue.js 提交代码；2015年10月26日，Vue.js 1.0.0版本发布；2016年10月1日，Vue.js 2.0发布。

最早的 Vue.js 只做视图层，没有路由，没有状态管理，也没有官方的构建工具，只有一个库，放到网页里就可以直接用了。

后来，Vue.js 慢慢开始加入了一些官方的辅助工具，比如路由（Router）、状态管理方案（Vuex）和构建工具（Vue-cli）等。此时，Vue.js 的定位是：The Progressive Framework。翻译成中文，就是渐进式框架。

Vue.js2.0 引入了很多特性，比如虚拟 DOM，支持 JSX 和 TypeScript，支持流式服务端渲染，提供了跨平台的能力等。Vue.js 在国内的用户有阿里巴巴、百度、腾讯、新浪、网易、滴滴出行、360、美团等等。

Vue 已是一名前端工程师必备的技能，现在就让我们开始深入学习 Vue.js 内部的核心技术原理吧！

vue2如何使用和定义用插件？

1.定义插件

函数定义法：

function plugin(Vue){
  // Vue.component 全局组件注册
  // Vue.direactive 全局指令注册
  // Vue.prototype.$http = function(){}
  // 只要Vue构造函数能力范围内 就可以通过插件来做
}

对象定义法：

const plugin = {
    install(Vue){
    // Vue.component 全局组件注册
    // Vue.direactive 全局指令注册
    // Vue.prototype.$http = function(){}
    // 只要Vue构造函数能力范围内 就可以通过插件来做
    }
 }

2.注册插件

在 main.js 中引入插件，使用 Vue.use(插件名)注册。

当执行 use 方法时，会自动把Vue构造函数当成一个实参传入到插件 install 方法中，并自动执行。

以函数定义法为例，介绍给 input 输入框添加自定义聚焦指令

//定义
function plugin(Vue){
   Vue.directive('fofo', {
    // 指令所在标签, 插入到真实DOM时, 才触发
    inserted (el) {
      if ( el.nodeName === 'INPUT') {
        el.focus()
      } else {
        // el不是输入框, 尝试往里查找
        const inp = el.querySelector('input')
          inp.focus()
      }
    },
    // 指令所在标签, 发生更新时触发, (例如: display:none隐藏->出现)
    update (el) {
      if ( el.nodeName === 'INPUT') {
        el.focus()
      } else {
        // el不是输入框, 尝试往里查找
        const inp = el.querySelector('input')
         inp.focus()
      }
    }
  })
 }

//main.is中注册
import directivePlugin from "@/directives";
Vue.use(diretvieObj)

//使用
<input type="text" v-fofo />

vue3如何使用和定义用插件？

1.定义插件

函数定义法：

function plugin(app){
  // app.component 全局组件注册
  // app.direactive 全局指令注册
  // app.prototype.$http = function(){}
  // 只要app构造函数能力范围内 就可以通过插件来做
}

对象定义法：

const plugin = {
  install(app){
   // app.component 全局组件注册
   // app.direactive 全局指令注册
   // app.prototype.$http = function(){}
   // 只要Vue构造函数能力范围内 就可以通过插件来做
  }
}

2.注册插件

在 main.js 中引入插件，使用 creatApp(App).use(插件名)注册。

当执行 use 方法时，会自动把 app 方法当成一个实参传入到插件 install 方法中，并自动执行。

vue3自定义指令的示例，可阅读 Vue 进阶系列丨自定义指令实现按钮权限功能