目录
http部分
2、tcp 三次握手&＃xff0c;一句话概括
3、tcp四次挥手
4、什么是跨域&＃xff0c;跨越的解决办法
5、TCP 和 UDP 的区别
6、websocket
7、HTTP 请求的方式&＃xff0c;HEAD 方式
8、几个很实用的 BOM 属性对象方法&＃xff08;什么是 Bom? Bom 是浏览器对象&＃xff09;
9、状态码
10、fetch
11、COOKIE、sessionStorage、localStorage 的区别
12、为什么将token放在COOKIE中&＃xff0c;
13、doctype
14、COOKIE 如何防范 XSS 。csrf攻击
15、COOKIE 和 session 的区别
16、http请求方式有&＃xff1a;
17、浏览器缓存
18、浏览器在生成页面的时候&＃xff0c;会生成那两颗树&＃xff1f;
19、HTML5和CSS3新特性
css部分
1、position的属性
2、visibility和display区别
3、常见的盒子垂直居中的方法有哪些请举例3种&＃xff1f;
4、Css优先级
5、如何解决盒子塌陷
6、清楚浮动的方法
7、居中
8、盒子模型
9、css新增伪类
10、BFC&＃xff08;块级格式化上下文&＃xff0c;用于清楚浮动&＃xff0c;防止 margin 重叠等&＃xff09;
11、css预处理有
12、动画animation
13、单行文本不换行出现省略号
JS部分
1、Javascript数据类型&＃xff1a;
2、什么是闭包&＃xff1f;闭包有哪些优缺点&＃xff1f;
3、什么是高阶函数
4、函数防抖&＃xff1a;
5、函数节流&＃xff1a;
6、作用域和作用域连&＃xff1a;
7、null和undefind的区别
8、JS数据类型检测方式&＃xff1a;
9、JS判断数组的方法&＃xff1a;
10、&＃61;&＃61;&＃61;和&＃61;&＃61;区别&＃xff1a;
11、深拷贝和浅拷贝&＃xff1a;
12、var 、const、let区别
13、JS中判断一个对象是否为空
14、new 一个箭头函数会咋样&＃xff1a;
15、扩展运算符作用&＃xff1a;
16、es6中rest参数&＃xff1a;
17、es6中对象和数组解构
18、JS中DOM和BOM区别
19、JS中的arguments类数组(用来存放函数参数的对象)
20、JS如何判断一个对象是否属于一个类
21、JS中map和foreach区别&＃xff1a;
22、for of 可以遍历那些对象&＃xff1a;
23、JS中遍历数组的方法&＃xff1a;
24、for---of 和for --- in 区别&＃xff1a;
25、JS中如何判断一个属性是属于实例对象还是继承于构造函数
26、JS中bind和call和apply的作用以及他们的区别
27、函数柯里化 &＃xff08;函数里面返回函数&＃xff09;
28、数组常用方法&＃xff1a;
29、方法和函数的区别&＃xff1a;
30、数组常用的方法&＃xff1f;哪些方法会改变原数组&＃xff0c;哪些不会
31.什么是原型链&＃xff1f;
32、es6有哪些新特性&＃xff1f;
33、什么是symbol
34、promise是什么&＃xff0c;有什么作用
35、什么是递归&＃xff0c;递归有哪些优缺点&＃xff1f;
36、严格模式的限制
37、git常用命令
38、Split&＃xff08;&＃xff09;和 join&＃xff08;&＃xff09;的区别&＃xff1f;
39、数组去重
40、什么原因会造成内存泄露
41、get和post区别
42、dom如何实现浏览器内多个标签页之间的通信
43、普通函数和箭头函数的区别
44、异步概念&＃xff0c;为什么要使用异步
45、遍历对象的几种方法
46、事件循环 &＃xff08;eventloop 已问tlowp&＃xff09;
vue
1、vue双向数据绑定的原理&＃xff1f;
2、vue的生命周期有哪些
3、v-if 和v-show有什么区别&＃xff1f;
4、async await 是什么&＃xff1f;它有哪些作用&＃xff1f;
5、v-for 循环为什么一定要绑定key ?
6、组件中的data为什么要定义成一个函数而不是一个对象&＃xff1f;
7、vue性能优化
8、mvvm和mvc
9、路由模式&＃xff1a;hash和history
10、第一次加载页面会触发哪几个钩子函数&＃xff1f;
11、Vuex 的 5 个核心属性是什么?
12、请说出vue.cli项目中src目录每个文件夹和文件的用法&＃xff1f;
13、$route和$router的区别
14、虚拟dom实现原理
15、怎样理解vue单项数据流
16、slot插槽
17、vue常见指令
18、vue中keep-alive 的作用
19、vue的路由传参方式 &＃xff08;params和query模式&＃xff09;
20、前后端API交互如何保证数据安全性&＃xff1f;
21、权限怎么实现
22、vue如何实现路由懒加载
23、vue中key的作用和原理&＃xff1a;
24、vue中diff算法&＃xff1a;&＃xff08;递归和双指针&＃xff09;
25、vue2中是如何检测数组变化的&＃xff1a;
26、vue2为什么需要虚拟dom&＃xff1a;
27、nextTick原理&＃xff1a;
28、v-for为什么不推荐和v-if使用在同一个元素上&＃xff1f;
29、vue组件通信方式
30、vue中watch和compted区别
31、vuex和loaclstroage的区别
1、说一下 http 和 https,http1.0和http2.0
http超文本传输协议&＃xff0c;https&＃61;http&＃43;ssl
http2.0采用多路复用&＃xff0c;二进制格式
http1.0有序并阻塞
客户端发送请求连接信息到服务端
服务端收到后返回ack确认信息
客户端把收到的ack信息发给服务端建立连接
客户端发送fin请求
服务端收到fin请求返回ack&＃xff0c;
服务端发送fin请求到客户端
客户端返回ack&＃xff0c;连接断开
根据同源策略&＃xff0c;协议、域名、端口号有一个不一样就为跨域
解决跨域的方法&＃xff1a;jsonp&＃xff0c;cors、nginx反向代理、webpack本地代理&＃xff08;vue常用proxy&＃xff09;
tcp面向连接&＃xff0c;udp不连接&＃xff0c;容易出现差错和丢失&＃xff0c;但其处理速度快&＃xff0c;占用资源少&＃xff0c;常用于视 频、音频&＃xff0c;例如QQ聊天
实时通信&＃xff0c;用于数据的实时更新&＃xff0c;常用属性&＃xff08;open打开&＃xff0c;message接受消息&＃xff0c;errorc错误触发&＃xff0c;close关闭&＃xff09;
类似get请求&＃xff0c;但响应数据无具体内容&＃xff0c;可用来查看服务器性能
location.href-- 返回或设置当前文档的 URL
1XX&＃xff08;信息性状态码&＃xff09;表示接收的请求正在处理
2XX&＃xff08;成功状态码&＃xff09;表示请求正常处理完毕
3XX&＃xff08;重定向状态码&＃xff09;表示需要进行附加操作以完成请求
4XX&＃xff08;客户端错误状态码&＃xff09;表示服务器无法处理请求
5XX&＃xff08;服务器错误状态码&＃xff09;表示服务器处理请求出错
304&＃xff1a;如果客户端发送了一个带条件的 GET 请求且该请求已被允许&＃xff0c;而文档的内容&＃xff08;自
上次访问以来或者根据请求的条件&＃xff09;并没有改变&＃xff0c;则服务器应当返回这个 304 状态码。
fetch是window下的一个方法&＃xff0c;被称为下一代Ajax技术,采用Promise方式来处理数据
因为&＃xff1a;COOKIE采用同源策略&＃xff0c;只有相同域名的网页才能获取域名对应的token,token别人通过其他域名不能获取你的COOKIE&＃xff0c;更不会获取到token。 如果不设置过期时间&＃xff0c;COOKIE保存在内存中&＃xff0c;生命周期随浏览器的关闭而结束&＃xff0c;如果设置了过期时间&＃xff0c;COOKIE保存在硬盘中&＃xff0c;关闭浏览器&＃xff0c;COOKIE数据直到过期时间而消失&＃xff1b;COOKIE是服务器发给客户端的特殊信息&＃xff0c;COOKIE是以文本的形式保存在客户端&＃xff0c;每次请求都会带上它&＃xff08;COOKIE会存储起来&＃xff0c;并不是每次登录都会重新生成一个、会重新调用存储的
用于声明文档
XSS&＃xff08;跨站脚本攻击&＃xff09;是指攻击者在返回的 HTML 中嵌入 Javascript 脚本&＃xff0c;为了减轻这些
攻击&＃xff0c;需要在 HTTP 头部配上&＃xff0c;set-COOKIE&＃xff1a;
httponly-这个属性可以防止 XSS,它会禁止 Javascript 脚本来访问 COOKIE。
secure - 这个属性告诉浏览器仅在请求为 https 的时候发送 COOKIE。
csrf&＃xff08;跨站请求伪造&＃xff09;解决办法使用验证码&＃xff0c;使用tooken
COOKIE存在客户端&＃xff0c;session在服务端
get post delete HEAD, OPTIONS, PUT
浏览器缓存主要有两类&＃xff1a;协商缓存&＃xff1a;Last-modified &＃xff0c;Etag 和强缓存&＃xff1a;cache-control&＃xff0c;Expires。
强缓存&＃xff1a;不需要发送 HTTP 请求&＃xff1b;
协商缓存&＃xff1a;需要发送HTTP请求&＃xff1b;
发送 HTTP 请求之前&＃xff0c;浏览器会先检查强缓存&＃xff0c;如果命中直接使用&＃xff0c;否则就进入协商缓存。状态码304&＃xff0c;就说明命中&＃xff0c;本地有缓存可以直接使用
DOM CSSOM规则树
html5&＃xff1a;header\footer\aside\nav\音频\视频
css3:选择器、阴影、形状转换&＃xff08;2D <-> 3D&＃xff09;、变形、动画&＃xff08;过渡动画、帧动画&＃xff09;、边框等等
relative&＃xff0c;相对定位&＃xff0c;参照自身之前位置进行偏移&＃xff0c;之前的位置仍然占用空间
absolute&＃xff0c;绝对定位&＃xff0c; 参照body或者父容器进行偏离 脱离文档流&＃xff0c;不占用位置
fixed&＃xff0c; 固定定位 可定位于相对于浏览器窗口的指定坐标 脱离文档流&＃xff0c;不占用位
static&＃xff0c;默认定位
| static | relative | absolute | fixed | |
| 定位名称 | 默认定位 | 相对定位 | 绝对定位 | 固定定位 |
| 定位对象 | 无定位 | 自身之前位置 | body或者父容器 | 浏览器窗口 |
| 位置占用 | 占用 | 占用 | 脱离文档流&＃xff0c;不占用 | 脱离文档流&＃xff0c;不占用 |
visibilty和display都是控制元素显示和隐藏的&＃xff0c;不同点是&＃xff0c;visility隐藏之后元素位置空间还在&＃xff0c;而display位置空间不在
flex&＃xff0c;定位
&＃xff01;import &＃xff0c;行内&＃xff0c;id&＃xff0c;class
父盒子设置边距&＃xff0c;overflow&＃xff1a;hidden
父盒子设置高度
父盒子末尾添加空盒子&＃xff0c;添加属性clear:both;
overflow:hidden
水平居中&＃xff1a;1、text-align&＃xff1a;center
2、父级设置成块级&＃xff0c;再text-align&＃xff1a;center
3、都是块级元素,margin:0 auto
4、flex布局实现
垂直居中&＃xff1a;1、flex布局
2、定位
3、设置与父级同高
4、使用给父元素设置display:table-cell;和vertical-align: middle;属即可
水平垂直居中&＃xff1a;
1、flex布局
2、定位
3、已知固定宽高&＃xff0c;top: 0; right: 0; bottom: 0; left: 0; margin: auto;
盒模型都是由四个部分组成的&＃xff0c;分别是margin、border、padding和content。分为两种&＃xff1a;IE盒子模型、W3C盒子模型&＃xff0c;W3C的宽不包含padding、border
&＃xff1a;nth-child(n)选中第几个
&＃xff1a;nth-last-child 选中最后一个
&＃xff1a;nth-first-firstchild 选中第一个
块级格式化上下文&＃xff0c;是一个独立的渲染区域&＃xff0c;并且有一定的布局规则。
BFC 区域不会与 float box 重叠
BFC 是页面上的一个独立容器&＃xff0c;子元素不会影响到外面
计算 BFC 的高度时&＃xff0c;浮动元素也会参与计算
那些元素会生成 BFC&＃xff1a;
根元素
float 不为 none 的元素
position 为 fixed 和 absolute 的元素
display 为 inline-block、table-cell、table-caption&＃xff0c;flex&＃xff0c;inline-flex 的元素
overflow 不为 visible 的元素
less 、sass
优点&＃xff1a;提供 CSS 缺失的样式层复用机制、减少冗余代码&＃xff0c;提高样式代码的可维护性
缺点&＃xff1a;调试更麻烦&＃xff1b;容易造成后代选择器的滥用
animation: myfirst 5s linear 2s infinite alternate;
myfirst &＃xff1a;规定 &＃64;keyframes 动画的名称。
5s &＃xff1a;规定动画完成一个周期所花费的秒或毫秒。默认是 0。
linear&＃xff1a; 规定动画的速度曲线。默认是 "ease"。
2s: 规定动画何时开始。默认是 0。
infinite &＃xff1a; 规定动画被播放的次数。默认是 1。
alternate &＃xff1b;规定动画是否在下一周期逆向地播放。默认是 "normal"。
①、基本数据类型&＃xff1a;string\number\boolean\null\undefind\symbol
②、引用数据类型&＃xff1a;object\array
区别&＃xff1a;
1、声明变量时的存储分配
基本数据类型放在栈里
引用数据类型放在堆里
2、访问机制不同
基本数据直接访问
引用数据类型访问引用地址
3、赋值变量时不同
基本类型将原始值的副本赋值最新变量
引用数据类型&＃xff0c;将引用地址赋值给新的变量
闭包&＃xff1a;能够调用其他函数作用域内变量的函数
优点&＃xff1a;变量保存
缺点&＃xff1a;内存泄漏
应用&＃xff1a;防抖、节流
高阶函数&＃xff1a;返回值或者参数是一个函数就叫做高阶函数&＃xff08;例如定时器&＃xff09;
函数防抖指的是在多次触发同一个函数时&＃xff0c;只执行最后一次
同一函数被多次触发时&＃xff0c;在一段时间内只执行一次
①、作用域&＃xff1a;
作用域就是变量的可用性的代码范围&＃xff0c;就叫做这个变量的作用域。&＃xff08;全局作用域、块级作用域、局部作用域&＃xff09;
②、作用域链&＃xff1a;
当你要访问一个变量时&＃xff0c;首先会在当前作用域下查找&＃xff0c;如果当前作用域下没有查找到&＃xff0c;则返回上一级作用域进行查找&＃xff0c;直到找到全局作用域&＃xff0c;这个查找过程形成的链条叫做作用域链
null和undefind值相同&＃xff0c;类型不同,null类型为对象&＃xff0c;undefind是它本身
1、null不应该有值&＃xff0c;转为数值等于0
2、undefind应该有值&＃xff0c;值缺失&＃xff0c;转为数值等于NAN
1、typeof-------------检测数据类型的运算符
2、instanceof--------检测某一个实列是否属于这个类&＃xff08;可以正确判对象类型&＃xff09;
3、constructor-------检测实例和类的关系&＃xff0c;从而检测数据类型
4、Object.protype.toString.call()-------检测数据类型
1、object.protype.toString.call()
Object.prototype.toString.call(arr) /&＃39;[object Array]&＃39;
2、Array.isArray()
Array.isArray(arr) /true
3、constructor
arr.constructor &＃61;&＃61;&＃61; Array /true
4、 instanceof
arr instanceof Array /true
5、Array.protypr.isProtyprOf()
Array.prototype.isPrototypeOf(arr) /true
&＃61;&＃61;判断值相等
&＃61;&＃61;&＃61;值和类型都相等
1、区别&＃xff1a;深拷贝互不影响&＃xff0c;浅拷贝修改一个&＃xff0c;另一个也会变
2、实现&＃xff1a;
浅拷贝&＃xff1a;直接赋值
深拷贝&＃xff1a;1、JSON.parse(JSON.stringify(object))
2、扩展运算符实现
1、var
使用var声明的变量时为顶级&＃xff08;window对象&＃xff09;变量&＃xff0c;也是全部变量
使用var声明的变量存在变量提升情况
使用var可以对一个变量多次赋值&＃xff0c;后面的声明会覆盖前面的变量声明
在函数中再次使用var声明这个变量的时候&＃xff0c;他是局部变量&＃xff0c;不适用还是全局变量
2、let
let所声明的变量只在let命令所在的代码块中生效
let不存在变量提升
let不允许在同一作用域下重复声明
3、const
const声明一个只读的常量&＃xff0c;一旦声明不能改变
const一旦声明&＃xff0c;必须赋值
1、使用JSON中自带的。JSON.stringify()方法判断
const fff&＃61;{}
console.log(JSON.stringify(fff) &＃61;&＃61; "{}");
2、使用Object.keys()判断
const fff&＃61;{}
console.log(Object.keys(fff).length);
会报错&＃xff0c;new的是构造函数&＃xff0c;而箭头函数不能当作构造函数
1、复制&＃xff08;基本数据类型就是深拷贝&＃xff0c;引用类型就是浅拷贝&＃xff09;
2、合并
3、字符串变成数组
配置扩展运算符使用&＃xff0c;把一个分离的参数系列整合成一个数组&＃xff0c;值是一个数组
1、对象
const obj&＃61;{name:"111",age:"12"}
const {name,age}&＃61;obj
2、数组
const [a,b,c]&＃61;[1,2,3]
1、DOM、document,文档对象类型&＃xff0c;操作对象是文档
2、BOM、browser object model 浏览器对象模型&＃xff0c;操作对象是window
BOM是控制浏览器行为的api&＃xff0c;DOM是一个页面结构api
1、将数组的方法应用到类数组上
2、将类数组转化成数组
3、使用展开运算符将类数组转成数组
1、instanceof
2、constructor
返回值不同&＃xff0c;map可以返回值&＃xff0c;foreach返回undefind
es6一个新增的遍历方法&＃xff0c;但只限于迭代器&＃xff08;iterator&＃xff09;所以普通对象不可以遍历
1、foreach
2、filter
3、for--of
4、reduce
5、map
都可以遍历数组&＃xff0c;但是for in返回的是下标&＃xff0c;for of返回的是值
for in可以遍历对象&＃xff0c;for of不可以
通过hasOwnProperty()检测一个属性是否属于自身对象&＃xff0c;还是继承于原型链上
hasOwnProperty可用于检测对象中是否含有某一个键值对
let arr&＃61;{a:1,b:2,c:{d:1,g:2}}
arr.hasOwnProperty(&＃39;a&＃39;)
true
arr.hasOwnProperty(&＃39;b&＃39;)
true
arr.hasOwnProperty(&＃39;d&＃39;)
false
bind、call、apply
都能改变this指向&＃xff0c;第一个参数都是this指向的对象&＃xff0c;第二个参数bind和call是用逗号分隔&＃xff0c;而apply则是直接传入数组&＃xff0c;另外&＃xff0c;bind是创建一个函数&＃xff0c;需要调用
this指向问题&＃xff1a;
方法&＃xff0c;指向方法所属的对象
直接用 指向全局
函数中&＃xff0c;指向全局
函数中&＃xff0c;严格模式下指向undeifnd
事件中&＃xff0c;指向将要接受事件的元素
函数柯里化就是我们给一个函数传入一部分参数&＃xff0c;此时就会返回一个函数来接收剩余的参数。部分求值
function ddd () {
let args &＃61; Array.prototype.slice.call(arguments)
let inner &＃61; function () {
args.push(...arguments)
return inner
}
inner.toString &＃61; function () {
return args.reduce((a, b) &＃61;> {
return a &＃43; b
})
}
return inner
}
const result &＃61; ddd(1, 2)(3)(4, 5, 6).toString()
console.log(result)
filter &＃xff1a;检测所有元素&＃xff0c;返回所有符合元素的数组
let d &＃61; arr.filter((item) &＃61;> {
return item.name &＃61;&＃61; &＃39;1111&＃39;
})
console.log(d) //[{ name: 1111 }]
some&＃xff1a;检测数组元素中是否有元素符合指定条件
let f &＃61; arr.some((item) &＃61;> {
return item.name &＃61;&＃61; &＃39;22222&＃39;
})
console.log(f) //false
map &＃xff1a;通知指定函数处理每个元素&＃xff0c;并且返回处理后元素数组
arr.map((item) &＃61;> {
item.age &＃61; &＃39;fff&＃39;
})
console.log(arr) //[{name: 1111, age: &＃39;fff&＃39;},{name: 222, age: &＃39;fff&＃39;}]
reduce&＃xff1a;将数组元素计算为一个值&＃xff08;左->右&＃xff09;
sort&＃xff1a;对数组元素进行排序
在对象中的函数叫方法&＃xff0c;不在对象中的叫函数
方法通过对象调用&＃xff0c;函数通过函数名调用
改变&＃xff1a;pop、push、sort、shift、unshift
不改变 &＃xff1a;some&＃xff0c;map&＃xff0c;filter&＃xff0c;indexof
每一个实例对象上都有一个proto对象属性指向构造函数得原型对象&＃xff0c;构造函数得原型对象也是一个对象&＃xff0c;也有proto属性&＃xff0c;这样一层一层往上找得过程就形成了原型链
let&＃xff0c;const&＃xff0c;for of&＃xff0c;箭头函数&＃xff0c;扩展运算符&＃xff0c;set&＃xff0c;map。promise
es6引入&＃xff0c;表示独一无二的值
promise是个对象&＃xff0c;用来解决回调地狱&＃xff0c;promise有三个状态(pedding等待&＃xff0c;resolved成功&＃xff0c;rejected失败)&＃xff0c;promise是同步&＃xff0c;promise.then,promise.catch是异步
函数内部调用自身就是递归
优点&＃xff1a;机构清晰&＃xff0c;可读性强
缺点&＃xff1a;效率低
变量必先声明再使用
函数的参数不能有同名属性
禁止this指向全局
git add
git init
git clone
git push
git status
git commit -m ‘描述信息’
split根据指定符号分割字符串转成数组
join根据指定符号把数组拼接成字符串
set&＃xff0c;双重for循环&＃xff0c;indexof&＃xff0c;filter
闭包&＃xff0c;定时器延时器没清理
post比get安全&＃xff0c;传值量大&＃xff0c;理由是get通过url传值&＃xff0c;浏览器对url长度有限制&＃xff0c;而post则是通过请求体传参
websocket或者localstorage
箭头函数没有函数名&＃xff0c;没原型&＃xff0c;原型是undefind,this指向全局对象&＃xff0c;函数指向引用对象
call&＃xff0c;bind&＃xff0c;apply改变不了箭头函数指向
多个任务同时进行&＃xff0c;且执行顺序是无序的genertor
原因&＃xff1a;js是单线程的&＃xff0c;为了提高代码的可读性
常见的异步&＃xff1a;延时器、定时器、promise.then、ajax也可以设置为异步、回调函数
实现异步&＃xff1a;promise、async await(es7)、Generator(es6)
for in
Object.keys()遍历键
Object.values遍历值
Object.entires 遍历键值对&＃xff0c;数组形式输出
1、js是单线程&＃xff0c;防止代码阻塞&＃xff0c;任务分为同步任务和异步任务
2、同步代码交给js引擎执行&＃xff0c;异步代码交给宿主环境
3、同步代码放入执行栈中&＃xff0c;异步代码等待时机成熟送入执行队列排队
4、执行栈执行完毕&＃xff0c;会去任务队列看是否有异步任务&＃xff0c;有就推送到执行栈执行&＃xff0c;反复循环查看执行&＃xff0c;这个过程就叫做事件循环
异步任务分为微任务&＃xff08;js引擎promise.then,saync,await&＃xff09;&＃xff0c;宏观任务&＃xff08;宿主环境script块、setimeout&＃xff09;
vue2是通过数据劫持&＃xff08;es5的object.defineproperty()&＃xff09;和发布者-订阅者模式配合
vue3是通过proxy代理加Reflect(反射)
beforecreate创建前
created创建完成
beforemounted挂载前
mounted 挂载完成
beforeupdate挂载前
updated挂载完成
beforedestory销毁前
destory销毁后
v-if是动态的往dom树内创建或者销毁dom元素&＃xff0c;v-show是动态控制display&＃xff1a;none 实现dom元素的隐藏和显示
async await&＃xff08;es7&＃xff09;是promise的语法糖&＃xff0c;实现异步的同步写法&＃xff0c;async和await必须连用&＃xff0c;async声明一个函数是异步的&＃xff0c;await用来等待一个异步方法执行完成
给每个dom元素加上唯一标识&＃xff0c;使得diff算法&＃xff08;递归和空指针&＃xff09;可以正确识别这个节点&＃xff0c;使页面渲染更加迅速
每个组件都是vue实例&＃xff0c;组件共享data属性&＃xff0c;当data的值是同一个引用类型的值时&＃xff0c;会相互影响
路由懒加载&＃xff0c;ui组件按需引入&＃xff0c;防抖节流、函数式组件
mvvm&＃xff1a;模板m&＃xff0c;视图v&＃xff0c;vm数据视图交换层&＃xff0c;简化了大量dom操作
mvvm通过数据驱动视图层的显示而不是节点操作
mvc中的view和model是可以直接访问的,造成耦合度较高
mvvm真正将页面和数据逻辑分离,将数据绑定放到js实现,解决了mvc中大量的dom操作使得页面渲染速度将降低,加载速度慢
前端路由的两种模式&＃xff0c;hash的url中有#&＃xff0c;history没&＃xff0c;相对而言&＃xff0c;history更美观&＃xff0c;但是需要后端配合使用&＃xff0c;hash兼容比较好
1、父组件
beforecreate、created、beforemounte、mounted
父beforeCreate→父created→父beforeMount→子bereforeCreate→子created→子beforeMound→子mounted→父mounted
父beforeUpdate→子beforeUpdate→子updated→父updated
父beforeDestroy→子beforeDestroy→子destroyed→父destroyed
states:保存数据
getters: 计算属性
mutations: 修改数据
actions: 提交数据
modules: 模块化
assest静态资源&＃xff08;图片&＃xff09;
components(组件)
router(路由)
view(视图)
app.vue(主组件)
main.js入口文件
route相当于正在跳转的路由对象&＃xff0c;可以从里面获取name,path,params,query等等
router:是vuePouter实例&＃xff0c;用来跳转页面&＃xff0c;this.$router.push()
用js对象模拟真实DOM树&＃xff0c;对真实DOM进行抽象
diff算法&＃xff1a;比较状态变更后新旧树差异
pach算法&＃xff1a;将两个虚拟DOM对象的差异应用到真实DOM树
数据总是从父组件传到子组件&＃xff0c;子组件没有权力去修改父组件传过来的数据&＃xff0c;只能请求父组件对源数据就行修改
slot插槽&＃xff0c;可以理解为slot在组件模板中提前占据了位置&＃xff0c;当复用组件时&＃xff0c;使用相关的slot标签时&＃xff0c;标签里的内容就会自动替换组件模板中对应slot标签的位置&＃xff0c;作为承载分发内容的出口
主要作用是&＃xff1a;复用和扩展组件&＃xff0c;做一些定制化组件的处理
默认插槽、具名插槽、作用域插槽
v-module
v-bind
v-if
v-else
v-text
v-for
主要是用于需要频繁切换的组件时进行缓存&＃xff0c;不需要重新渲染页面
组件状态保留&＃xff0c;避免重复渲染
传参方式可划分为 params 传参和 query 传参&＃xff0c;
params只能通过name引入路由
query模式既可以通过name又可以通过path&＃xff0c;建议通过path
使用tooken&＃xff0c;使用https请求
不同的角色有不同的权限&＃xff0c;根据登录的信息&＃xff0c;获取路由&＃xff0c;操作权限
菜单权限 接口获取&＃xff0c;存放vuex和localstorage
界面权限 路由导航守卫&＃xff0c;动态路由
按钮权限 路由规则中加meta&＃xff0c;通过路由对象获取meta数据&＃xff0c;自定义指令
接口权限 接口拦截文件配置
1&＃xff1a;Vue异步组件
2&＃xff1a;ES6标准语法 component: () &＃61;> import&＃xff08;&＃xff09;---------推荐使用&＃xff01;&＃xff01;&＃xff01;&＃xff01;&＃xff01;
3&＃xff1a;webpack的require&＃xff0c;ensure()
vue中的key用来判断虚拟节点是否相同&＃xff0c;相同就可以复用老节点
dom树同级比较&＃xff0c;不一样直接替换&＃xff0c;一样对比属性&＃xff0c;对比子类&＃xff0c;如果都有的情况&＃xff0c;双指针&＃xff0c;头头&＃xff0c;尾巴&＃xff0c;对比查找&＃xff0c;进行复用
vue2没有使用defineProperty()对数组的每一项进行拦截&＃xff0c;而是选择重写数组
数组中如果是对象的数据类型&＃xff0c;也继续递归处理
数组的索引和长度变化是无法控制监控的
直接操作真实dom性能低
优点&＃xff1a;
1、组件高度抽象化
2、可以更好的实现ssr&＃xff0c;同构渲染等
3、框架跨平台
1、nextTick中的回调函数&＃xff0c;在下一次DOM更新结束之后执行回调&＃xff0c;可以保证用户定义的逻辑在DOM更新后执行
v-for的优先级高于v-if&＃xff0c;也就是说v-if将运行于每个v-for循环中
computed计算属性&＃xff0c;可缓存&＃xff0c;不支持异步
watch 监听属性&＃xff0c;无缓存&＃xff0c;支持异步&＃xff0c;有两个属性&＃xff0c;immediate:组件加载&＃xff0c;直接触发 deep&＃xff1a;深度监听
| vuex | loaclstroage | |
| 存储方式 | 内存 | 本地 |
| 响应式 | 可以 | 不可以 |
| 永久性 | 刷新页面丢失 | 不丢失 |
| 用途 | 一般用组件间传值 | 跨页面传递数据 |
京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有 