首页 > 其他分享 >Vue中组件和插件的区别

Vue中组件和插件的区别

时间:2023-01-11 01:55:32浏览次数:32  
标签:插件 Vue vue 添加 组件 全局

一、组件是什么

1:组件的定义:

  组件就是把图形、非图形的各种逻辑均抽象为一个统一的概念(组件)来实现开发的模式,在Vue中每一个.vue文件都可以视为一个组件

2:组件的优势

  • 降低整个系统的耦合度,在保持接口不变的情况下,我们可以替换不同的组件快速完成需求,例如输入框,可以替换为日历、时间、范围等组件作具体的实现

  • 调试方便,由于整个系统是通过组件组合起来的,在出现问题的时候,可以用排除法直接移除组件,或者根据报错的组件快速定位问题,之所以能够快速定位,是因为每个组件之间低耦合,职责单一,所以逻辑会比分析整个系统要简单

  • 提高可维护性,由于每个组件的职责单一,并且组件在系统中是被复用的,所以对代码进行优化可获得系统的整体升级

二、插件是什么

插件通常用来为 Vue 添加全局功能。插件的功能范围没有严格的限制——一般有下面几种:

  • 添加全局方法或者属性。如: vue-custom-element
  • 添加全局资源:指令/过滤器/过渡等。如 vue-touch
  • 通过全局混入来添加一些组件选项。如vue-router
  • 添加 Vue 实例方法,通过把它们添加到 Vue.prototype 上实现。
  • 一个库,提供自己的 API,同时提供上面提到的一个或多个功能。如vue-router

三、两者的区别

两者的区别主要表现在以下几个方面:

  • 编写形式
  • 注册形式
  • 使用场景

标签:插件,Vue,vue,添加,组件,全局
From: https://www.cnblogs.com/chccee/p/17042696.html

相关文章

  • Vue中实现图片上传,修改文件名称
    前提:直接flie.name的话是不可行的,并且还会报错,所以得用以下方式。详解:拦截文件上传文件对象(file)是不能直接修改文件名的,file.name是只读属性,如果你强行赋值,会直接报错,所......
  • linux离线安装插件包
    1、下载插件包(联网的linux环境下)#检查是否安装了vim(vim-minimal是vi)[root@localhostopt]#rpm-qa|grepvimvim-minimal-8.0.1763-16.el8.x86_64#下载vim相关插......
  • Vue3 异步数据渲染模板,ref 获取不到真实节点
    获取异步数据,并把数据渲染到模板中,比如todolist等。ref只有在模板渲染之后才可以获取,而异步获取数据期间,模板可能没有被渲染。因此,直接在setup执行期间获取ref、甚至......
  • 42、mybatisplus配置分页插件
    1、旧版分页插件配置方法(MybatisPlus3.4.0版本之前)@EnableTransactionManagement//开启事务@Configuration@MapperScan(basePackages={"com.zimug.**.mapper"})p......
  • vue2,新闻渲染效果
    做一个新闻渲染的效果,最后呈现的效果   数据放入父组件中,公共样式放入子组件中父组件中引入子组件,放入数组,然后进行样式渲染<template><divclass="zong"><n......
  • 一点vue的基础(1)
    Vue的特点遵循MVVM模式编码简洁,体积小,运行效率高,适合移动/PC端开发它本身只关注UI,也可以引入其它第三方库开发项目html中包含了一些JS语法代码,语法......
  • vue之KeepAlive 组件缓存
    简单使用<!--非活跃的组件将会被缓存!--><KeepAlive><component:is="activeComponent"/></KeepAlive>讲解默认会缓存内部的所有组件实例,但我们可以通过inclu......
  • Docker 利用buildx插件构建多平台镜像
    ##安装DockerBuildx[安装DockerBuildx](https://docs.docker.com/build/buildx/install/)##运行Docker镜像分发的跨平台模拟器```shdockerrun--privile......
  • picgo插件开发
    ##借鉴文档[Typora配置picgo-core自动上传图片,及picgo-core上传组件开发](https://blog.csdn.net/weixin_45673647/article/details/121465975)[PicGo插件开发文档](h......
  • 代码编辑器插件 codemirror 和 monaco-editor 的使用
    codemirrorcodemirror官方文档vue-codemirror官方文档vue-codemirror官方examples因为是本项目是vue2所以先记录vue2中的使用安装4.0.6配合vue2npminsta......