Vue2与Vue3区别

1.vue 的数据为什么频繁变化但只会更新一次

这是因为 Vue 的 Dom 更新是异步的，数据更新完之后首先被 set 钩子监听到，但是不会马上去执行 Dom 更新，而是在下一轮循环中执行更新。

具体的实现是 vue 实现了一个 queue 队列，用于存放本次事件循环中所有的 Watcher 更新，并且同一个 Watcher 的更新只会被推入队列一次，并在本次事件循环的微队列执行结束之后执行此更新(UI Render 阶段)，这就是 Dom 只会更新一次的原因

2.说一下 vue 中 computed 和 methods 的区别是什么

1.computed 作为属性使用，methods 作为方法调用
2.computed 有 getter 和 setter 方法，可以进行赋值，而 methods 不行
3.computed 不能接收多个参数，而 methods 可以
4.computed 有缓存，而 methods 没有

3.在 Vue 中要获取当前时间你会放到 computed 还是 methods 里？

应该放在 computed 中，因为只有当 computed 相关依赖改变了才会进行重新求值；
methods 只有进行了重新渲染，methods 调用总会执行所有的函数

4.在给 Vue 中的元素设置 key 值时可以使用 Math 的 random 方法吗

不可以，因为 Math.random()是生成随机数的方法，有一定概率生成值是相同的 item，不能保证唯一。
可以根据数据生成，数据里有 id 属性，可以将 id 作为 key；
如果不根据数据生成，那么最好的方式就是使用时间戳生成 key；也可以使用像 uuid 一类的库来生成唯一的 key

5.插槽与作用域插槽的区别是什么

插槽的作用是子组件提供可替换模板，父组件可以更换模板内容；
作用域插槽是给了子组件向父组件返回数据的功能，子组件也可以一直复用，父组件可以重新组织内容和样式

6.vue 中相同逻辑如何进行抽离

是混入(mixin)技术，混入技术提供了一种非常灵活的方式，对重复的业务逻辑进行抽离；
在 Dom 树阶段、元素上等等。
实现原理：
一个混入对象可以包含任意组件选项。组件使用混入对象时，会将所有的混入选项“混合”进入到组件本身的选项；简单来说，就是给生命周期，函数等中间添加一些公共逻辑

7.如何监听 pushstate 和 replacestate 的变化

History.replacestate 和 pushstate 不会触发 popstate 事件，所以可以在方法中创建一个新的全局事件进行监听 pushstate 和 replacestate 的变化

8.说一下 vue3 是如何变得更快的

Diff 优化：
相比 Vue2，Vue3

体积变小：
重写后的 Vue 支持 tree shaking，可以像修剪树叶一样修剪掉一些不需要的东西，从而使 Vue3.0 的体积更小

9.说一说自定义指令有哪些生命周期

bind：只调用一次，在指令第一次绑定元素时调用
inserted：被绑定元素插入到父节点时调用
update：被绑定元素所在模板更新时调用
componentUpdated：被绑定元素所在模板完成一次周期更新时调用
unbind：只调用一次，在指令与元素解绑时调用

自定义指令生命周期的参数有:el,binding,vnode,oldVnode

10.说一说 Vue3 对比 Vue2 的变化

1.源码组织方式变化：使用 TS 重写 2.支持 compositionAPI，基于函数的 api，更灵活组织组件逻辑(Vue2 使用 options api) 3.响应式系统提升：Vue3 的响应式数据原理改成了 Proxy，可以监听动态新增删除属性，以及数组变化 4.编译优化：Vue 通过标记静态根节点来优化 Diff，Vue 则标记和提升所有静态根节点，Diff 的时候只需要去对比动态节点的内容 5.打包体积优化：移除了一些不常用的 api(inline-template,filter) 6.生命周期的变化，使用 setup 替代了 beforeCreate 和 created
7.template 支持多个根标签
8.Vuex 状态管理，创建实例的方式，Vue2 使用 new store；Vue3 使用 createStore;
9.Route 获取页面实例以及路由信息，Vue2 使用 this 的方式获取；而 Vue3 采用 getCurrentInstance/userRoute,userRouter 的方式来获取 10.对 props 的使用：Vue2 通过 this 的方式使用；Vue3 则直接通过 props 使用；
11.父子组件传值：Vue3 中当子组件向父组件返回数据时，如果使用的是自定义名称，像 backData，则需要在 emits 定义一下