| |
|
开发:
C++知识库
Java知识库
JavaScript
Python
PHP知识库
人工智能
区块链
大数据
移动开发
嵌入式
开发工具
数据结构与算法
开发测试
游戏开发
网络协议
系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程 数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁 |
-> JavaScript知识库 -> Vue3组件化学习总结二 -> 正文阅读 |
|
[JavaScript知识库]Vue3组件化学习总结二 |
人处理问题的方式人面对复杂问题的处理方式: 任何一个人处理信息的逻辑能力都是有限的 所以,当面对一个非常复杂的问题时,我们不太可能一次性搞定一大堆的内容。 但是,我们人有一种天生的能力,就是将问题进行拆解。 如果将一个复杂的问题,拆分成很多个可以处理的小问题,再将其放在整体当中,你会发现大的问题也会迎刃而解。 认识组件化开发组件化也是类似的思想: 如果我们将一个页面中所有的处理逻辑 全部放在一起,处理起来就会变得非常 复杂,而且不利于后续的管理以及扩展; 但如果,我们讲一个页面拆分成一个个 小的功能块,每个功能块完成属于自己 这部分独立的功能,那么之后整个页面 的管理和维护就变得非常容易了; 如果我们将一个个功能块拆分后,就可 以像搭建积木一下来搭建我们的项目; Vue的组件化组件化是Vue、React、Angular的核心思想 前面我们的createApp函数传入了一个对象App,这个对象其实本质上就是一个组件,也是我们应用程序的根组件; 组件化提供了一种抽象,让我们可以开发出一个个独立可复用的小组件来构造我们的应用; 任何的应用都会被抽象成一颗组件树; ?接下来,我们来学习一下在Vue中如何注册一个组件,以及之后如何使用这个注册后的组件。 注册全局组件我们先来学习一下全局组件的注册: 全局组件需要使用我们全局创建的app来注册组件; 通过component方法传入组件名称、组件对象即可注册一个全局组件了; ?之后,我们可以在App组件的template中直接使用这个全局组件: ? 全局组件的逻辑当然,我们组件本身也可以有自己的代码逻辑: 比如自己的data、computed、methods等等 注册局部组件全局组件往往是在应用程序一开始就会全局组件完成,那么就意味着如果某些组件我们并没有用到,也会一起被注册: 比如我们注册了三个全局组件:ComponentA、ComponentB、ComponentC; 在开发中我们只使用了ComponentA、ComponentB,如果ComponentC没有用到但是我们依然在全局进行 了注册,那么就意味着类似于webpack这种打包工具在打包我们的项目时,我们依然会对其进行打包; 这样最终打包出的JavaScript包就会有关于ComponentC的内容,用户在下载对应的JavaScript时也会增加包的大小; 所以在开发中我们通常使用组件的时候采用的都是局部注册: 局部注册是在我们需要使用到的组件中,通过components属性选项来进行注册; 比如之前的App组件中,我们有data、computed、methods等选项了,事实上还可以有一个components选项; 该components选项对应的是一个对象,对象中的键值对是组件的名称: 组件对象; Vue的开发模式目前我们使用vue的过程都是在html文件中,通过template编写自己的模板、脚本逻辑、样式等。 但是随着项目越来越复杂,我们会采用组件化的方式来进行开发: 这就意味着每个组件都会有自己的模板、脚本逻辑、样式等; 当然我们依然可以把它们抽离到单独的js、css文件中,但是它们还是会分离开来; 也包括我们的script是在一个全局的作用域下,很容易出现命名冲突的问题; 并且我们的代码为了适配一些浏览器,必须使用ES5的语法; 在我们编写代码完成之后,依然需要通过工具对代码进行构建、代码; 所以在真实开发中,我们可以通过一个后缀名为 .vue 的single-file components (单文件组件) 来解决,并且可以使用webpack或者vite或者rollup等构建工具来对其进行处理。 单文件的特点在这个组件中我们可以获得非常多的特性: 代码的高亮; ES6、CommonJS的模块化能力; 组件作用域的CSS; 可以使用预处理器来构建更加丰富的组件,比 如TypeScript、Babel、Less、Sass等; ? ? |
|
JavaScript知识库 最新文章 |
ES6的相关知识点 |
react 函数式组件 & react其他一些总结 |
Vue基础超详细 |
前端JS也可以连点成线(Vue中运用 AntVG6) |
Vue事件处理的基本使用 |
Vue后台项目的记录 (一) |
前后端分离vue跨域,devServer配置proxy代理 |
TypeScript |
初识vuex |
vue项目安装包指令收集 |
|
上一篇文章 下一篇文章 查看所有文章 |
|
开发:
C++知识库
Java知识库
JavaScript
Python
PHP知识库
人工智能
区块链
大数据
移动开发
嵌入式
开发工具
数据结构与算法
开发测试
游戏开发
网络协议
系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程 数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁 |
360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年12日历 | -2024/12/26 17:17:35- |
|
网站联系: qq:121756557 email:121756557@qq.com IT数码 |
数据统计 |