vue面试题（day05）
vue面试题
- vue3中Composition API 的优势？
- 1.了解 Options Api
- Composition
- composition APi：
- 2.shallowReactive和shallowRef的区别？
- 3.provide与inject如何使用？
- 总结
- 4.toRaw 与 markRaw是什么作用？
- 5.readonly 与 shallowReadonly谈谈你对他的理解？
- 6.自定义hook是什么？
- 7.虚拟DOM一定更快吗？
- 8.vue路由中，history和hash两种模式有什么区别？
vue3中Composition API 的优势？
1.了解 Options Api
Options API，即大家常说的选项API，即以vue为后缀的文件，通过定义methods，computed，watch，data等属性与方法，共同处理页面逻辑。
Composition
在 Vue3 Composition API 中，组件根据逻辑功能来组织的，一个功能所定义的所有 API 会放在一起（更加的高内聚，低耦合），即使项目很大，功能很多，我们都能快速的定位到这个功能所用到的所有 API，Compositon API，将某个逻辑关注点相关的代码全都放在一个函数里，这样当需要修改一个功能时，就不再需要在文件中跳来跳去。
composition APi：
-
setup
Vue3.0中一个新的配置向，值为一个函数setup是所有Composition API（组合API） ”表演的舞台“组件中所有用到的:数据、方法等等，均要配置在setup中 -
setup语法糖
- shallowReadonly：让一个响应式数据变为只读的（浅只读）。
shallowReadonly只限制对象中的第一层数据（不能改动，如：salary），但是嵌套的深层次的value属性值 是可以更改的，我们点击更改按钮测试就能发现，被shallowReadonly包裹的对象的深层次值改变了。{{ job }}
不可以修改 <--> 可以修改 <-->6.自定义hook是什么？
在 Vue 3 中，Hook 是通过 Vue 3 新特性的最重要的部分——组合式 API 来实现的.（整理中）
7.虚拟DOM一定更快吗？
虚拟DOM／domDiff
我们常说的虚拟DOM是通过JS对象模拟出来的DOM节点,domDiff是通过特定算法计算出来一次操作所带来的DOM变化。react和vue中都使用了虚拟DOM，我们借着react聊聊虚拟DOM。
react中涉及到虚拟DOM的代码主要分为以下三部分，其中核心是第二步的domDiff算法：
把render中的JSX(或者createElement这个API)转化成虚拟DOM
状态或属性改变后重新计算虚拟DOM并生成一个补丁对象(domDiff)
通过这个补丁对象更新视图中的DOM节点虚拟DOM不一定更快
干前端的都知道DOM操作是性能杀手，因为操作DOM会引起页面的回流或者重绘。相比起来，通过多一些预先计算来减少DOM的操作要划算的多。
但是，“使用虚拟DOM会更快”这句话并不一定适用于所有场景。例如：一个页面就有一个按钮，点击一下，数字加一，那肯定是直接操作DOM更快。使用虚拟DOM无非白白增加了计算量和代码量。即使是复杂情况，浏览器也会对我们的DOM操作进行优化，大部分浏览器会根据我们操作的时间和次数进行批量处理，所以直接操作DOM也未必很慢。
那么为什么现在的框架都使用虚拟DOM呢？因为使用虚拟DOM可以提高代码的性能下限，并极大的优化大量操作DOM时产生的性能损耗。同时这些框架也保证了，即使在少数虚拟DOM不太给力的场景下，性能也在我们接受的范围内。
而且，我们之所以喜欢react、vue等使用了虚拟DOM框架，不光是因为他们快，还有很多其他更重要的原因。例如react对函数式编程的友好，vue优秀的开发体验等，目前社区也有好多比较这两个框架并打口水战的，我觉着还是在两个都懂的情况下多探究一下原理更有意义一些
8.vue路由中，history和hash两种模式有什么区别？
- hash 模式
hash 模式是一种把前端路由的路径用井号 # 拼接在真实 URL 后面的模式。当井号 # 后面的路径发生变化时，浏览器并不会重新发起请求，而是会触发 hashchange 事件。
在上面的例子中，我们利用 a 标签设置了两个路由导航，把 app 当做视图渲染容器，当切换路由的时候触发视图容器的更新，这其实就是大多数前端框架哈希路由的实现原理。
hash 模式的优缺点：
优点：浏览器兼容性较好，连 IE8 都支持
缺点：路径在井号 # 的后面，比较丑。- history 模式
history API 是 H5 提供的新特性，允许开发者直接更改前端路由，即更新浏览器 URL 地址而不重新发起请求。
A页面 B页面history API 提供了丰富的函数供开发者调用：
history.replaceState({}, null, '/b') // 替换路由 history.pushState({}, null, '/a') // 路由压栈 history.back() // 返回 history.forward() // 前进 history.go(-2) // 后退2次history 模式的优缺点：
优点：路径比较正规，没有井号 #
缺点：兼容性不如 hash，且需要服务端支持，否则一刷新页面就404了。