vue2-组件和插件的区别

news2024/11/17 4:45:28

1、组件是什么?
组件就是把图形、非图形的各种逻辑均抽象为一个统一的概念(组件)来实现开发的模式,在vue中每一个.vue文件都可以被视为一个组件。
组件的优势:
降低整个系统的耦合度,在保持接口不变的情况下,可以替换不同的组件完成需求,例如输入框,可以替换为日历,时间,范围等组件做具体实现
调试方便,由于整个系统是通过组件组合起来的,在出现问题的时候,可以用排除法直接移除组件,或者根据报错的组件快速定位问题,之所以能够快速定位,是因为每个组件低耦合,职责单一,所以逻辑会比分析整个系统要简单。
提高可维护性,由于每个组件职责单一,并且组件在系统中是被复用的,所以对代码进行优化可获得系统的整体升级。

2、插件是什么?
插件通常用来为Vue添加全局功能,插件的功能范围没有严格的限制,一般分为以下几种:
添加全局方法或者属性,如vue-custom-element
添加全局资源:指令/过滤器/过渡等。如vue-touch
通过全局混入来添加一些组件选项。如vue-router
添加vue实例方法,通过把它们添加到Vue.prototype上实现
一个库,提供自己的API,同时提供上面的一个或多个功能。如vue-router

3、两者的区别
两者的区别主要体现在以下几个方面:
编写形式
注册形式
使用场景
编写形式
编写组件
编写一个组件,可以有很多方式,常见的是vue单文件的这种格式,每一个.vue文件都可以被看成是一个组件
vue文件标准格式
在这里插入图片描述
此外,还可以通过template属性来编写一个组件,如果组件内容多,可以在外部定义template组件内容,如果组件内容不多,可以直接写在template属性上。
在这里插入图片描述
编写插件
vue插件的实现应该是暴漏一个install方法,这个方法的第一个参数是vue构造器,第二个参数是一个可选的选项对象。
在这里插入图片描述

注册形式
组件注册
vue组件注册主要分为全局注册和局部注册
全局注册通过vue.component方法,第一个参数为组件名称,第二个参数为传入的配置项。
在这里插入图片描述
局部注册只需要在用到的地方通过components属性注册一个组件
在这里插入图片描述
插件注册
插件的注册通过vue.use()的方式进行注册(安装),第一个参数为插件的名字,第二个参数是可选择的配置项。
在这里插入图片描述
值得注意的事:
注册插件的时候,需要在调用new Vue()启动应用之前完成
vue.use()会自动阻止多次注册相同插件,只会注册一次

4、使用场景
组件(coponent)是用来构建app的业务模块,它的目标是app.vue

插件(plugin)是用来增强你的技术栈的功能模块,它的目标是vue本身。

简单来说,插件就是对vue的功能的增强和补充。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/838228.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

学C的第三十二天【动态内存管理】

相关代码gitee自取:C语言学习日记: 加油努力 (gitee.com) 接上期: 学C的第三十一天【通讯录的实现】_高高的胖子的博客-CSDN博客 1 . 为什么存在动态内存分配 学到现在认识的内存开辟方式有两种: 创建变量: int val …

ardupilot 中坐标变换矩阵和坐标系变换矩阵区别

目录 文章目录 目录摘要1.坐标变换矩阵与坐标系变换矩阵摘要 本节主要记录ardupilot 中坐标变换矩阵和坐标系变换矩阵的区别,这里非常重要,特别是进行姿态误差计算时,如果理解错误,很难搞明白后面算法。 1.坐标变换矩阵与坐标系变换矩阵 坐标变换矩阵的本质含义:是可以把…

webpack基础知识八:说说如何借助webpack来优化前端性能?

一、背景 随着前端的项目逐渐扩大,必然会带来的一个问题就是性能 尤其在大型复杂的项目中,前端业务可能因为一个小小的数据依赖,导致整个页面卡顿甚至奔溃 一般项目在完成后,会通过webpack进行打包,利用webpack对前…

Django实现音乐网站 ⑸

使用Python Django框架制作一个音乐网站, 本篇主要是配置媒体资源设置。 目录 配置介绍 设置媒体资源 创建媒体资源目录 修改settings.py 注册媒体资源路由 总结 配置介绍 静态资源是指项目配置的js/css/image等系统常用文件。对于一些经常变动的资源&#x…

华为云交付

