VUE

1. VUE 有哪几种导航钩子

【参考答案】

      ① 全局导航钩子：router.beforeEach(to,from,next)，作用：跳转前进行判断拦截。

      ② 组件内的钩子；

      ③ 单独路由独享组件

2. vue 全家桶是什么

【参考答案】

     vue 全家桶包括：vue-router、vuex、axios，再加上构建工具 vue-cli，sass 样式和组件库，就是一个完整的 vue 项目的核心构成。

     概括起来就是：项目构建工具 + 路由 + 状态管理 + http 请求工具

3. v-show 和v-if 的区别

【参考答案】

① v-if 是通过控制 dom 节点的存在与否来控制元素的显隐；v-show 是通过设置DOM 元素的 display 样式，block 为显示，none 为隐藏；

② v-if 切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件；v-show 只是简单的基于 css 切换；

③ v-if 是惰性的，如果初始条件为假，则什么也不做；只有在条件第一次变为真时才开始局部编译；v-show 是在任何条件下（首次条件是否为真）都被编译，然后被缓存，而且 DOM 元素保留；

④ v-if 有更高的切换消耗；v-show 有更高的初始渲染消耗；

4. 谈谈对mvvm 的理解

【参考答案】

mvvm 就是 vm 框架视图、m 模型就是用来定义驱动的数据、v 经过数据改变后的html、vm 就是用来实现双向绑定

双向绑定:一个变了另外一个跟着变了，例如：视图一个绑定了模型的节点有变化，  模型对应的值会跟着变

5. 谈谈对于vuex 的理解，有哪些属性，运用场景是什么

【参考答案】

      理解：

      ① vuex 可以理解为通过状态（数据源）集中管理驱动组件的变化

      ② 应用级的状态集中放在 store 中； 改变状态的方式是提交 mutations，这是个同步的事物； 异步逻辑应该封装在 action 中。

      属性：

             有五种，分别是 State、 Getter、Mutation 、Action、 Module

      应用场景：可以做登录及未登录状态的检测、不同页面间数据的同步等

6. vue 的组件通信是如何实现的

【参考答案】

        组件关系可分为父子组件通信、兄弟组件通信。

       ① 父组件向子组件： 通过 props 属性来实现

       ② 子组件向父组件：

        子组件用$emit （）来触发事件，父组件用$on（）来监昕子组件的事件。

        父组件可以直接在子组件的自定义标签上使用 v-on 来监昕子组件触发的自定义事件。

        ③ 兄弟之间的通信：

         通过实例一个 vue 实例 Bus 作为媒介，要相互通信的兄弟组件之中都引入 Bus， 之后通过分别调用 Bus 事件触发和监听来实现组件之间的通信和参数传递。

7. 谈一下对vue 双向数据绑定原理的理解

【参考答案】

         vue.js 是 采 用 数 据 劫 持 结 合 发 布 者 - 订 阅 者 模 式 的 方 式 ， 通 过Object.defineProperty()来劫持各个属性的 setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。

         具体步骤：

         第一步：需要 observe 的数据对象进行递归遍历，包括子属性对象的属性，都加上 setter 和 getter，这样的话，给这个对象的某个值赋值，就会触发 setter，那么就能监听到了数据变化。

         第二步：compile 解析模板指令，将模板中的变量替换成数据，然后初始化渲染页面视图，并将每个指令对应的节点绑定更新函数，添加监听数据的订阅者，一旦数据有  变动，收到通知，更新视图。

         第三步：Watcher 订阅者是 Observer 和 Compile 之间通信的桥梁，

                 主要做的事情是:

                   1、在自身实例化时往属性订阅器(dep)里面添加自己

                   2、自身必须有一个 update() 方法

                   3、待属性变动 dep.notice()通知时，能调用自身的 update()方法，并触发Compile 中绑定的回调，则功成身退。

          第四步：MVVM 作为数据绑定的入口，整合 Observer、Compile 和 Watcher 三者， 通过 Observer 来监听自己的 model 数据变化，通过 Compile 来解析编译模板指令， 最终利用 Watcher 搭起 Observer 和 Compile 之间的通信 桥梁，达到数据变化 -> 视图更新；视图交互变化(input) -> 数据 model 变更的双向绑定效果。

          总结：借助 defineProperty 函数将 data 的属性转化成 getter 和 setter 然后和watcher 绑定

