前端开发面试宝典-Vue部分

無問西東
142 阅读4分钟

Vue部分

常见题目

  1. 简述Vue生命周期
  2. Vue中如何做权限管理
  3. 双绑使用和原理
  4. 组件通信
  5. Vue3优化
  6. 刷新后vuex状态丢失怎么解?
  7. Vue3为什么用Proxy替代defineProperty?
  8. 路由懒加载
  9. History和Hash模式有何区别?
  10. nextTick
  11. v-for和v-if优先级
  12. 如何监听vuex状态变化?
  13. 你觉得vuex有什么缺点?
  14. ref和reactive异同
  15. Vue中如何扩展一个组件
  16. vue-loader是什么
  17. 子组件能否修改父组件数据
  18. 动态路由怎么使用
  19. 说说对Vue数据响应式的理解
  20. 从template到render做了什么
  21. 如何缓存和更新组件
  22. 虎拟DOM
  23. 什么是异步组件?
  24. 说说Vue长列表优化思路
  25. computed & watch
  26. SPA和SSR
  27. diff算法
  28. 如何从0到1架构一个Vue项目
  29. 你如何实现一个vue-router
  30. vuex module
  31. 单根节点
  32. v-once使用场景有哪些?
  33. 什么场景使用嵌套路由?
  34. 如何监听vuex状态变化?
  35. Vue实例挂载过程发生了什么
  36. key的作用
  37. watch和watchEffect
  38. 父子组件创建、挂载顺序
  39. 说说你对vuex的理解
  40. 什么是递归组件?使用场景有哪些?
  41. 你写过自定义指令吗?
  42. vue3新特性
  43. vue3设计目标和优化点
  44. Vue3性能提升提现在哪些方面?
  45. attrs和attrs和listeners是做什么的?
  46. Composition API和Options API有何不同?
  47. 你知道哪些Vue最佳实践
  48. 从0到1实现vuex?

vue响应式原理（数据双向绑定原理）

数据劫持

vue2 Object.defineProperty
<body>
  <div>
    <p>数据改变视图</p>
    <input type="text" id="val1" />
  </div>
  <div>
    <p>视图改变数据</p>
    <input type="text" id="val2" />
  </div>
</body>  
<script>
  let data = {
    msg: "示例初始化"
  }
  let txt1 = {}
  let txt2 = {}
  //通过Object.property监听txt的msg属性，改变视图
  Object.property(txt1, "msg",{
    set: function(val) {
      data["msg"] = val;
      //更改视图
      document.getElementById("val1").value = val;
    },
    get: function() {
      return data["msg"];
    }
  }) 
  //视图改变数据
  document.getElementById("val2").oninput = function() {
    txt2.msg = this.value;
  } 
</script>
vue3 Proxy
const p = new Proxy(person, {//创建代理
      // 查
      get(target,propName){
          console.log(`有人读取了p身上的${propName}`)
          return target[propName];  
          //反射
          return Reflect.get(target,propName)
      },
      // 改、增
      set(target, propName, value){
          console.log(`有人修改了p身上的${propName}属性`);
          target[propName] = value;
      },
      // 删
      deleteProperty(target, propName){
          console.log(`有人删除了p身上的${propName}属性`)
          return delete target[propName];
      },
  });

依赖收集

Dep(订阅者收集依赖、删除依赖、向依赖发送消息)

发布订阅模式

Watcher（观察者）

vue中$nextTick的原理

  • 宏任务和微任务 执行顺序：同步任务->微任务->宏任务
  • 常见宏任务包括：setTimeout、setInterval、I/O、script(整体代码块)、postMessage
  • 常见微任务包括：MutationObserver、promise.then/catch/finally、process.nextTick(node环境)

vue和react的区别

  • 设计思想不同vue采用MVVM双向数据绑定 react单向数据流
  • react fiber useMemo useCallback useLaoutEffect useEffect redux 、react-redux的区别

vue3 和 vue2区别？

  • vue3支持碎片组件中可以拥有多个根节点
  • API不一样vue2采用选项类型api，vue3采用组合式api setup函数即刻执行
  • 生命周期函数不同 vue3中setup替代vue2中的beforeCreate和created
  • 父子组件通信方式不一样
  • block tree （vue3标记静态节点和动态节点，仅对比动态节点）

响应式原理不同

  • vue2采用的es5的Object.defineProperty()对数据劫持结合发布订阅模式的方式来实现
  • vue3采用的es6的Proxy API对数据进行代理，通过Proxy监听属性变化

Proxy优势：

  • defineProperty只能监听某个属性，不能对全对象监听
  • Proxy完美支持对数组的监听无需像vue2对数组对象做特异操作
  • Proxy调用时递归，性能优于defineProperty
  • Proxy不兼容IE，defineProperty不兼容IE8及以下

vue-router

路由懒加载的原理

componment: "/A" => componment: ()=> important("/A")

路由守卫的原理

hash和history的区别

  • hash路由中带#
  • hash核心原理，通过监听hashChange事件 history通过监听popstate事件
  • hash支持低版本浏览器兼容性好，history是H5新增API
  • hash#后值的改变不进行http请求，不会重新加载页面
  • history使用时需要服务器配合，防止出现页面404

vue通信方式

  • 父子 props/emitemit parent/$children
  • 隔代 provide/inject sttrs/sttrs/listeners
  • 共享 vuex Bus localStorage/sessionStorage

vuex

  • 核心选项配置 state getters mountions actions modules
  • 刷新数据丢失如何解决？localStorage存储、vuex-presitedState持久化存储插件

axios和fetch的区别

  • axios底层还是xhr fetch浏览器原生支持的API 都通过promise封装
  • fetch返回的数据需要手动转换为json，axios会自动转换

TS的优势

  • 相对于JS弱类型语言，TS静态标记语言提前声明类型减少报错、代码更严谨
  • 可以使用最新的ES版本语法并转换es5，代码提示更智能错误提示

手写promise all race

avatar
文章
阅读
粉丝