vue组件中的data为什么是一个函数

1. 我们知道JS当中实例是通过构造函数来创建的，每个构造函数可以new多少实例，每个实例也都会继承原型上的方法或属性，因为vue组件就是一个vue实例，当一个组件被复用多次，就会创建多个实例，如果data是对象，那么被多次复用的这个组件，在某一次改变了data数据，就会影响到其他复用这个组件的地方，因为对象他是引用数据类型的，是对于内存地址的引用，而如果data是一个函数的话，那么我们每次创建一个新的实例之后就会调用这个新的data函数，返回一个新的对象，也就是相当于给每一个data定义了一个新的内存地址，自己维护自己的数据，所以为了保证每个组件data的独立性或者是说组件的可复用性，data就必须是一个函数。

什么是Vue数据响应式

1. 数据变化后，会自动重新运行依赖该数据的函数。
2. vue2中是采用defineProperty来劫持整个对象， 然后进行深度遍历所有属性，给每个属性添加getter和setter，实现响应式
3. vue3采用proxy重写了响应式系统，因为proxy可以对整个对象进行监听，所以不需要深度遍历
4. 可以监听动态属性的添加
5. 可以监听数组的索引和数组length属性
6. 可以监听删除属性

Vue3速度快的原因

1. 代码层面性能优化主要体现在全新的响应式API。基于Proxy实现，初始化时间和内存占用大福改进
2. 编译反方面新增了静态标记pachFlag,diff只对有静态标记的dom对比，事件增加缓存、静态提升（会对静态提升。只会创建一次，之后每次渲染直接复用），跳过大量的diff过程
3. SSR优化：当静态内容大道一定量级的时候，会用createStaticVNode生成一个staticNode,这些静态node会被直接innerHtml,就不需要创建对象，然后根据对象渲染

diff算法

1. vue2：diff算法叫做全量比较，就是当数据改变的时候，会从头到尾的进行vDom对比，即使有些内容是固定不变的也会进行比较:
2. vue3：新增了一个叫静态标记标识，什么叫静态标记，意思就是如果内容会被更改，就会给节点打上一个标记flag，下次更新数据的时候直接对比，没有flag的就不会进行比较

Composition API提供以下几个函数

1. composition是一组API包括reactive 生命周期，通过import 导入的方式编写，options api直接页面编写
2. composition主要作用是能够简洁、高效复用逻辑，敏捷代码组织能力，options api所有代码放在一个页面
3. composition对TS支持更友好
4. vue3首推Composition API
5. setup
6. ref
7. reactive
8. watchEffie
9. watch
10. computer
11. toRefs
12. 生命周期

Vuex工作流程，以及使用场景

1. 在vue里面通过dispatch触发actions提交修改数据操作
2. 然后在通过actions的commit触发mutation修改数据
3. mutation接收到commit就会直接更改state数据
4. state是所有需要共享状态数据的位置
5. vuex的作用：其实就是一个全局的状态管理工具，一般用于跨多层组件通讯方式

组件通信方式有一下几种

1. 父子组件：props/$emit/$parent/ref
2. 兄弟组件：eventbus/vuex
3. 跨层级：eventbus/vuex/provide+inject/$root/$attrs+$listeners

for循环设置key值

1. 为key设置唯一值，为了让vue内部核心代码能够快速找到改数据，当旧值和新值去对比的时候更快的定位diff算法

vue-router如何传递参数

this.$router.push({path: '/user', query: {id: 1}})