前言
最近在带实习生做项目，发现实习生对基础知识的掌握还不太扎实，而且缺少学习的方向，而基础是重中之重，因此，整理了前端开发一些基础知识，希望新手能有正确的学习方向，从而提高学习效率，精准发力。
div+css3页面布局
盒模型
所有HTML元素可以看作一个盒子，占据一定的页面空间，它有外边距(margin)、边框(border)、内边距(padding)、内容(content)四个属性。
- 盒模型的总宽度和高度 = 内容的宽度和高度 + 内边距的宽度和高度 + 边框的宽度和高度（如果边框有宽度的话）+ 外边距的宽度和高度（但外边距不计入元素的实际大小，只影响布局）。
- CSS中还有
box-sizing属性，它可以改变盒模型的计算方式。默认情况下（box-sizing: content-box;），元素的宽度和高度只包括内容区域。如果设置为box-sizing: border-box;，则元素的宽度和高度会包括内容、内边距和边框，但不包括外边距。
布局
在HTML和CSS中，元素根据它们的表现特性被分类为块级元素（Block-level elements）和行内元素（Inline elements）。随着CSS的引入，尤其是Flexbox和Grid等现代布局技术的出现，这些传统的分类变得有些模糊，因为可以通过CSS改变元素的默认显示类型（例如，使用display: block;或display: inline;）。但了解这些基础仍然对理解网页布局很有帮助。
Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。推荐查看阮一峰的# Flex 布局教程：语法篇
css规范
css规范书写至关重要，推荐阅读www.kancloud.cn/qianye/css-…
Scss
Sass 是一款强化 CSS 的辅助工具，它在 CSS 语法的基础上增加了变量 、嵌套 、混合 、导入等高级功能，这些拓展令 CSS 更加强大与优雅。使用 Sass 以及 Sass 的样式库有助于更好地组织管理样式文件，以及更高效地开发项目。
JavaScript
原生js是基础，推荐阅读《你不知道的JavaScript》，可以帮助初学者夯实基础，现在各个公司的技术栈都是Vue或者React,好多初学者也是直接上手去写这些，但是内部的原理就无从知晓了。万丈高楼平地起，建议初学者在学习及写项目的过程中，不要忘记结合一些基础的知识，做到边学边用，边用边学。
Vue
目前在用vue开发，所以写了一些vue相关的知识点，希望初学者慢慢理解，避免踩坑。
1、为何在v-for中用key
必须用key,且不能是index和random diff算法中通过tag和key来判断,是否是sameNode 减少渲染次数,提升渲染性能
2、描述Vue组件生命周期(父子组件)
执行顺序为: 父beforeCreate->父created ->父beforeMount->子beforeCreate ->子created ->子beforeMounted->父mounted 更新阶段 执行顺序为: 父beforeUpdate->子beforeUpdate->子updated->父updatedd 销毁阶段 执行顺序为: 父beforeDestroy ->子beforeDestroy->子destroyed->父destroyed->父destroyed->父destroyed 规律就是:父组件先开始执行,然后等到子组件执行完,父组件收尾。
3、Vue组件如何通讯(常见)
父子组件props和this.$emit
自定义事件event.emit
vuex
4、描述组件渲染和更新的过程
5、 双向数据绑定v-model的实现原理
input元素的value=this.name ,绑定input事件this.name=$event.target.value data更新触发re-render
6、对MVVM的理解
7、computed有何特点
缓存,data不变不会重新计算 提高性能
8、为何组件data必须是一个函数?
9、ajax请求应该放在哪个生命周期
mounted JS是单线程的,ajax异步获取数据 放在mounted之前没有用,只会让逻辑更加混乱
10、如何将组件所有 props传递给子组件?
细节知识点,优先级不高
11、何时要使用异步组件?
加载大组件 路由异步加载
优化性能
12、何时需要使用keep-alive?
缓存组件,不需要重复渲染 如多个静态tab页的切换 优化性能
13、何时需要使用beforeDestory
解绑自定义事件event.$off
清除定时器
解绑自定义的DOM事件,如window scroll等
14、Vuex中action和mutation有何区别
action中处理异步,mutation不可以 mutation做原子操作 action可以整合多个mutation
15、Vue-router常用的路由模式
hash默认 H5history(需要服务端支持) 两者比较
16、如何配置Vue-router异步加载
import（）
17、用Vnode描述一个dom结构
18、diff算法的时间复杂度
O(n) 在O(n^3)基础上做了一些调整
19、简述diff算法过程
patch(elem, vnode) 和 patch(vnode, newVnode) patchVnode 和 addVnodes 和 removeVnodes updateChildren(key的重要性)
20、Vue为何是异步渲染,$nextTick何用?
异步渲染(以及合并data修改),以提高渲染性能 $nextTick在DOM更新完之后,触发回调
21、Vue常见性能优化方式
合理使用v-show和v-if 合理使用computed v-for时加key,以及避免和v-if同时使用
自定义事件、DOM事件及时销毁 合理使用异步组件 合理使用keep-alive
data层级不要太深 使用vue-loader在开发环境做模板编译(预编译)
webpack层面的优化(后面会讲) 前端通用的性能优化,如图片懒加载
使用SSR
结语
以上每个点都可以拿出来长篇大论一番，网上优秀的文章很多，就不过多赘述了，大家可以分条细化分别找相应的文章看一下。本文目的是让初级开发者找到学习的方向，能够快速上手项目，提高学习的目的性，少走弯路，希望对初学者有所帮助。若有误或者不全面的，欢迎指正~
