前端面试题
1、v-if和v-show有什么区别
v-if 是"真删真建"，v-show 是"显示和隐藏"，v-if适合少切换场景，v-show时候频繁切换
2、父组件与子组件如何通讯
- 父传子用props
- 子传父用emit
- 双向绑定用v-model
3、兄弟组件之间如何通讯
- 子 -> 父 -> 子
- 全局状态管理：vue2（vuex），vue3（pinia）
4、为什么 data 是函数
为了保证每个组件都有独一份的数据，避免数据之间互相污染
5、key的作用是什么
给每一个dom节点设定唯一标识，帮助vue在diff更新时精准复用和移动dom，提高性能并避免渲染错误
没有key可能存在：
- dom错位复用
- img标签错误展示顺序列表下的数据
6、vue2和vue3的diff算法的区别
vue2：全量diff，只有变动，无论节点是否变化，都会逐层比较
vue3：引入静态标记，在编译过程中会给动态节点打上标签，diff会直接跳过静态节点，只比对有标记的动态节点
7、ref和reactive的作用和区别
- ref：基础类型响应式，多包裹了一层.value
- reactive：对象结构，深度响应式，不需要.vlaue，对象优选选择reactive
8、Vue3.0里为什么要用 Proxy API 替代defineProperty APl
Vue 3 用 Proxy 替代 defineProperty，是因为 Proxy 能代理整个对象并拦截更多操作，天然支持属性增删、数组索引/length 变化、集合类型，并能减少递归劫持带来的性能和内存开销
9、vue的生命周期
- beforeCreate
- created
- beforeMount
- mounted
- beforeUpdate
- updated
- beforeDestroy
- destroyed
10、vue3中怎么设置全局变量
使用Vue.prototype挂载，或者使用pinia全局状态管理
11、v-model的原理是什么样的
v-model 本质是语法糖：父组件通过 props 把值传给子组件，子组件通过触发事件把新值回传给父组件。Vue2 用 value/input，Vue3 用 modelValue/update:modelValue，并支持多个 v-model
12、为什么会有跨域问题
因为浏览器存在同源策略，当协议/域名/端口任意不同时，浏览器会选择前端脚本读取跨源请求的响应，反正恶意网站窃取用户数据
简单来说，就是你的网站地址和你的接口域名不一样导致
解决办法，就是前端配置代理，具体就是不是让浏览器请求接口，而是让vue开发服务器帮我代请求，然后再把数据给到浏览器
13、ES6有哪些改变
- 变量声明，let/const为块级作用域
- 字符串模板
- 结构数组和对象，使用方法 ...
- 函数加强，比如箭头函数
- 加了class类
- 增加Promise，解决回调地狱问题
- 增加循环方法，比如forEach、map循环方法，forEach方法是可以修改原数据的，map方法是可以对数据进行修改，然后得到一个全新数据，不会对原数据修改
14、async/await有什么用
async/await是Promise的糖果语法，用同步方法完成异步操作
15、undefined和null的区别是什么
-
undefined是有声明变量，但未赋值、访问对象不存在的属性、函数没写 return也返回空
-
null是无值，也就是空值
16、浏览器有同源策略，但是为何 cdn 请求资源的时候不会有 跨域限制
CDN 不触发跨域限制，是因为同源策略主要限制"跨域读数据"，而 script/link/img 这种是"跨源嵌入"默认允许；但一旦你要用 JS 读取资源内容或涉及字体、模块脚本、canvas 等敏感能力，就仍然需要 CORS。