Vue 编码基础
2.1.1. 组件规范
2.1.2. 模板中使用简单的表达式
2.1.3 指令都使用缩写形式
2.1.4 标签顺序保持一致
2.1.5 必须为 v-for 设置键值 key
2.1.6 v-show 与 v-if 选择
2.1.7 script 标签内部结构顺序
2.1.8 Vue Router 规范
Vue 项目目录规范
2.2.1 基础
2.2.2 使用 Vue-cli 脚手架
2.2.3 目录说明
2.2.4注释说明
2.2.5 其他
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
7.css垂直居中
#floater {
float: left;
height: 50%;
margin-bottom: -120px;
}
#content {
clear: both;
height: 240px;
position: relative;
}
* ```
<div id="content"> Content here</div>
#content {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
height: 240px;
width: 70%;
}
8.怎么实现边框为0.5px(准备两种)
- 通过伪元素 .content:before{
content: ‘’;
position: absolute;
width: 200%;
height: 1px;
bottom: 0;
border-bottom: 1px solid #d6e4ed;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: scale(.5,.5);
transform: scale(.5,.5);
-webkit-box-sizing: border-box;
box-sizing: border-box
}
- 也可以实用背景渐变一半有色一半透明
9.性能优化(主要考察http和https,不能只说是代码封装方面的)
10.数据类型(也考察存的是堆还是栈)
(基本类型):String、Number、Boolean、Null、Undefined、Symbol。
引用数据类型:Object、Array、Function。
11.闭包
闭包就是一个函数,两个函数彼此嵌套,内部函数就是闭包形成闭包条件
缺点:易造成内存泄漏不会被垃圾回收机制回收
12.es6新特性及es7,8
let,const,箭头函数,promise,class,解构赋值,export,模版字符串,(…扩展符)
13.map和set
Map
是一组键值对的结构,具有极快的查找速度Set
和Map
类似,也是一组key的集合,但不存储value。由于key不能重复,所以,在Set
中,没有重复的key。
14.webpack
- mode:编译模式
entry:编译起始文件
loaders:文件资源的转换
plugins:提供额外功能的插件
output:编译结果文件输出
15.js的原型和原型链
- 原型:所有的函数都有一个特殊的属性prototype(原型),prototype属性是一个指针,指向的是一个对象(原型对象),原型对象中的方法和属性都可以被函数的实例所共享。所谓的函数实例是指以函数作为构造函数创建的对象,这些对象实例都可以共享构造函数的原型的方法。
- 原型链:原型链是用于查找引用类型(对象)的属性,查找属性会沿着原型链依次进行,如果找到该属性会停止搜索并做相应的操作,否则将会沿着原型链依次查找直到结尾。常见的应用是用在创建对象和继承中。
16.浏览器渲染流程
- DNS解析:把域名解析成IP地址
- TCP 建立连接:TCP三次握手
- 发送HTTP请求
- 服务器处理并响应报文
- 浏览器解析并渲染页面
- 断开连接:TCP 结束连接
17.跨域
18.vue生命周期
19.vue双向绑定
20.vue组件通讯
21.vuex
22.vue路由
23.vuex的使用场景及和全局变量的区别
24.rem、em、px、vh,vw
react
1.当你调用 setState 的时候,发生了什么事?
将传递给 setState 的对象合并到组件的当前状态,这将启动一个和解的过程,构建一个新的 react 元素树,与上一个元素树进行对比( diff ),从而进行最小化的重渲染。
2.React 项目用过什么脚手架(本题是开放性题目)
creat-react-app Yeoman 等
3什么时候用类组件Class Component,或函数组件Function
如果您的组件具有状态( state ) 或 生命周期方法,请使用 Class 组件。否则,使用功能组件
4.React 中 keys 的作用是什么?
Keys 是 React 用于追踪哪些列表中元素被修改、被添加或者被移除的辅助标识。
5.React 优势
1)、React 速度很快:它并不直接对 DOM 进行操作,引入了一个叫做虚拟 DOM 的概念,安插在 javascript 逻辑和实际的 DOM 之间,性能好。
2)、跨浏览器兼容:虚拟 DOM 帮助我们解决了跨浏览器问题,它为我们提供了标准化的 API,甚至在 IE8 中都是没问题的。
3)、一切都是 component:代码更加模块化,重用代码更容易,可维护性高。
4)、单向数据流:Flux 是一个用于在 JavaScript 应用中创建单向数据层的架构,它随着 React 视图库的开发而被 Facebook 概念化。
5)、同构、纯粹的 javascript:因为搜索引擎的爬虫程序依赖的是服务端响应而不是 JavaScript 的执行,预渲染你的应用有助于搜索引擎优化。
6)、兼容性好:比如使用 RequireJS 来加载和打包,而 Browserify 和 Webpack 适用于构建大型应用。它们使得那些艰难的任务不再让人望而生畏。
6.react diff 原理(常考,大厂必考)
把树形结构按照层级分解,只比较同级元素。
给列表结构的每个单元添加唯一的 key 属性,方便比较。
React 只会匹配相同 class 的 component(这里面的 class 指的是组件的名字) 合并操作,调用 component 的 setState 方法的时候, React 将其标记为 dirty.
到每一个事件循环结束, React 检查所有标记 dirty 的 component 重新绘制. 选择性子树渲染。开发人员可以重写 shouldComponentUpdate 提高 diff 的性能
7react 生命周期函数
运行中:
getDefaultProps:获取实例的默认属性
getInitialState:获取每个实例的初始化状态
componentWillMount:组件即将被装载、渲染到页面上
render:组件在这里生成虚拟的 DOM 节点
componentDidMount:组件真正在被装载之后
运行中状态:
componentWillReceiveProps:组件将要接收到属性的时候调用
shouldComponentUpdate:组件接受到新属性或者新状态的时候(可以返回 false,接收数据后不更新,阻止 render 调用,后面的函数不会被继续执行了)
componentWillUpdate:组件即将更新不能修改属性和状态
render:组件重新描绘
componentDidUpdate:组件已经更新
销毁阶段:
componentWillUnmount:组件即将销毁
9
React 中 refs 的作用是什么?
Refs 是 React 提供给我们的安全访问 DOM 元素或者某个组件实例的句柄。
我们可以为元素添加 ref 属性然后在回调函数中接受该元素在 DOM 树中的句柄,该值会作为回调函数的第一个参数返回:
class CustomForm extends Component {
handleSubmit = () =› {
console.log('Input Value: ', this.input.value);
};
render() {
return (
‹form onSubmit={this.handleSubmit}›
‹input type='text' ref={input =› (this.input = input)} /›
‹button type='submit'›Submit‹/button›
‹/form›
);
}
}
Vue 编码基础
2.1.1. 组件规范
2.1.2. 模板中使用简单的表达式
2.1.3 指令都使用缩写形式
2.1.4 标签顺序保持一致
2.1.5 必须为 v-for 设置键值 key
2.1.6 v-show 与 v-if 选择
2.1.7 script 标签内部结构顺序
2.1.8 Vue Router 规范
Vue 项目目录规范
2.2.1 基础
2.2.2 使用 Vue-cli 脚手架
2.2.3 目录说明
2.2.4注释说明
2.2.5 其他
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】