8. 简述一下vue 的生命周期的理解

【参考答案】

        总共分为 8 个阶段创建前/后，载入前/后，更新前/后，销毁前/后。

       ① 在 beforeCreated 阶段，vue 实例的挂载元素$el 和数据对象 data 都为undefined，还未初始化。

       ② 在 created 阶段，vue 实例的数据对象 data 有了，$el 还没有。

       ③ 在 beforeMount 阶段，vue 实例的$el 和 data 都初始化了，但还是挂载之前为虚拟的 dom 节点，data.message 还未替换。

       ④ 在 mounted 阶段，vue 实例挂载完成，data.message 成功渲染。

       ⑤ 当 data 变化时，会触发 beforeUpdate 和 updated 方法。

       ⑥ 在执行 destroy 方法后，对 data 的改变不会再触发周期函数，说明此时 vue 实例已经解除了 事件监听以及和 dom 的绑定，但是 dom 结构依然存在

9. vue 是如何做IE 兼容

【参考答案】

        安装并引入 babel-polyfill 处理器包、es6-promise 包（一般是不支持 es6 语法及promise，无法发送 axios 请求）

10. vue 深度监听对象中新老值如何保持不一样

【参考答案】

       官方术语：观察 Vue 实例变化的一个表达式或计算属性函数。回调函数得到的参数为新值和旧值。表达式只接受监督的键路径。对于更复杂的表达式，用一个函数取代

       理解：对于复杂的表达式，用一个函数取代。

       实现：把复杂表达式或者对象，用 computed 属性包装一下，再来监听 computed 属性

11. vue 项目中使用过哪些第三方插件及使用的步骤

【参考答案】

         插件有很多，随便列举几个： vue-clipboard2（复制插件） Moment（时间格式处理）export2table（table 数据打印为 excel 表格）等。

         步骤：安装 -> 导入 -> 配置 -> 使用

12. 怎么在使用vue-router 切换页面时设置过渡动画

【参考答案】

         分析：根据路有深度和不同的转场设置动画

         ① 首先我们在路由文件（router\index.js）中，在每个路径的路由元信息 meta 中设置个 depth 属性值，用来表示其路由的深度（层级）；

         ② 使用 animinate.css 提供的效果来绑定不同的 class

         ③ 然后通过 watch 监听 $route，根据 to、from 元信息中的 depth 值的大小，设置不同的跳转动画

13. vue 状态更改时，怎么让页面局部渲染

【参考答案】

        在改变 data 中已定义好的属性值或对某个变量重新赋值时，可以通过使用 v-show 或v-if 来实现局部渲染

14. 怎么解决spa 首屏加载比较慢的问题

【参考答案】

        ① 使用服务器端渲染首屏

        ② 将 js 中的 css 单独抽离出来，放在 css 文件中

        ③ 极限打包压缩静态文件，首屏图片等可以使用 lazy-load

15. 在vue 项目中遇到哪些坑（难题）

【参考答案】

        ① 使用 keep-alive 包裹的组件/路由，打开一次后 created 只会执行一次，有两种情况，一、如果要重新渲染部分数据，可以在 activated 中做处理；二、路由/组件重新重新created，可以使用官方推荐的:key="key" ，然后去改变 key 的值，组件就会重新挂载了

        ② beforeRouteEnter 中的 next 函数的执行时间是在组件 mounted 之后，因此需要在此处处理的数据要注意了

        ③ 网页刷新时 vuex 数据会丢失，需配合 localStorage 或 sessionStorage 使用，把必须数据先存后取

        ④ 对于权限及不确定路由，可以使用 addRoutes()，可以避免抖动

        ⑤ 熟练使用 es6 的数组 map、find、filter 等方法，对解构赋值、class 继承、promise， 及 es7 中的 async 和 await

        ⑥ 使用 computed 替代 watch，computed 依赖于 data 属性的更改，是有缓存的

        ⑦ 通过 props 传递的值，不要在子组件去更改。开发中，如果直接更改 props，一、基本类型的值会报错，二、引用类型的值不会报错，但是不好去追溯数据的更改，很多人不太注意引用类型，可通过 computed 或 watch 去更改

         ⑧ 在 data 里调用 methods 的方法，可以在 data 里定义 let self = this，然后在使用 self.xx()进行调用

