1.盒模型
前端盒子模型有2种，一种是标准盒子模型，另一种是IE盒子模型。
盒子模型都是由四个部分组成，分别是margin、border、padding、content。
可以通过修改元素的box-sizing属性来修改元素的盒模型：
box-sizing:border-box 使用IE盒模型 ， 总宽度=内容宽度（包括padding 和 border）;
box-sizing:content-box 使用标准盒模型 , 总宽度=content+padding+border；
2.解决跨问题的常用方法
- CORS（跨域资源共享） 服务器需要在响应头中设置
Access-Control-Allow-Origin来指定哪些域名可以访问该资源。设置*允许任何域的请求 - JSONP 利用
<script>标签没有跨域限制的特性来解决跨域问题的方法。适用于get请求 - 服务器代理 通过设置一个代理服务器，使得前端和后端的通信实际上是同源的
- WebSocket 允许在不同源之间进行持久连接
- iframe 它可以用来在不同的窗口（例如嵌套的 iframe 或不同的浏览器标签页）之间进行通信
3. vue2的生命周期有哪些？ 每个生命周期做了什么？
1. beforeCreate 是new Vue()之后出发的第一个钩子 ，在当前阶段data、methods、compluted以及watch桑的数据和方法都不能访问。
- created 在实例创建完成后发生，当前阶段已经完成了数据观测，也就是可以使用数据，更改数据，可以做一些初始化数据的获取，当前阶段无法与Dom进行交互，如果非要想，可以通过vm.$nextTick来访问Dom。
3. beforeMount 发生在挂载之前，在之前template模板已导入渲染函数编译，当前阶段虚拟Dom已经创建完成，即将开始渲染。
4. mounted 在挂载后发生，Dom挂载完成，可以访问Dom节点，使用$refs属性对Dom进行操作。
5. beforeUpdate 发生在更新之前，也就是响应式数据发生更新，虚拟dom重新渲染之前触发，可以在当前阶段进行更改数据，不会造成重渲染。
6. updated 发生在更新之后，当前阶段组件Dom已更新，应避免在此期间更改数据。
7. beforeDestroy 发生在实例销毁之前，在当前阶段实例可以被使用，可以在这时进行善后收尾工作，比如清除计时器。
8. destroyed 发生在实例销毁之后，这个时候只剩下了Dom空壳。组件已被拆除，数据绑定被卸载，监听被移出，子实例也被销毁
4**. vue3的生命周期有哪些？**
1. setup() <- beforeCreate、created 创建组件。
2. onBeforeMount() <- beforeMount 挂载前执行的函数。
3. onMounted() <- mounted 挂载完成后执行的函数。
4. onBeforeUpdate() <- beforeUpdate 组件更新前执行的函数。
5. onUpdated() <- updated 组件更新完成后执行的函数。
6. onBeforeUnmount() <- beforeDestroy 组件销毁（卸载）前执行的函数。
7. onUnmounted() <- destroyed 组件销毁（卸载）完成后执行的函数。
8. onActivated() <- activated 组件被激活时执行。
9. onDeactivated() <- deactivated 组件切换时， 比如从A组件，切换到B组件，A组件消失时执行。
10. onErrorCaptured() <- errorCaptured 捕获组件异常的函数。
5. vue响应式原理是什么？ vue3响应式有何不同？
1.vue在初始化数据时，会使用Object.defineProperty重新定义data中的属性，当页面使用对应属性时，首先会进行依赖收集（收集当前组件的watcher），如果属性发生变化会通知相关依赖进行更新操作（发布订阅）。
2.vue3.x 改用Proxy代替Object.defineProperty。因为Proxy可以直接监听对象和数组的变化。
6.vue3和vue2的区别（优点）
1. 源码组织方式变化，使用TS重写。
2. 支持Composition API，基于函数的API。更加灵活组织组件逻辑（vue2用的options api）。
3. 编译优化，vue2通过标记静态根节点优化diff，vue3 diff的时候只需要对比动态节点。
4. 打包体积优化：移除了一些不常用的api（inline-template、filter）。
5. 生命周期的变化：使用setup代替了之前的beforeCreate和created。
6. Vue3 的 template 模板支持多个根标签。
7. Vuex状态管理：创建实例的方式改变,Vue2为new Store , Vue3为createStore
8. Route 获取页面实例与路由信息：vue2通过this获取router实例，userRoute和userRouter方法获取当前组件实例。
9. Props 的使用变化：vue2 通过 this 获取 props 里面的内容，vue3 直接通过 props。
7. MVVM的理解
1.MVVM是Model-View-ViewModel的缩写，Model层代表数据模型，View代表UI组件，ViewModel是View和Model层的桥梁，数据会绑定到viewModel层并自动将数据渲染到页面中，视图变化的时候会通知viewModel层更新数据。
8. 在vue2种如何检测数组的变化
1. 使用函数劫持的方式，重写了数组的方法，vue2将data中的数组进行原型链重写，指向了自己定义的数组原型方法，这样调用数组api时，可以通知依赖更新。如果数据中包含着引用类型，会对数组种的引用类型再次递归遍历进行监控。
9. v-model双向绑定的原理是什么
1. 它通过 Object.defineProperty()（在 Vue 2.x 中）或者 Proxy（在 Vue 3.x 中）来监控数据的变化，当数据发生变化时自动更新视图，反之视图变化时也会自动更新数据。
10. vue组件通信方式有哪些及原理
1. 父子组件通信
父->子props，子->父 $emit;
2.获取父子组件实例 children
3.Ref 获取实例的方式调用组件的属性或者方法
11. Vue的路由实现，hash路由和history路由实现原理说一下
- hash的值实际就是URL种‘‘#’’后面的东西。
2. history实际采用html5种提供的API来实现，主要有history.pushState()和history.replaceState()。
12. 说一下v-if和v-show的区别
1. v-if渲染的是DOM元素，v-show操作的是样式（display）。
13. keep-alive的常用属性
1. 常用的属性有2种include/exclude，允许组件有条件的进行缓存。
14. nextTick的作用是什么？
1.在下次DOM更新循环结束后执行延迟回调，nextTick主要使用了宏任务和微任务
15. watch 和 computed的区别是什么？ 以及他们的使用场景分别是什么？
1. 都是观察数据变化的（相同）
2. 计算属性将会混到vue的实例中，所以需要监听自定义变量，watch监听data，props里面的数据变化。
3. computed有缓存，它依赖的值变了才会重新计算，watch没有。
4. watch江停函数是2个参数，第一个是最新值，第二个是输入之前的值。
5. watch支持异步，computed不支持。
6.computed属性是函数时，都有get和set方法。
16. vue修饰符有哪些？
1. 事件修饰符 vue为v-on提供了事件修饰符，通过 “ . ”表示的指令后缀来调用修饰符。
常用的事件修饰符有：.click(点击事件) .stop (阻止冒泡) .prevent (阻止默认事件) .capture (使用事件捕获模式) .self(只在当前元素本身触发) .once(只触发一次) 。passivce（默认行为将会立即触发）。
2. 按键修饰符 .self(左键) .right(右键) .middle(滚轮）.enter(回车) .tab(制表键) .delete(捕获删除和退格键) .esc(返回) .space(空格) .up(上) .down(下) .left .rght .ctrl .alt .shift .meta。
3. 表单修饰符 为表单控件提老公的修饰符，常见的有 .lazy(在文本框市区焦点时才会渲染) .number(将文本框种输入的内容转换为number类型) .trim(自动过滤输入收尾的空格)。
17. vue项目的性能优化
1. 尽量减少data中的数据，data中的数据都会增加getter和setter。
2. v-if 和 v-for不能连用。
3. SPA页面采用keep-alive缓存组件。
4. 在一般情况下，使用v-if替换v-show。
5. 使用路由懒加载，异步组件。
6. 使用防抖，节流。
7.第三方模块按需导入。
8. 长列表滚动到可是区域动态加载。
9. 图片懒加载。
10. 预渲染。
11. 服务端渲染SSR·。
12. 压缩代码。
13. 使用cdn加载第三方模块。
14. 多线程打包。
15. 抽离公共文件。
16. sourceMap 优化 （webpack，vite配置）。
17. 使用骨架屏。
18. 缓存(客户端缓存,服务器端缓存) 。
19. 服务器开启gzip压缩等。
18. javascript有哪些数据类型,它们的区别?
1. javascript共有八种数据类型, 分别是 Undefined、Null、Boolean、Number、String、Object、Symbol、BigInt。
2. 这些数据可以分为原始数据类型和引用数据类型:
栈: 原始数据类型(Undefined、Null、Boolean、Number、String)。
堆: 引用数据类型(对象、数组和函数)。
3. 栈特点: 占据空间小,大小固定,属于被频繁使用数据。在数据结构中栈的存取方式为先进后出。栈区内存由编译器自动分配释放。
堆特定: 占据空间大, 引用数据类型在栈中存储了指针, 指针指向堆中的地址。在数据结构中堆是优先队列,按照优先级进行排序的。
19. javascript数据类型检测的方式?
1. typeof 其中数组,对象,null都会被判断为object,其他的都正确。
2. instanceof 只能判断引用数据类型。
3. constructor
4. Object.prototype.toString.call()
20. let、const、var的区别
1. 块级作用域: 块级作用域由{}包括, let和const具有块级作用域。块级作用域特点: 内层变量可以覆盖外层变量,
