2021-04-10

Web前端开发工程师面试精选总结（VUE篇）

Q1：Vue与React的区别

模板 vs JSX

React与Vue最大的不同是模板的编写。Vue鼓励你去写近似常规HTML的模板。写起来很接近标准HTML元素，只是多了一些属性。这些属性也可以被使用在单文件组件中，尽管它需要在在构建时将组件转换为合法的JavaScript和HTML。Vue鼓励你去使用HTML模板去进行渲染，使用相似于Angular风格的方法去输出动态的内容。因此，通过把原有的模板整合成新的Vue模板，Vue很容易提供旧的应用的升级。这也让新来者很容易适应它的语法。 另一方面，React推荐你所有的模板通用JavaScript的语法扩展——JSX书写。

状态管理 vs 对象属性

如果你对React熟悉，你就会知道应用中的状态是（React）关键的概念。也有一些配套框架被设计为管理一个大的state对象，如Redux。此外，state对象在React应用中是不可变的，意味着它不能被直接改变（这也许不一定正确）。在React中你需要使用setState()方法去更新状态。在Vue中，state对象并不是必须的，数据由data属性在Vue对象中进行管理。

Q2：$route和$router的区别

$route是一个跳转路由对象，每一个路由都会有一个$router对象，表示当前路由的信息，包含当前url解析得到的信息，可以获取对应的name，pathparams，query等

$router是Vuerouter的一个全局对象，他包含了所有的路由，是router构造方法的实例

Q3：Vue子组件调用父组件的方法

①在子组件里使用$emit向父组件触发一个事件，再在父组件监听这个事件即可。

②把父组件的方法传入子组件中，在子组件调用这个方法。

③直接在子组件中通过this.$parent.event来调用父组件的方法。

Q4：Vue的组件通信方式

props通过标签属性传递，可以传递一般属性（父向子通信）和函数属性（子向父通信），隔代组件（逐层传递多次）和兄弟组件通信（需要借助父组件）比较麻烦

vue自定义事件，vue内置实现可以代替函数props，只适用于子传父，具体方法：在父组件给子组件绑定事件监听使用callback函数回调，在子组件里面触发$emit

消息订阅与发布机制使用pubsub-js实现库，这个库向外暴露出一个函数订阅消息（pubsubscribe）和发布消息（pubsublish）此方式可以实现任意关系通信

vuex是一个vue官方的集中式管理共享数据的vue插件

Q4：Vue的双向绑定原理

vue的双向绑定原理是采用数据劫持，结合发布者-订阅者模式通过过方法Object.define.property()来劫持各个属性的setter，getter触发监听回调。使用get设置值，set监控改变值，并调用回调函数，来通知View进行数据改变

Q5：Vue生命周期的理解

vue的生命周期总共分为8个阶段

beforecreate-created（创建前-创建后）

boforeMount-mounted（载入前-载入后）

beforeUpdate-updated（更新前-更新后）

beforeDestroy-destroyed（销毁前-销毁后）

Q6：Vuex的理解

vuex是官方的一个集中式管理构架，vue里的数据共享，可以实现各个组件之间的通信传值。

vuex有五个核心属性：

state：vuex的基本数据，用来储存变量

getter：从state里面派生的数据，state的计算属性

mutations：提交更新数据的方法，同步方法

actions：提交更新数据的方法，异步方法（actions提交的是mutation，而不是直接改变状态）

model：模块化的vuex，可以让每一个模块都拥有自己的state，getters，mutations，action

Q7：Vue-router有哪几种导航钩子

vue的导航钩子主要是用来拦截导航让他完成跳转或者取消

①全局导航钩子

前置守卫（beforeEach）有三个参数（to进入的路由对象 、from正要离开的路由对象 、next进入下一个钩子 ），后置钩子（afterEach）有两个参数（to，from）

②路由独享钩子

即单个路由独享的导航钩子，它是在路由配置上直接进行定义的

③组件内导航钩子

组件内的导航钩子主要有这三种：beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave。

Q8：vue路由怎么传参数

①用name传递参数

在路由文件src/router/index.js里配置name属性，然后使用$router.push方法传参

②通过<router-link> 标签中的to传参
<router-link :to="{name:xxx,params:{key:value}}">valueString</router-link>
这里的to前边是带冒号的，然后后边跟的是一个对象形势的字符串.

name：就是我们在路由配置文件中起的name值。
params：就是我们要传的参数，它也是对象形势，在对象里可以传递多个值。

③vue-router 利用url传递参数　

Q9：怎么定义Vue-router的动态路由？怎么获取传过来的参数

可以通过query ,param两种方式（区别: query通过url传参，刷新页面还在    params刷新页面不在了）

配置路由格式:/router/:id，传递的方式:在path后面跟上对应的值，传递后形成的路径:/router/123

通过$route.params.userid来获取传过来的参数

可以通过$route.query 获取你说传递的值

Q10：为什么组件当中的data是一个函数

• 每一个组件都有自己的数据
• 每次调用的时候都会return一个新的数据
• 让各个组件之间的数据不会相互影响

如果组件中的data不是函数的话，那么多个组件将会共享同一个数据，其中一个组件上对数据做出的改变，也会影响另一个组件上的数据 、
组件上的data是函数的情况下，组件每次调用data里面的数据，都是由data这个独有的函数返回过来的数据，所以不会造成这个组件更改data的数据，另一个在使用这个数据的组件也会更改这个数据

Q11：v-if与v-show的区别

v-show跟v-if都是做条件隐藏跟显示用的，
v-if相当于页面直接不渲染这个元素，而v-show会渲染，只是控制了display属性。
使用场景：v-show在高频切换的时候使用，v-if在不需要高频切换的时候更多的使用。

Q12：vue路由的两种模式？区别？

hash模式

hash模式背后的原理是onhashchange事件,可以在window对象上监听这个事件，hash发生变化的url都会被浏览器记录下来

History模式

切换历史状态

修改历史状态

详见https://blog.csdn.net/lla520/article/details/77894985

Q13：vue的两大核心

数据驱动、组件系统

数据驱动：ViewModel，保证数据和视图的一致性。

组件系统：应用类UI可以看作全部是由组件树构成的。