【博学谷学习记录】超强总结，用心分享 _ 前端开发 干货分享-面试题总结(4)

---

SPA 单页面应用

只有一个主页面的应用，只有一开始加载一次js、css。所有内容都包含在该页面，每个功能模块组件化。单页应用跳转，切换相关组件就行，刷新局部资源。
优点： 不需要重新加载整个页面，用户体验更好，加载更快。
缺点： 首次渲染速度慢点，不利于浏览引擎抓取
首次加载速度优化
1. 减少入口文件体积
2. 静态资源本地缓存
3. UI框架按需加载
4. 路由懒加载（延迟加载，按需加载）

---

为什么 0.1+0.2!==0.3 ？

计算机通过二进制存储数据，实际上计算的是二进制的和，而js只有number一种数字类型，是double (双精度浮点数)
所以二进制相加，再换算成十进制就会不等。
解决方法： 利用Number.EPSILON

function numberepsilon(arg1,arg2){                   
	  return Math.abs(arg1 - arg2) < Number.EPSILON;        
}        
console.log(numberepsilon(0.1 + 0.2, 0.3)); // true

---

computed和watch区别

• computed 支持缓存，不支持异步，计算属性是基于他们的响应式依赖进行缓存的。
  在computed中，有get和set方法，默认使用get方法，当数据发生变化使用set方法。

• watch 不支持缓存，支持异步监听（两个参数，一个新值，一个旧值），当一个属性发生变化就执行相应操作
  deep：true 开启深度监视

• 使用场景：

  • computed：如果一个属性是由其他属性计算而来的，依赖其他属性。
  • watch：当需要在数据变化时执行异步或者开销大的操作时，使用watch。可以限制执行操作的频率，设置中间状态。

---

v-for为什么要绑定key？

vue渲染时，会对比新dom和旧dom，如果dom结构一致，则复用旧dom。可能造成渲染异常
使用key给dom添加标识，让vue强制更新dom
为什么不建议用index多为key？
因为不管数组的顺序怎么颠倒，i都是0,1,2,3…这样排序，会导致vue复用错误的旧子节点，做额外工作

---

vuex页面刷新会丢失？

• vue2
  添加 localstorage.setItem(KEY,值) JSON.stringify()
  获取 localStorage.getItem(KEY) JSON.parse()
  删除 localstorage.removeItem(KEY)

• vue3
  添加{persist:true} （插件pinia-plugin-persistedstate）