16. 基于vue 的组件库有哪些

【参考答案】

       iView UI 组件库、Vux UI 组件库、Element UI 组件库、Mint UI 组件库、Bootstrap-Vue UI 组件库、Ant Design Vue UI 组件库、AT-UI UI 组件库、Vant UI 组件库、cube-ui UI 组件库等

17. computed 和 watch 的区别和运用的场景？

【参考答案】

        computed： 是计算属性，依赖其它属性值，并且 computed 的值有缓存，只有它依赖的属性值发生改变，下一次获取 computed 的值时才会重新计算 computed 的值；

         watch： 更多的是「观察」的作用，类似于某些数据的监听回调 ，每当监听的数据变化时都会执行回调进行后续操作；

运用场景：

         当我们需要进行数值计算，并且依赖于其它数据时，应该使用 computed，因为可以利用computed 的缓存特性，避免每次获取值时，都要重新计算；

          当我们需要在数据变化时执行异步或开销较大的操作时，应该使用 watch，使用 watch 选项允许我们执行异步操作 ( 访问一个 API )，限制我们执行该操作的频率，并在我们得到最终结果前，设置中间状态。这些都是计算属性无法做到的

附汇总的其他部分前端面试题

2021年最新前端面试宝典JavaScript高级部分

2021年最新前端面试宝典之WebAPI部分

2021年最新前端面试宝典之JavaScript部分

2021年最新前端面试宝典之HTML+CSS部分

VUE

1. VUE 有哪几种导航钩子

【参考答案】

      ① 全局导航钩子：router.beforeEach(to,from,next)，作用：跳转前进行判断拦截。

      ② 组件内的钩子；

      ③ 单独路由独享组件

2. vue 全家桶是什么

【参考答案】

     vue 全家桶包括：vue-router、vuex、axios，再加上构建工具 vue-cli，sass 样式和组件库，就是一个完整的 vue 项目的核心构成。

     概括起来就是：项目构建工具 + 路由 + 状态管理 + http 请求工具

3. v-show 和v-if 的区别

【参考答案】

① v-if 是通过控制 dom 节点的存在与否来控制元素的显隐；v-show 是通过设置DOM 元素的 display 样式，block 为显示，none 为隐藏；

② v-if 切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件；v-show 只是简单的基于 css 切换；

③ v-if 是惰性的，如果初始条件为假，则什么也不做；只有在条件第一次变为真时才开始局部编译；v-show 是在任何条件下（首次条件是否为真）都被编译，然后被缓存，而且 DOM 元素保留；

④ v-if 有更高的切换消耗；v-show 有更高的初始渲染消耗；

4. 谈谈对mvvm 的理解

【参考答案】

mvvm 就是 vm 框架视图、m 模型就是用来定义驱动的数据、v 经过数据改变后的html、vm 就是用来实现双向绑定

双向绑定:一个变了另外一个跟着变了，例如：视图一个绑定了模型的节点有变化，  模型对应的值会跟着变

5. 谈谈对于vuex 的理解，有哪些属性，运用场景是什么

【参考答案】

      理解：

      ① vuex 可以理解为通过状态（数据源）集中管理驱动组件的变化

      ② 应用级的状态集中放在 store 中； 改变状态的方式是提交 mutations，这是个同步的事物； 异步逻辑应该封装在 action 中。

      属性：

             有五种，分别是 State、 Getter、Mutation 、Action、 Module

      应用场景：可以做登录及未登录状态的检测、不同页面间数据的同步等

