1、箭头函数和普通函数的区别

· 箭头函数没有原型属性prototype
· 箭头函数的this在定义时就确定了，指向其上下文，不能用call()、apply()和bind()改变this指向
· 箭头函数不绑定arguments，取而代之用rest参数...解决；所以箭头函数也没有arguments.callee和arguments.caller
· 箭头函数是匿名函数，不能作为构造函数，不可以使用new命令，否则会抛出一个错误
· 不能使用yield关键字，因此箭头函数不能用作 Generator 函数
· 箭头函数不具有super

2、es6有哪些新特性

增加了let、const的定义
增加了模版字符串``、# 扩展运算符（...）、Object 对象扩展（比如 Object.assign()、Object.keys()、Object.values() 等，方便了对象的操作）、
字符串对象扩展（比如 String.prototype.startsWith()、String.prototype.endsWith()、String.prototype.includes() 等，方便了字符串的处理）
结构赋值、assign、Map/WeakMap 和 Set/WeakSet 数据结构、箭头函数、Proxy（提供了拦截和自定义操作的机制，可以代理对目标对象的访问和修改操作）、生成器（Generator）、迭代器（Iterator）和 for...of（迭代器提供了一种遍历集合的方式，for...of 循环可以直接遍历可迭代对象）
增加了promise方法，解决了地狱回调（pending、rejected、fulfilled
class类的继承 extend

data为什么是个函数，而不是对象

避免组件之间数据共享。 如果 data 是一个对象，则所有组件都将共享同一个数据对象，这可能会导致不同组件之间的数据冲突。而将 data 设置为一个函数时，每个组件都会返回一个新的数据对象，从而避免了数据共享的问题。
支持组件复用。 如果 data 是一个对象，则当组件被多次使用时，所有组件都将共享同一个数据对象，这可能会导致一个组件的数据被另一个组件所修改。而将 data 设置为一个函数时，每个组件都会返回一个新的数据对象，从而保证了组件之间数据的独立性，从而支持组件的复用。

Vue 的父组件和子组件生命周期钩子函数执行顺序？

父 beforeCreate -> 父 created -> 父 beforeMount -> 子 beforeCreate -> 子 created -> 子 beforeMount -> 子 mounted -> 父 mounted

v-model 的原理？

v-model 本质是就是 v-bind 和 v-on 的语法糖 .

vue2和vue3的区别有哪些？

vue2是选项API（Options API）、vue3组合式API（Composition API）增强了代码的可读性、内聚性;
Vue2 响应式原理是利用es5的 Object.defineProperty()对数据进行劫持结合发布订阅模式来实现 Vue3 响应式原理是利用es6的 proxy 对数据代理，通过reactive() 函数给每一个对象都包一层 proxy，通过 proxy 监听属性的变化，从而实现对数据的监控
vue2和vue3生命周期钩子函数的不同
diff 算法更快，vue3的静态标记和最长递增序列来做优化
支持多块渲染
更好的TS支持

visibility、display、opacity的区别

visibility跟opacity是不会改变dom页面，位置不变，只是看不见。  display会改变dom页面，dom元素会从页面移除。  
事件操作：visibility、display不会触发任何事件，  opacity可以触发事件如点击事件

vue相对于其他框架的优势

支持双向数据绑定、上手容易、很好的api支持、Vue是组件化开发，减少代码的书写，使代码易于理解、这就要说到Vue响应机制上的问题了，大型项目的state（状态）是特别多的，这时watcher也会很多，进而导致卡顿。
对于React，主要是适应大型项目，由于React灵活的结构和可扩展性，相比Vue对于大型项目的适配性更高，此外其跨浏览器兼容、模块化、单项数据流等都是其优点，但是与Vue相反的就是它的学习曲线是陡峭的，由于复杂的设置过程，属性，功能和结构，它需要深入的知识来构建应用程序，这对于新手来说是不太适合作为一个入门级别的框架。

useMemo vs computed & useEffect vs watch

尽管React的useMemo和Vue的computed在实现细节上有所不同，但它们的目标相同——减少不必要的计算，优化组件的性能。执行时机 useMemo 组件渲染过程中 computed依赖变化时；useEffect提供了一种统一的方式来处理组件的副作用，在组件渲染到屏幕后执行，适用于执行几乎所有类型的副作用逻辑。而watch提供了对Vue响应式数据更精细的观察能力，在指定的数据变化时执行，特别适用于根据数据变化执行异步操作或昂贵的计算。

强缓存和协商缓存

强缓存是利用http头中的`Expires`和`Cache-Control`；主要涉及到两组header字段：`Etag`和`If-None-Match`、`Last-Modified`和`if-modified-since`。

前端常见的Web攻击【XSS、CSRF】

XSS（Corss Site Scripting,跨站脚本攻击)的脚本攻击的影响：
    1、利用虚假的表单信息骗取用户个人信息
    2、利利⽤用脚本窃取⽤用户的Cookie值，被害者在不不知情的情况下，帮助攻击者发送恶意请求。 
    3、显示伪造的图片或者文章
# CSRF(Cross Site Request Forgery,跨站请求伪造)

webpack的plugin、loader作用

`loader` 是转换器，将一种文件编译转换为另一个文件，操作的是文件。例如：将 `.less` 文件转换成 `.css` 文件。
`plugin` 是扩展器，它是针对 `loader` 结束之后，打包的整个过程。它并不直接操作文件，而是基于事件机制工作。在 webpack 构建流程中的特定时机会广播对应的事件，插件可以监听这些事件的发生，在特定的时机做对应的事情。包括：打包优化，资源管理，注入环境变量。

parent元素宽高不定，实现scale固定宽高比始终为4：3

· Padding-top:75%

整理面试题