1、diff 算法和虚拟 DOM
diff 算法特点:
- 1、同级比较,不会跨级别比较时间复杂度为 O(n)
- 2、在 diff 比较的过程中,循环从两边向中间靠拢
第一步: vue 的虚拟 DOM 首先会对新老 VNode 的开始位置和结束位置进行标记
第二步: 对新老节点的比较并对应移动 VNode 节点
- 情形一: 当新老 VNode 节点的 start 等于 sameVNode 时,直接使用 patchVnode 即可,同时新老 VNode 节点对的索引都加 1
- 情形二: 当新老 VNode 节点的 end 等于 sameVNode 时,同样直接使用 patchNode 即可,同时新老 VNode 节点的索引值都减 1
- 情形三: 当老 VNode 节点的 start 和新 VNode 的 end 满足 sameVnode 时候,数据更新后,oldStartVNode 跑到 oldEndVNode 后面去了,patchVnode 还要将当前真实 dom 节点移动到 oldEndVNode 后面,老 Vnode 节点索引加 1,新 Vnode 节点索引减 1
- 情形四: 当老 VNode 的 end 节点和新 VNode 节点的 start 满足 sameVNode 时,说明数据更新后 oldEndVnode 跑到 oldStartVnode 后面去了,patchVNode 后还要将当前真实 dom 移动到 oldStartVnode 后面,老 Vnode 节点索引减 1,新 Vnode 节点所以加 1
如果都不满足以上四种情形，那说明没有相同的节点可以复用。
第三步
当 while 循环结束后,根据新老节点的数目不同,分别进行相应的节点添加和删除.如果新节点的数目大于老节点,则需要把多出来的节点创建出来添加到真实 dom 中,如果老节点数目大于新节点数目,则需要把多出来的老节点从真实 dom 中删除
2、导航路由钩子
1、全局路由钩子: beforeEach、afterEach、beforeResolve
2、单个路由钩子: beforeEnter
3、组件路由钩子: beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave
3、filter、watch 和 computed 的区别
watch:监听值,只能是 data 里面的属性,可以使用异步函数
computed:定义一个函数,这个函数会返回一个值,然后返回处理的数据,可以包含大量逻辑计算,不支持异步函数
filter:过滤器
全局过滤器: vue.filter(‘toFixed’, (模型变量, 其他参数))
局部过滤器: vm 控制器里面
4、指令及使用指令的钩子
全局指令
// 全局指令
Vue.directive('focus', {
inserted: function(el) {
el.focus()
}
})
// 局部指令
directive: {
focus: {
inserted: function(el) {
el.focus()
}
}
}
// 使用指令的钩子函数
bind 只调用一次,第一次绑定元素时使用
inserted 插入节点时使用
update 节点更新时使用
componentUpdated 指令所在的节点和其子节点更新时使用
unbind 只调用一次,指令与组件解绑时使用
5、上传组件包的方法
npm login 登录
npm publish 发布
6、nginx 有哪些配置
http {
include mime.types
default_type application/octet-stream
server {
listen 80;
server_name: localhost;
location {
root html;
index index.html;
}
error_page 502 503 504 /50x.html;
location = /50x.html {
root html
}
}
}
7、@async @await 与 @Promise 的关联
- Promise 对象是一个代理对象 被代理的值在 Promise 对象创建时可能是未知的
- async await 是 promise 的语法糖,只是为了书写代码时更流畅,增强代码可读性,定义了一个异步函数
- await 必须出现在 async 函数内部 不能单独使用
- await 返回的是一个 promise 对象
- async await Reject 捕捉是用 try {} catch {}
8、@GET @POST 的区别
- GET 请求有长度限制,而 POST 请求没有
- GET 浏览器退回无害,POST 则会重新发起请求
- GET 请求参数通过 URL 传递,POST 放在请求体中
- GET 请求更不安全,因为参数暴露在 URL 上面
- GET 产生一个 TCP 数据包 POST 产生 2 个 TCP 数据包
- GET 请求 浏览器会把 http hdeader 和 data 一并发送出去，服务器响应 200, POST 请求 浏览器先发送 header，服务器响应 100 continue 浏览器在发送 data 服务器响应 200
9、nextTick 的原理
在下次循环 DOM 更新后执行延迟回调,在修改数据后立即执行这个方法,获取更新后的 DOM
callbacks; // 异步操作队列
pending; // 标识同一个时间只能执行一次
timerFunc; // 执行异步延迟函数
// 把回调函数放入 callbacks中等待执行
// 将执行函数放到宏任务或者微任务中
// 事件循环到了宏任务或者微任务,执行函数依次执行callbacks中的函数
10、https 缓存策略
强制缓存(cache-control) 放在请求头中
max-age
no-cache (不用本地缓存)
no-store (不用本地和服务器缓存)协商缓存 (对比缓存) 依据服务端和客户端的资源标识符是否一样
Last Modified
Etag
11、事件循环
12、ProxyTable 原理
浏览器禁止跨域,但是服务器可以.npm run dev 运行了一个服务器,ProxyTable 实际上是将请求发送给自身服务器,然后在由服务器转发给后台服务器,做了一层代理,所以不会出现跨域问题
13、webpack 热重载
webpack 的 Watch Mode 观察模式 自动编译 需要手动刷新浏览器
webpack-dev-server web 服务器相当于启用了一个 express+http 服务器+webpack-dev-middleware 自动编译+实时重新加载浏览器
webpack-dev-middleware
14、scoped 原理
vue 通过在 DOM 结构及 css 样式上添加唯一的标记,保证唯一,达到样式私有化,不会污染全局,主要是通过 Postcss 进行转换,Postcss 给左右 dom 元素添加了一个独一无二的动态属性,组件内部 dom
15、常用的 es6 语法
Object.assign()
Object.entries()
Object.keys()
Object.values()
Array.from()
Array.of()
Symbol
Set()
Map()
16、输入一个 url 请求到页面展示经历了哪些过程
1、DNS 解析
2、TCP 连接
3、发送 HTTP 请求
4、服务器处理请求并返回 HTTP 报文
5、浏览器解析并渲染页面
6、连接结束
17、for 和 forEach 的区别
for 循环可以中断循环 forEach 不可以中断
for 循环是一种循环机制,只是能通过它遍历数组
forEach 是负责遍历可迭代对象
性能比较 for > forEach
18 防抖和节流
节流: n秒后只运行一次,n秒内重复触发,只有一次生效
防抖: n秒后执行该事件,n秒内重复触发,则重新计时
