我遇到的面试题记录

2021-10-08

最近在找工作，记录一下遇到的面试题和我整理后的答案。

vue

1、vue-router知道吗？有哪几种不同的模式？
https://www.jianshu.com/p/4c5...
https://www.jianshu.com/p/557...
https://blog.csdn.net/weixin_...
-vue-router
vue-router 就是vue深度集成的单页面应用的路径管理器，在vue的单页面应用中，由它建立起url和页面的映射关系。
-hash/history
vue-router 在实现单页面应用前端路由时，提供了两种方式：hash和history，根据mode参数来决定采用哪一种。
① hash模式

url里会带#号，#号是url的的锚点，代表页面的一个位置，vue-router组件跳转的时候只改变#号后的部分，所以不会向后端发送请求和重新加载页面，只会对dom的指定位置进行渲染。
每次改变#号后部分，浏览器会在历史列表中新增一条记录，所以按后退会返回上一个位置。
hash模式的本质原理是wendow的onhashchange时间，利用它来监控url hash的改变来更新组件渲染。

② history模式

url里不带#号。
原理是利用了h5中的pushState或replaceState api，实现了只在浏览器历史中新增记录，改变location地址栏后不重新向服务器请求的功能。
但这个模式下刷新页面时会发请求，服务器如果需要特殊配置来避免返回404。

2、说一下vue里面的组件传参。
https://www.jianshu.com/p/85b...
① 父组件传递给子组件：

父组件通过组件标签内冒号参数名（:paramsName ）传递，子组件通过props参数接住。
子组件内调用this.$parent.paramsName 直接访问父组件参数/方法

② 子组件传递给父组件

通过事件传递 this.$emit()
父组件通过this.$refs直接调用子组件参数
父组件通过this.$children[i]直接调用子组件参数。

【我遇到的面试题记录】③ 兄弟组件传递

通过事件总线传递（vue2 eventbus\vue3 mitt）
通过vuex传递

3、说下vue组件的生命周期。
https://www.cnblogs.com/qidh/...
https://www.jianshu.com/p/410...

beforeCreate
第一个生命周期函数，vue实例初始化时调用这个函数，这时data和methods跟dom都没有初始化。
created
vue实例创建创建完成时调用这个函数，这时data和methods已经可以用，但dom模板还没渲染。可以在这个阶段向后台请求数据。
beforeMount
挂载开始前被调用，dom模板编译完成，用户可以看到模板页面，但是看不到真正的数据。
mounted
dom树完整渲染到页面后调用，用户此时可以看到真实数据，组件创建阶段结束。这个阶段可以进行dom操作，可以初始化一些第三方ui插件。
beforeUpdate
数据被更新时调用，但是未呈现到页面上。
updated
数据更新后虚拟dom重新渲染后调用。
beforeDestroy
实例被销毁前调用，组件data、methods等仍然可以被正常访问。
destroyed
组件销毁完成后调用，data、methods都不可使用了。

4、说一说vue的双向绑定。

推荐阅读

上一篇：Linux使用alternatives切换同一工具不同版本（Python为例）

下一篇：每周总结|每周总结函数方法注释规范/jQuery深拷贝/js补全函数/Vue文档学习