面试问题总结

1. vue中数据是在data里面还是在vue的实例里面？

我们是将数据放在参数对象中的data属性中传递给Vue构造函数的，Vue构造函数在接收到这个参数后， 会读取data属性中所有的数据，通过Object.defineProperty方法，将这些数据全部加到vue实例上。

这样做，可以让属性有了set和get方法，可以实现双向绑定等等功能； 这样做，可以让程序员直接通过this来访问数据，方便使用；Vue还会读取所有methods中的函数，把所有的函数，全部加给vue实例。

2. 再谈nextTick的使用

在下次 DOM 更新循环结束之后执行延迟回调。nextTick 是 vue 中的更新策略，也是性能优化手段，如果需要实时获取到最新的DOM，这个时候可以手动调用 nextTick。

3.  深浅拷贝

Lodash是一个轻量级的JS工具函数库，_.uniq 数组去重；_.orderBy 对象数组，根据对象中的某个属性的值，升序或降序排序；_.assign 合并对象；_.cloneDeep 深拷贝对象。

4. vue中使数据变成响应式数据(废弃this.$set  this.$delete)

Vue2 中的数据响应式是利用 object.definedProperty()实现的，它是无法深层监听数据的变化的，所以用this.$set  this.$delete。而Vue3，用的是ES6的proxy，对数据响应式进行一个数据的代理，可以使用reactive或ref，把一个对象变为响应式数据。

5. Vue中computed和watch的区别 (任何复杂逻辑都用计算属性)

computed：
1、支持缓存，只有依赖数据发生改变，才会重新进行计算
2、不支持异步，当computed内有异步操作时无效，无法监听数据的变化
3、如果一个属性是由其他属性计算而来，这个属性依赖其他属性，一般用computed
watch：
1、 不支持缓存，数据变，直接会触发相应的操作；
2、支持异步
3、当一个属性变化，会影响其他属性时，也就是其他属性依赖这个属性，一般用watch
包含响应式数据的复杂逻辑使用计算属性，使模板是简单的和声明性的。

6. 计算属性与methods的对比

计算属性会进行缓存，多次使用时计算属性只会调用一次，methods中方法使用几次就调用几次

7. 浏览器假死,浏览器堵塞,浏览器卡的原因

大量DOM加载，推送操作大量DOM。一个浏览器至少存在三个线程：js引擎线程(处理js)、GUI渲染线程(渲染页面)、浏览器事件触发线程(控制交互)。当一段JS脚本长时间占用着处理机就会挂起浏览器的GUI更新，而后面的事件响应也被排在队列中得不到处理，从而造成了浏览器被锁定进入假死状态。JS中大量的DOM操作也会导致事件响应缓慢甚至真正卡死浏览器。

8. Composition API 相对于 V2优势

TS支持 方便查看内置函数参数提示
复杂组件逻辑进行分离
组件间逻辑共享

9. V3 相对于 V2 的变化

90%以上代码可与V2复用
Composition API作为新增API不会影响旧的逻辑代码
Mixin不在推荐  阅读性差 可能存在局部状态量污染
Fragment 不受根节点限制，渲染函数 可结束Array
Teleport 类似Portal,随用随取，例如 弹框 Actions
Suspense 嵌套异步依赖 async setup() 组合式API

10. vite脚手架搭建V3项目

Vite 使用的是支持 ES6 模块机制的源码构建工具其在构建效率上要明显好于使用 CommonJS 模块机制的 Webpack 这一类打包工具。
基于 Webpack 这类打包工具的开发服务器，所以它每次都必须要先打包完成整个项目才能启动服务器，这通常需要花费不少时间，而 Vite 则选择在一开始就将项目中的模块区分为依赖项和项目源码两大类，会大大加快开发服务器启动时间。