VUE

什么是模块化？

把一些可复用的代码，抽离为单个的模块，便于项目的维护和开发

什么是组件化？

把一些可复用的 UI 元素，抽离为单独的组件，便于项目的维护和开发

什么是虚拟 dom？

json 对真实 dom 的补充和增强（抽象），因为在渲染过程中 vue 需要添加一些属性或者标记，方便内部处理渲染。

多个 mixin 混合会造成什么问题？

命名冲突和数据来源不清晰

Vue 组件中 data 为什么必须是函数

vue 组件可能会有很多个实例，采用函数返回一个全新 data 形式，使每个实例对象的数据不会受到其他实例对象数据的污染

keep-alive 的作用

保存组件的状态

key 的作用

对数组节点的复用

为什么不建议用 index 作为 key?

当数组节点移动、新增或删除时，虚拟 DOM 可能会重新分配后续下标。在使用 diff 算法与原始元素进行比较时，如果发现 key 值相同但内容不同的情况，会导致原始元素被替换为新元素，造成性能浪费。

axios 是如何封装？

下载、创建实例，封装请求响应拦截器，抛出，封装接口

vue2 为什么直接添加属性会导致视图没更新？

原因是: vue2 使用的是 Object.defineProperty

解决方案：

• Vue.set() //向响应式对象中添加一个属性
• Object.assign() //创建新对象
• $forcecUpdated() //强制更新

数组中的哪些方法会触发视图的更新？

1. fill
2. splice
3. shift
4. unshift
5. reverse
6. sort
7. pop
8. push

改变元数组都会触发视图的更新

组件之间是怎么通信的

1. props / $emit 适用 父子组件通信
2. ref / $refs 与 $parent（$root） / $children 适用 父子组件通信
3. EventBus （$emit / $on） 适用于 父子、隔代、兄弟组件通信
4. $attrs / $listeners 适用于 隔代组件通信
5. provide / inject 适用于 隔代组件通信
6. localstorage、Pinia、Vuex 适用于跨组件通信

computed 和 watch,methods 有什么区别

• computed 有缓存性 ，一个数据受多个数据影响
• watch 无缓存性 ，一个数据影响多个数据
• methods 无缓存性，每次调用都会执行

v-show 与 v-if 的区别

• v-show:css 切换,不触发生命周期
• v-if:添加删除 dom，触发生命周期

toRef 和 toRefs 区别

• toRef 作用于单个属性
• toRefs 作用于整个对象

对普通对象使用toRef或toRefs,不具备响应式

vue2 和 vue3 的区别

1. 用组合式 api 替换选项式 api
   1. 组合式 api 对 ts 更友好
   2. 组合式 api 没有 this，减少了this指向不明的情况
2. 响应式原理部分改成了用 proxy 替代 defineProperty
   1. Proxy 可以代理整个对象，Object.defineProperty 只能代理对象中的某个属性
   2. Proxy 对代理对象的监听更加丰富
   3. Proxy 代理对象会生成新的对象，不会修改被代理对象本身
3. 支持按需引入，可以更好 tree-shaking，代码更易压缩
4. 优化 diff 算法，增加了静态节点标记。会标记静态节点，不对静态节点进行比对,在 vue2 中先同级比较，再循环从两边向中间比较(双端交叉对比)
5. v-model 应用于自定义组件时，监听的事件和传递的值改变
   1. 在 vue2 v-model 主要是基于 value 和 change/input 事件
   2. 在 vue3 v-model 被映射为 modelValue 属性和 update:modelValue 事件，更易于在自定义组件中使用和扩展
6. 一些细节改变
   1. 生命周期没有 creat，setup 等同于 create，卸载改成 unmount
   2. v-if 高于 v-for 的优先级,在 vue2 中 v-for 优先级高,会先循环后判断，造成资源消耗
   3. 组件支持有多个根节点
   4. 根实例创建从 new app 变成了 createApp 方法
   5. 新增了传送门 teleport 组件
   6. 移除了一些 API

vue3 为什么要升级 proxy,废弃 defineProperty

Vue2 是利用 es5 的 Object.defineProperty()对数据进行劫持，结合发布订阅模式来实现的，这种做法会导致数组无法通过下标修改，无法监听到对象属性的新增和删除的问题

vue3 是利用 es6 的 Proxy 对数据进行代理，但并不是完全抛弃了 defineProperty，通过 reactive 定义的响应式数据使用 proxy 包装出来，而 ref 还是用的 defineProperty 去给一个空对象，定义了一个 value 属性来实现响应式