开发者学堂课程【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 文件,来创建对应的组件;
2、Vue 文件组成部分:
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 是通过 Template、Script、Style 组合成组件的。
三者合起来才是一个组件。
3、为什么 Home 是一个组件?
用.Vue 后缀名的文件需要 wrbpack 进行编译,.Vue 模板文件需要用 .Vue loader 进行编译。
Loader 就是把三者整合起来,所以这里导入的就是编译后的结果是一个真正的组件。
五、React 如何实现组件化:
React 中有组件化的概念,但是,并没有像 vue 这样的组件模板文件; React 中,一切都是以 JS 来表现的;,
因此要学习 React,JS 要合格;ES6 和 ES7(async和await)要会用。