xxx公司vue面试

1. vue2和vue3响应式原理的区别
   1. vue2使用Object.defineProperty()实现响应式原理，而vue3使用Proxy()实现。
   2. 虽然vue2，vue3面对对象嵌套，都需要递归，但vue2是对对象的所有属性进行递归，vue3是按需递归，如果没有使用到内部对象的属性，就不需要递归，性能更好。
2. ref和reactive区别

   1. 用法，ref定义变量后再js中访问.value方式获取，而reactive定义的对象直接对象点属性取值。

   2. 范围不同：ref可以定义任意数据类型的变量，reactive只能用来定义复杂数据类型的变量
   3. reactive API有一些局限性，不能用于整个对象的替换，必须通过属性访问才能具备响应式，整体替换会让其失去响应式，结构后失去响应式，官方建议使用 ref() 作为声明响应式状态的主要 API。
3. px、rpx、em、rem的区别
   1. px绝对长度单位,px是一个固定长度，不会随着页面的放大缩小变化
   2. rpx是uniapph和微信小程序开发引入的尺寸单位，rpx可以根据屏幕的宽度进行自适应，规定所有手机的屏幕宽度均为 750rpx 的大小。rpx的实现依赖于一个基本的换算规则，px = rpx * (屏幕宽度 / 750)，rpx = px / (屏幕宽度 / 750)。这个换算过程确保了无论设备屏幕尺寸如何变化，小程序的布局和元素尺寸都能保持相对的一致性，从而提升了用户体验和应用的适应性。

   3. 相对单位，相对于它的父节点字体进行计算

   4. 相对单位，相对根节点html的字体大小来计算
4. vue常用的数据通信
   1. 父子组件之间的通信。父组件通过props向子组件传递数据，子组件通过emit将事件发送回父组件
   2. 父组件可以通过 ref 获取子组件的实例
   3. 父组件可以通过 provide 提供数据或方法，子孙组件可以通过 inject 注入所需的数据或方法
   4. $attrs 包含了父组件传递给子组件的所有属性,除了那些已经被 props 或 emits 声明的。
   5. v-model 提供了一种简洁的方式来实现父子组件之间的双向数据绑定。
   6. 路由参数query和params
   7. vuex和pinia,Vue 状态管理库
   8. localStorage 和 sessionStorage 可以用于在不同页面或组件之间共享数据。
   9. 全局属性，Vue 3 提供了 app.config.globalProperties 来替代 Vue 2 中的 Vue.prototype,用于添加全局可用的属性。
5. css3使用变量scss使用变量
   1. css3 ,--name,变量的调用使用var(--name)
   2. scss,$name。$name使用
6. 同时使用 v-if 和 v-for 是不推荐的
   1. vue3它们同时存在于一个节点上时，v-if 比 v-for 的优先级更高。这意味着 v-if 的条件将无法访问到 v-for 作用域内定义的变量别名,template包一层
   2. vue2是v-for优先，条件不存在时也会渲染多个注释节点。
7. 页面加载速度优化
   1. 代码分割和懒加载：使用动态导入语法进行代码分割，将组件按需加载，
   2. 列表分页。
   3. 路由懒加载：使用Vue的异步路由功能，仅当用户访问到某个路由时才加载该路由的组件。
   4. 懒加载第三方库
   5. 使用SSR(服务器端渲染)
   6. 开启Gzip压缩，webpack-bundle-analyzer来分析和优化打包体积