文章目录 一、华为云-公有云架构华为公有云的主要服务1.华为云服务—计算类2.华为云服务——存储类3.华为云服务—网络类4.华为云服务—管理和监督类5.华为云数据库 二、待续 一、华为云-公有云架构 华为公有云的主要服务 ECS:弹性云服务器( Elastic Cl…

Node.js爬虫只会Cheerio?来试试Puppeteer!

简介 上篇文章我们学习了如何通过 Cheerio 来爬取静态页面,但是我们没有办法处理动态渲染页面的数据 关于 Cheerio 的学习请查看 都 2023 年了还不会 Node.js 爬虫?快学起来! 今天我们学习如何使用 Puppeteer 来轻松地完成我们解决不了的爬虫…

webpack基础知识六:说说webpack的热更新是如何做到的?原理是什么?

一、是什么 HMR全称 Hot Module Replacement,可以理解为模块热替换,指在应用程序运行过程中,替换、添加、删除模块,而无需重新刷新整个应用 例如,我们在应用运行过程中修改了某个模块,通过自动刷新会导致…

(三)Node.js - 模块化

1. Node.js中的模块化 Node.js中根据模块来源不同,将模块分为了3大类,分别是: 内置模块:内置模块由Node.js官方提供的,例如fs、path、http等自定义模块:用户创建的每个.js文件,都是自定义模块…

Godot 4 练习 - 制作粒子

演示项目dodge_the_creeps中,有一个Trail,具体运行效果 想要看看咋实现的,看完也不清晰,感觉是要设置某些关键的属性 ChatGPT说:以下是一些重要的属性: texture:用于渲染粒子的纹理。您可以使用…

windows docker部署

windows docker部署 使用 Docker Desktop for Windows安装Docker问题:Update the WSL kernel by running "wsl --update" or follow instructions at https://docs.microsoft.com/windows/wsl/wsl2-kernel.问题描述:解决办法,升级W…

【小沐学前端】GitBook制作在线电子书、技术文档(gitbook + Markdown + node)

文章目录 1、简介1.1 工具简介1.2 使用费用 2、安装2.1 安装node2.2 安装gitbook 3、测试3.1 编辑文档3.2 编译工程3.3 预览工程 结语 1、简介 官网地址: https://www.gitbook.com/1.1 工具简介 什么是 GitBook? GitBook 是一个现代文档平台&#xff…

微信小程序真机防盗链referer问题处理

公司使用百度云存储一些资源,然后现在要做防盗链,在CDN加入Referer白名单后发现PC是正常的,微信小程序无法正常访问资源了。然后是各种查啊,然后发现是微信小程序不支持Referer的修改,且在小程序开发工具是Referer是固…

WIN大恒工业相机SDK开发

大恒工业相机SDK开发概览 一、开发环境搭建1、C# 环境配置(VS2019)2、C 环境配置(VS2019)3、python 环境配置(Pycharm) 二、相机二次开发流程三、相机相机属性参数配置四、图像采集单帧采集回调采集 注意事…

基于边缘无线协同感知的低功耗物联网LPIOT技术:赋能智慧园区方案以及数字工厂领域

回到2000年左右,物联网的底层技术支撑还是“ZigBee”,虽然当时ZigBee的终端功耗指标其实也并不庞大,但是,“拓扑复杂导致工程实施难度大”、“网络规模小导致的整体效率低下”都成为限制其发展的主要因素。 LPWAN,新一…

自学(黑客)技术,入门到入狱!

1.网络安全是什么 网络安全可以基于攻击和防御视角来分类,我们经常听到的 “红队”、“渗透测试” 等就是研究攻击技术,而“蓝队”、“安全运营”、“安全运维”则研究防御技术。 2.网络安全市场 一、是市场需求量高; 二、则是发展相对成熟入…

【数据结构篇】手写双向链表、单向链表(超详细)

文章目录 链表1、基本介绍2、单向链表2.1 带头节点的单向链表测试类:链表实现类: 2.2 不带头节点的单向链表2.3 练习测试类:链表实现类: 3、双向链表测试类:双向链表实现类: 4、单向环形链表**测试类**&…

初级web前端开发工程师的岗位职责描述(合集)

初级web前端开发工程师的岗位职责描述1 职责: 1. 根据功能需求设计编写页面原型; 2. 前后端联调保证功能流畅; 3. 提高页面易用性、美观提出合理建议。 4、与后台工程师配合开发联调并交付产品; 5、持续优化前端页面体验和访问速度,保证页面精美高效…

命令行快捷键Mac Iterm2

原文:Jump forwards, backwards and delete a word in iTerm2 on Mac OS iTerm2并不允许你使用 ⌥← 或 ⌥→ 来跳过单词。 你也不能使用 ⌥backspace 来删除整个单词。 下面是在Mac OS上如何配置iTerm2以便能做到这一点的方法。 退格键 首先,你需要将你的左侧 ⌥…

kubernetes基于helm部署gitlab

kubernetes基于helm部署gitlab 这篇博文介绍如何在 Kubernetes 中使用helm部署 GitLab。 先决条件 已运行的 Kubernetes 集群负载均衡器,为ingress-nginx控制器提供EXTERNAL-IP,本示例使用metallb默认存储类,为gitlab pods提供持久化存储&…

python#django数据库一对一/一对多/多对多

一对一OneToOneField 用户和用户信息 搭建 # 一对一 class TestUser(models.Model): usernamemodels.CharField(max_length32) password models.CharField(max_length32) class TestInfo(models.Model): mick_namemodels.CharField(max_length32) usermode…