从组件化方面对比 React 和 Vue |学习笔记

简介: 快速学习从组件化方面对比 React 和 Vue

开发者学堂课程【React 入门与实战从组件化方面对比 React 和 Vue 】学习笔记,与课程紧密联系,让用户快速学习知识。

课程地址https://developer.aliyun.com/learning/course/585/detail/8071


从组件化方面对比 React 和 Vue


内容介绍

一、什么是模块化:

二、什么是组件化:

三、组件化的好处:

四、vue 是如何实现组件化的:

五、React 如何实现组件化:


一、什么是模块化:

是从代码的角度来进行分析的;

把一些可复用的代码,抽离为单个的模块;便于项目的维护和开发;

比如项目刚启动的时候,每天都在创建新的模块,当项目开发到中期后期的时候把用到的模块直接调用一下就可以了,重复的功能就不用写了。


二、什么是组件化:

是从 UI 界面的角度来进行分析的;

把一些可服用的 UI 元素,抽离为单独的组件;


三、组件化的好处:

随着项目规模的增大,手里的组件越来越多;很方便就能把现有的组件拼接为一个完整的页面;


四、vue 是如何实现组件化的:

1、组建方式:

vue 里创建组建的方式有很多,最多的是用 .vue 的文件创建组件,比如:

vue.component()用js 代码的形式创建 vue 组件

在开放项目时用的更多是的 .Vue 的模板文件

通过.Vue 文件,来创建对应的组件;

2Vue 文件组成部分:

Template 结构

Script行为

Style  样式

Script是不是组件? 比如:

<script>

export default {

data({

return {}

}

</script>导出来不是一个组件,如果定义的.Vue 文件叫做 Home.vue 这是组件的名称,用的方式是:比如在 App.js 中使用

App.js

import Home from './Home.vue'

这里 Home 是个组件 它的由来是 import 导入、script 导出组成的,但是 script 不是组件,因为不完整。因为 Vue 是通过 TemplateScriptStyle 组合成组件的。

三者合起来才是一个组件。

3、为什么 Home 是一个组件?

.Vue 后缀名的文件需要 wrbpack 进行编译,.Vue 模板文件需要用 .Vue loader 进行编译。

Loader 就是把三者整合起来,所以这里导入的就是编译后的结果是一个真正的组件。


五、React 如何实现组件化:

React 中有组件化的概念,但是,并没有像 vue 这样的组件模板文件; React 中,一切都是以 JS 来表现的;,

因此要学习 ReactJS 要合格;ES6 ES7asyncawait)要会用。

相关文章
|
2月前
|
存储 缓存 JavaScript
如何优化React或Vue应用的性能
需要注意的是,性能优化是一个持续的过程,需要根据具体的应用场景和性能问题进行针对性的优化。同时,不同的项目和团队可能有不同的优化重点和方法,要结合实际情况灵活运用这些优化策略,以达到最佳的性能效果。
116 51
|
2月前
|
JavaScript API 开发者
Vue是如何进行组件化的
Vue是如何进行组件化的
|
2月前
|
监控 JavaScript 前端开发
如何在实际应用中测试和比较React和Vue的性能?
总之,通过多种方法的综合运用,可以相对客观地比较 React 和 Vue 在实际应用中的性能表现,为项目的选择和优化提供有力的依据。
43 1
|
2月前
|
JavaScript 前端开发 开发者
React和Vue有什么区别?
React 和 Vue 都有各自的优势和特点,开发者可以根据项目的需求、团队的技术背景以及个人的喜好来选择使用。无论是 React 还是 Vue,它们都在不断发展和完善,为前端开发提供了强大的支持。
130 2
|
2月前
|
JavaScript 前端开发 测试技术
React和Vue的性能对比如何?
需要注意的是,性能不仅仅取决于框架本身,还与开发者的代码质量、架构设计以及项目的优化程度等密切相关。因此,在评估性能时,应该综合考虑多个因素,而不是仅仅局限于框架之间的比较。
159 1
|
2月前
|
JavaScript 前端开发 算法
React 框架和 Vue 框架的区别是什么?
React框架和Vue框架都是目前非常流行的前端JavaScript框架,它们在很多方面存在区别
|
2月前
|
JavaScript
Vue基础知识总结 4:vue组件化开发
Vue基础知识总结 4:vue组件化开发
|
2月前
|
前端开发 JavaScript 开发者
React与Vue:前端框架的巅峰对决与选择策略
【10月更文挑战第23天】React与Vue:前端框架的巅峰对决与选择策略
|
2月前
|
前端开发 JavaScript 数据管理
React与Vue:两大前端框架的较量与选择策略
【10月更文挑战第23天】React与Vue:两大前端框架的较量与选择策略
|
2月前
|
JavaScript 前端开发 开发者
Vue是如何进行组件化的
Vue是如何进行组件化的