module:模块化是从代码设计的角度分析,抽离为单个的模块。高内聚,低耦合的公共代码。
component :组件化是从UI的角度分析,抽离为单个的组件。例如列表在app内很多页面都有用到,我们便可以抽离为组件。
无论是模块化还是组件化,目的都是为了提高代码复用性,便于后期的维护和开发。
VUE项目使用组件时,使用import
导入,那么.vue
模版文件中的script
中export defult
导出的是否是一个组件?
导出的并不是一个组件,
.vue
模版中template js style
组合而成的文件才是一个组件。
不是一个组件为何能使用?
关键点在于
webpack
中的vue-loader
,它能够帮你把单个文件运行自定义的loader链。
1.0.1 虚拟DOM(Document Object Model)
一个网页呈献的过程:
- 浏览器请求服务器获取html代码
- 浏览器在内存中获取解析DOM tree
- 浏览器渲染DOM tree呈献页面
需求
渲染一个通过网络请求返回的表格,点击表头部分的排序按钮,需要对表格进行排序。
通常的方法
- 获取数组拼接代码
- 添加到HTML标签中
- 通过js排序修改数组顺序
- 拼接好HTML
- 渲染到页面
这种方法能够实现需求,但是对页面的渲染消耗大,假设数据量很大,只改变其中的两条数据,不需要排序的元素也需要重新渲染到页面。
解决方案:
- 获取需要渲染元素的DOM tree 和现在需要渲染的DOM tree
- 进行比较
- 改变了的DOM记录下来
- 删除原来的需要改变的元素
- 渲染现在改变的元素
设想解决方案有了那么按照做就行了,但是浏览器中没有获取DOM tree的api,于是react库便出现了,不需要真实的DOM,模拟出来的DOM依然可以满足需求实现按需更新。于是有了diff算法
1.0.2 Diff 算法
//html
<h1 id="title" title="h1" data-poit="9">标题</h1>
//对应的DOM tree
<script>
const h1 = {
targetName: 'h1',
arrts: {
id: "title",
title: "h1",
"data-poit": "9"
},
childrens: [
"标题"
]
}
</script>
- tree diff
- component diff
- element diff
新旧两棵DOM tree,逐层进行对比,便是 Tree diff 当整棵树都对比完毕,则需要按需更新的组件,必然能够找到。
组件之间的对比,每一层级中的组件进行对比
在进行组件对比的时候,如果类型相同则需要元素级别之间的对比,叫做element diff
以上为react 面试谈话内容