6. vue 的组件通信是如何实现的

【参考答案】

        组件关系可分为父子组件通信、兄弟组件通信。

       ① 父组件向子组件： 通过 props 属性来实现

       ② 子组件向父组件：

        子组件用$emit （）来触发事件，父组件用$on（）来监昕子组件的事件。

        父组件可以直接在子组件的自定义标签上使用 v-on 来监昕子组件触发的自定义事件。

        ③ 兄弟之间的通信：

         通过实例一个 vue 实例 Bus 作为媒介，要相互通信的兄弟组件之中都引入 Bus， 之后通过分别调用 Bus 事件触发和监听来实现组件之间的通信和参数传递。

7. 谈一下对vue 双向数据绑定原理的理解

【参考答案】

         vue.js 是 采 用 数 据 劫 持 结 合 发 布 者 - 订 阅 者 模 式 的 方 式 ， 通 过Object.defineProperty()来劫持各个属性的 setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。

         具体步骤：

         第一步：需要 observe 的数据对象进行递归遍历，包括子属性对象的属性，都加上 setter 和 getter，这样的话，给这个对象的某个值赋值，就会触发 setter，那么就能监听到了数据变化。

         第二步：compile 解析模板指令，将模板中的变量替换成数据，然后初始化渲染页面视图，并将每个指令对应的节点绑定更新函数，添加监听数据的订阅者，一旦数据有  变动，收到通知，更新视图。

         第三步：Watcher 订阅者是 Observer 和 Compile 之间通信的桥梁，

                 主要做的事情是:

                   1、在自身实例化时往属性订阅器(dep)里面添加自己

                   2、自身必须有一个 update() 方法

                   3、待属性变动 dep.notice()通知时，能调用自身的 update()方法，并触发Compile 中绑定的回调，则功成身退。

          第四步：MVVM 作为数据绑定的入口，整合 Observer、Compile 和 Watcher 三者， 通过 Observer 来监听自己的 model 数据变化，通过 Compile 来解析编译模板指令， 最终利用 Watcher 搭起 Observer 和 Compile 之间的通信 桥梁，达到数据变化 -> 视图更新；视图交互变化(input) -> 数据 model 变更的双向绑定效果。

          总结：借助 defineProperty 函数将 data 的属性转化成 getter 和 setter 然后和watcher 绑定

8. 简述一下vue 的生命周期的理解

【参考答案】

        总共分为 8 个阶段创建前/后，载入前/后，更新前/后，销毁前/后。

       ① 在 beforeCreated 阶段，vue 实例的挂载元素$el 和数据对象 data 都为undefined，还未初始化。

       ② 在 created 阶段，vue 实例的数据对象 data 有了，$el 还没有。

       ③ 在 beforeMount 阶段，vue 实例的$el 和 data 都初始化了，但还是挂载之前为虚拟的 dom 节点，data.message 还未替换。

       ④ 在 mounted 阶段，vue 实例挂载完成，data.message 成功渲染。

       ⑤ 当 data 变化时，会触发 beforeUpdate 和 updated 方法。

       ⑥ 在执行 destroy 方法后，对 data 的改变不会再触发周期函数，说明此时 vue 实例已经解除了 事件监听以及和 dom 的绑定，但是 dom 结构依然存在

9. vue 是如何做IE 兼容

【参考答案】

        安装并引入 babel-polyfill 处理器包、es6-promise 包（一般是不支持 es6 语法及promise，无法发送 axios 请求）

10. vue 深度监听对象中新老值如何保持不一样

【参考答案】

       官方术语：观察 Vue 实例变化的一个表达式或计算属性函数。回调函数得到的参数为新值和旧值。表达式只接受监督的键路径。对于更复杂的表达式，用一个函数取代

       理解：对于复杂的表达式，用一个函数取代。

       实现：把复杂表达式或者对象，用 computed 属性包装一下，再来监听 computed 属性

11. vue 项目中使用过哪些第三方插件及使用的步骤

