这篇博客主要梳理了Vue相关的面试知识点，包括箭头函数与普通函数的区别、new操作的执行过程、call、apply、bind的异同、判断数组的方法、Vue的双向绑定原理、MVVM模式、Vue生命周期、keep-alive组件的作用以及Vue的性能优化策略等。
只是我自己刷的哦！不是真的面试问到的，是在为面试做准备！
箭头函数和普通函数有什么区别？
箭头函数是匿名函数，不能作为构造函数，不能使用new。
箭头函数不绑定arguments，取而代之用rest参数解决。
箭头函数不绑定this，会捕获其所在的上下文的this值，作为自己的this值。
箭头函数通过call()或apply()方法调用一个函数时，只传入了一个参数，对this没有影响。
箭头函数没有原型属性。
箭头函数不能当做Generator函数，不使用yield关键字。
new操作具体做了什么？
创建一个空的对象
将this指向这个对象
通过this，为这个对象添加属性
通过this，将__proto__属性指向构造函数的原型对象
call、apply、bind区别？
call()、apply()和bind()都是用来改变函数执行时的上下文的，可以借助他们实现继承。
call()和apply()唯一的区别就是参数不一样，call()是apply()的语法糖。
bind()是返回一个新的函数，供以后调用，而apply()和call()是立即调用。
JS判断变量是不是数组的方法？
1、instanceof
var arr=[];
arr instanceof Array
2、原型prototype+toString+call()
var arr=[];
Object.prototype.toString.call(arr)
3、原型protitype+isPrototypeOf()
var arr=[];
Array.prototypr.isPrototypeOf(arr)
4、构造函数constructor
var arr=[];
console.log(arr.constructor.toString())
5、数组方法isArry()
var arr=[];
Array.isArray(arr)
Vue双向绑定
数据劫持：vue.js是采用数据劫持结合发布者-订阅者模式，通过Object.definePrototy()来劫持各个属性的setter、getter，在数据变动时发布消息给订阅者，触发相应的监听回调。
MVVM
MVVM为: Model、View、ViewModel
Model代表数据模型，例View返回的data对象
View代表UI组件
VM是View和Model的桥梁，主要负责:数据绑定和视图监听
所理解的MVVM响应式原理
MVVM作为绑定的入口，整合Observer、Compile和Watcher三者，通过Observer来监听model数据变化，通过Compile来解析编译模板指令，最终利用Watcher搭建起Observer、Compile之间的通信桥梁，达到数据变化->视图更新；视图交互变化->数据model变更的双向绑定效果。
Vue生命周期（2.x）
beforeCreate：创建之前，还没有data数据和Method方法
Created：创建完成，data和Method可以使用了
beforeMount：渲染之前
mounted：页面渲染已经完成，可以操作DOM了
beforeUpdate：data改变之前，对应的组件重新渲染之前
updated：data改变之后，对应的组件重新渲染完成
beforeDestory：在实例销毁之前，此时实例还可以使用
destroyed：实例销毁后
第一次进入组件或者页面，会执行哪些生命周期？
beforeCreate
Created
beforeMount
mounted
- 如果使用了keep-alive组件会多执行一个activated
- 但是第二次进入之后就只执行activated，因为组件被缓存了。
keep-alive组件作用
vue性能优化
一般结合路由使用，如果没有变化，可以做一个缓存，不用重新加载。
activated和deactivated两个生命周期钩子函数。
用keep-alive包裹的组件在切换的时候不会进行销毁，而是缓存到内存中，并执行deactivated函数，命中缓存渲染结束后会执行activated钩子函数。
Vue优化方式
v-if和v-show
图片懒加载
路由懒加载
减少重新渲染和创建dom结点的时间，采用虚拟dom
使用Object.freeze()方式冻结data中的属性，从而阻止数据劫持
v-if和v-show
1、v-if是动态向dom树内添加或者删除dom元素
v-show是通过设置dom元素的display样式控制显示与隐藏
2、编译过程：v-if切换有一个局部编译/卸载的过程，切换过程中合适的销毁和重建内部的事件监听和子组件
v-show只是简单的css切换
3、编译条件：v-if是惰性的，如果初始条件为假，则什么也不做；只有在第一次条件变化时才开始局部编译
v-show是在任何条件都被编译，然后被缓存，dom元素保留
4、v-if性能切换消耗更高
v-show初始渲染消耗更高
5、v-if适合运营条件不太变化
v-show适合频繁切花
虚拟dom
虚拟dom是相对于浏览器所渲染出来的真实dom，在react、vue等技术出来之前，想要改变页面展示内容只能通过遍历查询dom数找到需要修改的dom节点，然后进行修改来达到更新ui的目的。
这种方式相当损耗计算资源，因为每次查询都要遍历整颗dom树，如果建立一个和dom树虚拟的dom对象（js对象），以对象嵌套的方式来表示dom树，那么每次dom的更改就变成了js对象属性的更改，这样查找js对象的属性变化比查询dom树性能开销小。
dom树优缺点
缺点：首次大量渲染dom时，由于多了一层虚拟dom的计算，会比插入innerHTML慢
优点：减少了dom操作，减少了回流与重绘。
保证性能的下限，性能虽然不是最好但是具备局部更新的能力，大部分时候会比正常dom性能高。
回流与重绘
回流
render树中一部分或全部元素需要改变尺寸、布局、或着需要隐藏而需要重新构建，这个过程叫做回流
回流必将引起重绘
每个页面至少需要一次回流，就是在页面第一次加载的时候。
重绘
render树中一部分元素改变，而不影响布局的，只影响外观的，比如颜色。
页面至少经历一次回流和重绘（第一次加载的时候）。
当页面中元素样式的改变并不影响它在文档流中的位置时（例如：color、background-color、visibility等），这些属性只是影响元素的外观，风格，而不会影响布局的，浏览器会将新样式赋予给元素并重新绘制它，这个过程称为重绘。
触发回流或重绘的情况：
• 页面首次渲染
• 浏览器窗口大小发生改变
• 元素尺寸或位置发生改变
• 元素内容变化（文字数量或图片大小等等）
• 元素字体大小变化
• 添加或者删除可见的DOM元素
区别
回流必将引起重绘，但是重绘不一定会引起回流。
比如只有颜色改变的时候只会发生重绘不会发生回流。
页面布局和几何属性改变时就需要回流。
添加或者删除可见的DOM元素，元素位置改变，元素尺寸改变、内容改变、页面渲染初始化、浏览器窗口改变等
优化
使用DocumentFragment进行缓存操作，引发一次回流和重绘；
使用display:none技术，只引发两次回流和重绘；
使用cloneNode(true or false)和replaceChild技术，引发一次回流和重绘；
不要经常访问会引起浏览器flush队列的属性，如果确实要访问，就利用缓存；
让元素脱离动画流，减少回流的Render tree的规模；
位于<head>间的代码片段是做什么用的？
-
<meta name="viewport" content="width=device-width, initial-scale=1">表示支持响应式 -
<meta name="apple-mobile-web-app-capable" content="yes" />
iPhone私有标签，它表示：允许全屏模式浏览 -
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
iPhone私有标签，它指定的iPhone中safari顶端的状态条的样式 -
<meta name="format-detection" content="telephone=no; email=no" />
不识别邮件和不把数字识别为电话号码 -
initial-scale ：初始的缩放比
-
minimum-scale：允许用户缩放到最小比例
-
maximum-scale：允许用户缩放到最大比例
-
user-scalable：用户是否可以手动缩放
网关协议
BGP：边界网关协议
ICMP：控制报文协议
PPP：点对点协议
RIP：内部网关协议（IGP）
BGP：外部网关协议
480
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
