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包裹的对象的深层次值改变了。
  
  

  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了。