传智教育旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

本帖最后由 小鲁哥哥 于 2021-7-20 21:03 编辑


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年最新前端面试宝典之HTML+CSS部分

点评

海!外直播 cutt.us/e99 ***视  发表于 2021-7-20 18:32
分享至 : QQ空间
收藏

1 个回复

倒序浏览
您需要登录后才可以回帖 登录 | 加入黑马