4.5 KiB
4.5 KiB
v-if和v-show的区别，分别适合什么场景
v-if 操作的实际上是 dom 元素的创建或销毁。v-show 操作的是display:none/block属性。频繁地切换使用 v-show，否则使用 v-if。
async await 关键字的用途
async await 是es7里面的新语法，async 用于声明一个异步函数，await 阻塞等待一个异步方法执行完成。
Cookie 、LocalStorage 、 SessionStrorage的区别
- Cookie 是 http 协议的组成部分，会在同源 http 请求中携带，数据根据不同浏览器限制，大小一般不能超过4k
- LocalStorage 和 SessionStrorage 仅会持久化存储，大小一般是5M
Vue组件中的data为什么是一个函数而不是一个对象
组件共享 data 属性，当 data 的值是同一个引用类型的值时，改变其中一 个会影响其他
用CSS3让一个div垂直居中怎么写
transform
#container {
position: relative;
}
#center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
flex
#container {
display: flex;
justify-content: center;
align-items: center;
}
谈谈性能优化案例
减少 http 请求次数、压缩上线代码、懒加载、动态渲染组件、CDN。
Vue实例挂载在哪个标签
body 标签里，在 vue 中是获取不了 body 标签的，需要用原生js获取
用过Map和Set吗，Set和数组的区别是什么？Map和Object的区别
set 是 es6 提供的一种新的数据结构，它类似于数组，但是成员的值都是唯一的。 map 是 es6 提供的一种新的数据结构,它类似于对象，也是键值对的集合，但是键的范围不仅限于字符串，各种类型的值都可以当做键。也就是说，Object 结构提供了“字符串—值”的对应，Map 结构提供 了“值—值”的对应，是一种更完善的 Hash 结构实现。如果你需要“键值对”的数据结构，Map 比 Object 更合适。
图片懒加载是怎么实现的？
就是我们先设置图片的 data-set 属性（当然也可以是其他任意的，只要不会发送 http 请求就行了，作用 就是为了存取值）值为其图片路径，由于不是 src，所以不会发送 http 请求。然后我们计算出页面 scrollTop 的高度和浏览器的高度之和， 如果图片距离页面顶端的坐标 Y（相对于整个页面，而不是浏览 器窗口）小于前两者之和，就说明图片就要显示出来了（合适的时机，当然也可以是其他情况），这时 候我们再将 data-set 属性替换为 src 属性即可。
怎么防止被CSRF和XSS攻击
- CSRF （ Cross-site request forgery ）跨站请求伪造
- Token 验证
- 把token放在header
- Referer 验证，只接受本站的请求，服务器才做响应，如果不是就拦截
- XSS（Cross Site Scripting）跨域脚本攻击
- 对用户输入的数据进行 HTML Entity 编码
- 移除用户输入的和事件相关的属性。如 onerror 可以自动触发攻击，还有 onclick 等
- 移除用户输入的 Style 节点、 Script 节点、 Iframe 节点。
Vue3的组件式API和选项式API的区别
- 选项API，通过定义methods，computed，watch，data等属性与方法，共同处理页面逻辑。
- 如果是小组件，适合用选项式API
- 如果是大组件，属性的列表很长，会导致组件难以阅读和理解
- 组件式API根据逻辑功能来组织的，一个功能所定义的所有 API 会放在一起，更高内聚、低耦合。
- 对 tree-shaking 友好，代码也更容易压缩
- 几乎用不到this，避免了this指向不明的情况
Vue3是通过哪些方面提升性能的
- 编译阶段
- diff算法优化
- 静态提升
- 事件监听缓存
- SSR优化
- 源码体积
- Tree shanking：清除多余代码，优化项目打包体积
- 任何一个函数，如ref、reavtived、computed等，仅仅在用到的时候才打包，没用到的模块都被摇掉，打包的整体体积变小
- 响应式
- vue2中采用 defineProperty来劫持整个对象，然后进行深度遍历所有属性，给每个属性添加getter和setter，实现响应式
- vue3采用proxy重写了响应式系统，因为proxy可以对整个对象进行监听，所以不需要深度遍历
Vue3新增的组件
- Fragment 不再限制 template 只有一个根节点
- Teleport 传送门，允许我们将控制的内容传送到任意的 DOM 中
- Suspense 等待异步组件时渲染一些额外的内容，让应用有更好的用户体验