【参考答案】

         插件有很多，随便列举几个： vue-clipboard2（复制插件） Moment（时间格式处理）export2table（table 数据打印为 excel 表格）等。

         步骤：安装 -> 导入 -> 配置 -> 使用

12. 怎么在使用vue-router 切换页面时设置过渡动画

【参考答案】

         分析：根据路有深度和不同的转场设置动画

         ① 首先我们在路由文件（router\index.js）中，在每个路径的路由元信息 meta 中设置个 depth 属性值，用来表示其路由的深度（层级）；

         ② 使用 animinate.css 提供的效果来绑定不同的 class

         ③ 然后通过 watch 监听 $route，根据 to、from 元信息中的 depth 值的大小，设置不同的跳转动画

13. vue 状态更改时，怎么让页面局部渲染

【参考答案】

        在改变 data 中已定义好的属性值或对某个变量重新赋值时，可以通过使用 v-show 或v-if 来实现局部渲染

14. 怎么解决spa 首屏加载比较慢的问题

【参考答案】

        ① 使用服务器端渲染首屏

        ② 将 js 中的 css 单独抽离出来，放在 css 文件中

        ③ 极限打包压缩静态文件，首屏图片等可以使用 lazy-load

15. 在vue 项目中遇到哪些坑（难题）

【参考答案】

        ① 使用 keep-alive 包裹的组件/路由，打开一次后 created 只会执行一次，有两种情况，一、如果要重新渲染部分数据，可以在 activated 中做处理；二、路由/组件重新重新created，可以使用官方推荐的:key="key" ，然后去改变 key 的值，组件就会重新挂载了

        ② beforeRouteEnter 中的 next 函数的执行时间是在组件 mounted 之后，因此需要在此处处理的数据要注意了

        ③ 网页刷新时 vuex 数据会丢失，需配合 localStorage 或 sessionStorage 使用，把必须数据先存后取

        ④ 对于权限及不确定路由，可以使用 addRoutes()，可以避免抖动

        ⑤ 熟练使用 es6 的数组 map、find、filter 等方法，对解构赋值、class 继承、promise， 及 es7 中的 async 和 await

        ⑥ 使用 computed 替代 watch，computed 依赖于 data 属性的更改，是有缓存的

        ⑦ 通过 props 传递的值，不要在子组件去更改。开发中，如果直接更改 props，一、基本类型的值会报错，二、引用类型的值不会报错，但是不好去追溯数据的更改，很多人不太注意引用类型，可通过 computed 或 watch 去更改

         ⑧ 在 data 里调用 methods 的方法，可以在 data 里定义 let self = this，然后在使用 self.xx()进行调用

16. 基于vue 的组件库有哪些

【参考答案】

       iView UI 组件库、Vux UI 组件库、Element UI 组件库、Mint UI 组件库、Bootstrap-Vue UI 组件库、Ant Design Vue UI 组件库、AT-UI UI 组件库、Vant UI 组件库、cube-ui UI 组件库等

17. computed 和 watch 的区别和运用的场景？

【参考答案】

        computed： 是计算属性，依赖其它属性值，并且 computed 的值有缓存，只有它依赖的属性值发生改变，下一次获取 computed 的值时才会重新计算 computed 的值；

         watch： 更多的是「观察」的作用，类似于某些数据的监听回调 ，每当监听的数据变化时都会执行回调进行后续操作；

运用场景：

         当我们需要进行数值计算，并且依赖于其它数据时，应该使用 computed，因为可以利用computed 的缓存特性，避免每次获取值时，都要重新计算；

          当我们需要在数据变化时执行异步或开销较大的操作时，应该使用 watch，使用 watch 选项允许我们执行异步操作 ( 访问一个 API )，限制我们执行该操作的频率，并在我们得到最终结果前，设置中间状态。这些都是计算属性无法做到的

附汇总的其他部分前端面试题

2021年最新前端面试宝典JavaScript高级部分

2021年最新前端面试宝典之WebAPI部分

2021年最新前端面试宝典之JavaScript部分

2021年最新前端面试宝典之HTML+CSS部分