从组件化方面对比 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)要会用。

相关文章
|
18天前
|
JavaScript 前端开发 API
详解React与Vue的性能对比
详解React与Vue的性能对比
59 0
|
1月前
|
前端开发
vue+ts或者react+ts如何使用animate.css
vue+ts或者react+ts如何使用animate.css
29 0
|
24天前
|
JavaScript 前端开发 算法
vue与react的区别?
vue与react的区别?
13 1
|
1月前
|
运维 JavaScript 前端开发
发现了一款宝藏学习项目,包含了Web全栈的知识体系,JS、Vue、React知识就靠它了!
发现了一款宝藏学习项目,包含了Web全栈的知识体系,JS、Vue、React知识就靠它了!
|
1月前
|
前端开发 JavaScript API
|
1月前
|
移动开发 JavaScript 前端开发
vue/react项目刷新页面出现404的原因以及解决办法
vue/react项目刷新页面出现404的原因以及解决办法
173 0
|
1月前
|
前端开发 JavaScript 容器
前端vw自适应解决方案,适用pc端以及移动端,适用webpack以及vite,适用vue以及react
前端vw自适应解决方案,适用pc端以及移动端,适用webpack以及vite,适用vue以及react
70 0
|
1月前
|
开发框架 移动开发 JavaScript
探索前端开发框架:React、Angular 和 Vue 的对决(四)
探索前端开发框架:React、Angular 和 Vue 的对决(四)
|
1月前
|
开发框架 JavaScript 前端开发
探索前端开发框架:React、Angular 和 Vue 的对决(三)
探索前端开发框架:React、Angular 和 Vue 的对决(三)
|
1月前
|
开发框架 前端开发 JavaScript
探索前端开发框架:React、Angular 和 Vue 的对决(二)
探索前端开发框架:React、Angular 和 Vue 的对决(二)