总结
为了帮助大家更好温习重点知识、更高效的准备面试，特别整理了《前端工程师面试手册》电子稿文件。
内容包括html，css，JavaScript，ES6，计算机网络，浏览器，工程化，模块化，Node.js，框架，数据结构，性能优化，项目等等。
包含了腾讯、字节跳动、小米、阿里、滴滴、美团、58、拼多多、360、新浪、搜狐等一线互联网公司面试被问到的题目，涵盖了初中级前端技术点。
前端面试题汇总
JavaScript
性能
linux
-
可以用于页面中简单粗暴的调试
-
注意: 必须在data这个函数中返回的对象中声明
(3).什么是指令
-
在vue中提供了一些对于页面 + 数据的更为方便的输出,这些操作就叫做指令, 以v-xxx表示
-
比如html页面中的属性
<div v-xxx ></div> -
比如在angular中 以ng-xxx开头的就叫做指令
-
在vue中 以v-xxx开头的就叫做指令
-
指令中封装了一些DOM行为, 结合属性作为一个暗号, 暗号有对应的值,根据不同的值，框架会进行相关DOM操作的绑定
(4).vue中常用的v-指令演示
-
v-text:元素的InnerText属性,必须是双标签 跟{{ }}效果是一样的 使用较少
-
v-html: 元素的innerHTML
-
v-if : 判断是否插入这个元素,相当于对元素的销毁和创建
-
v-else-if
-
v-else
-
v-show 隐藏元素 如果确定要隐藏, 会给元素的style加上display:none。是基于css样式的切换
v-text 只能用在双标签中
v-text 其实就是给元素的innerText赋值
v-html 其实就是给元素的innerHTML赋值
v-if 如果值为false,会留下一个<!---->作为标记，万一未来v-if的值是true了，就在这里插入元素
如果有if和else就不需要单独留坑了
如果全用上 v-if 相邻v-else-if 相邻 v-else 否则 v-else-if可以不用
v-if和v-else-if都有等于对应的值，而v-else直接写
v-if家族都是对元素进行插入和移除的操作
v-show是显示与否的问题
注意: 指令其实就是利用属性作为标识符,简化DOM操作,
看：v-model="xxx"
v-model 代表要做什么 xxx代表针对的js内存对象
写在那个元素上，就对哪个元素操作
(5).v-if和v-show的区别 (官网解释)
v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。
相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。
一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。
(6).v-bind使用
-
给元素的属性赋值
-
可以给已经存在的属性赋值 input value
-
也可以给自定义属性赋值 mydata
-
语法 在元素上
v-bind:属性名="常量||变量名" -
简写形式
:属性名="变量名"
(7).v-on的使用
-
处理自定义原生事件的,给按钮添加click并让使用变量的样式改变
-
普通使用
v-on:事件名="表达式||函数名" -
简写方式
@事件名="表达式"
(8).v-model
-
双向数据流（绑定）
-
页面改变影响内存(js)
-
内存(js)改变影响页面
(9).v-bind 和 v-model 的区别?
-
input v-model="name" -
双向数据绑定 页面对于input的value改变，能影响内存中name变量
-
内存js改变name的值，会影响页面重新渲染最新值
-
input :value="name" -
单向数据绑定 内存改变影响页面改变
-
v-model: 其的改变影响其他 v-bind: 其的改变不影响其他
-
v-bind就是对属性的简单赋值,当内存中值改变，还是会触发重新渲染
(10).v-for的使用
-
基本语法
v-for="item in arr" -
对象的操作
v-for="item in obj" -
如果是数组没有id
-
v-for="(item,index) in arr" :class="index" -
各中v-for的属性顺序(了解)
-
数组 item,index
-
对象 value,key,index
(11).过滤器filter
-
filters
-
将数据进行添油加醋的操作
-
过滤器分为两种
-
1:组件内的过滤器(组件内有效)
-
2:全局过滤器(所有组件共享)
局部过滤器的使用
-
先注册,后使用
-
组件内
filters:{ 过滤器名:过滤器fn }最终fn内通过return产出最终的数据 -
使用方式是
{{ 原有数据 | 过滤器名 }} -
过滤器fn:
-
声明
function(data,argv1,argv2...){} -
使用
{{ 数据 | 过滤器名(参数1,参数2) }}
全局过滤器的使用
-
语法：
Vue.component('过滤器的名字',fn) -
调用：跟局部组件调用方式一样
(12).侦听器watch
- watch 监视单个属性和对象
watch:{
//监视复杂类型,无法监视的原因是因为监视的是对象的地址
// obj:function(newV,oldV) {
// console.log(newV,oldV);
// },
// key是属于data属性的属性名，value是监视后的行为 fn中的参数（新值，旧值）
msg:function (newV,oldV) {
console.log(newV,oldV);
if (newV==='alex') {
console.log('sb');
}
},
// 深度监视 ：object ||array
stus:{
deep:true,//深度监视
handler:function (newV,oldV) {
console.log(newV[0].name)
}
}
小结： 基本数据类型 简单监视，复杂数据类型深度监视
(13).计算属性computed
- computed 同时监视多个属性
默认computed只有getter方法
web浏览器中的javascript
- 客户端javascript
- 在html里嵌入javascript
- javascript程序的执行
- 兼容性和互用性
- 可访问性
- 安全性
- 客户端框架
- 开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
window对象
-
计时器
-
浏览器定位和导航
-
浏览历史
-
浏览器和屏幕信息
-
对话框
-
错误处理
-
作为window对象属性的文档元素
