Vue常见的面试题汇总

1、V-if和V-show的区别

答案:区别就是dom元素是否挂载了,v-show是dom树上有内容,不显示,display:none;v-if是dom树上无内容

2、Vue组件间是怎么通讯的

答案:1、父组件-->子组件

​ 方式:父组件给子组件绑定属性,子组件通过props属性来接收传递的数据

​ 注意:属性的值必须在组件中通过props属性指定,属性名必须与父组件中定义的一致。props可以是一个数组或对象

​ 2、子组件-->父组件

​ 方式:在父组件中声明一个接受数据的函数,父组件给子组件绑定事件,子组件通过$emit触发事件,并且可在此时传递参数,

​ 父组件通过定义好的监听事件接收参数(注意参数是什么 )

​ 3、非父子组件间的通讯

​ 方式: 创建一个新Vue的实例,让各个兄弟共用同一个事件机制。(关键点)

​ 传递数据方,通过事件触发$emit(方法名, 传递的数据)。

​ 接收数据方,在mounted() 钩子函数(挂载实例) 中 触发事件$on(方法名, callback(接收数据的数据)),

​ 此时callback函数中的this已经发生了改变, 可以使用箭头函数。

​ 对于大型复杂的项目,采用vuex 状态管理更适合

3、常见指令

答案:

​ v-text:更新DOM对象的 textContent

​ v-html:更新DOM对象的 innerHTML

​ v-bind:当表达式的值改变时,将其产生的连带影响,响应式地作用于 DOM

​ v-on:绑定事件

​ v-for:基于源数据多次渲染元素或模板块

​ v-if:根据表达式的值的真假条件,销毁或重建元素

​ v-show:根据表达式之真假值,切换元素的 display CSS 属性

​ v-pre:跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。跳过大量没有指令的节点会加快编译

​ v-once:只渲染元素和组件一次。随后的重新渲染,元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能

4、怎么定义组件

答案:

​ 全局定义:Vue.component(组件名, {template: 模板字符串})

​ 局部定义:components:{组件名: {template: 模板字符串}}

​ 单文件组件:包含template,script,style三部分

5、vue路由是怎么做的(路由的原理)

答案:浏览器URL中的哈希值(# hash)和 component的对应关系,一个哈希值对应一个组件

6、怎么请求数据的

答案:用axios发送请求

7、谈谈组件化和模块化的区别

答案:

​ 组件化:组件化就是基于可重用的目的,将一个大的软件系统按照分离关注点的形式,拆分成多个独立的组件,主要目的就是减少耦合。

​ 一个独立的组件可以是一个软件包、web服务、web资源或者是封装了一些函数的模块。

​ 这样,独立出来的组件可以单独维护和升级而不会影响到其他的组件。

​ 模块化:模块化的目的在于将一个程序按照其功能做拆分,分成相互独立的模块,

​ 以便于每个模块只包含与其功能相关的内容,模块之间通过接口调用。

​ 将一个大的系统模块化之后,每个模块都可以被高度复用。

​ 区别:模块化的目的是为了重用,模块化后可以方便重复使用和插拨到不同的平台,不同的业务逻辑过程中。

​ 组件化的目的是为了解耦,把系统拆分成多个组件,分离组件边界和责任,便于独立升级和维护。

8、Vue的数据双向绑定原理(如果更深层的话就要涉及到订阅发布者模式了可以自己看)

答案:

​ Vue在初始化实例的时候,会把data中所有的数据,用Object.defineProperty方法全部加给vm对象,

​ 这个时候,vm对象中的数据就有了set和get方法,set这个函数会在属性被赋值的时候自动调用,

​ get这个函数会在属性被获取值的时候自动调用,用户获取到的属性的值,其实就是get方法的返回值。也就能实现双向绑定了

9、Vue全家桶有些什么

​ vue:主要Vue

​ vue-router:关于路由方面的配置

​ vuex:数据共享和缓存用

​ vue-resource:于后台交互用(现在改为axios 但是axios不是Vue里面的东西)

​ vue-cli:快速创建项目的脚手架

答案:

10、Filter过滤器

作用:

​ 文本数据格式化 , 也就是: 将数据按照我们指定的一种格式输出(可以直接说过滤)

​ 过滤器可以用在两个地方:{{}}和 v-bind 表达式

​ 两种过滤器:1 全局过滤器 2 局部过滤器

11、Vue生命周期

一个组件从开始到最后消亡所经历的各种状态,就是一个组件的生命周期

​ beforeCreate()

​ 说明:在实例初始化之后,数据观测 (data observer) 和 event/watcher 事件配置之前被调用

​ 注意:此时,无法获取 data中的数据、methods中的方法

​ created()

​ 说明:这是一个常用的生命周期,可以调用methods中的方法、改变data中的数据

​ beforeMounted()

​ 说明:在挂载开始之前被调用,此时无法获取到el中的DOM元素

​ mounted()

​ 说明:此时,vue实例已经挂载到页面中,可以获取到el中的DOM元素,进行DOM操作

​ beforeUpdated()

​ 说明:数据更新时调用,发生在虚拟 DOM 重新渲染和打补丁之前。你可以在这个钩子中进一步地更改状态,这不会触发附加的重渲染过程。

​ 注意:此处获取的数据是更新后的数据,但是获取页面中的DOM元素是更新之前的

​ updated()

​ 说明:组件 DOM 已经更新,所以你现在可以执行依赖于 DOM 的操作

​ beforeDestroy()

​ 说明:实例销毁之前调用。在这一步,实例仍然完全可用。

​ 使用场景:实例销毁之前,执行清理任务,比如:清除定时器等

​ destroyed()

​ 说明:Vue 实例销毁后调用。调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。

12、小程序和vue的区别和联系

​ 区别:微信小程序是运行在微信里的APP,vue是一个流行框架

​ 联系:微信小程序借鉴了vue的部分语法,但也有一些区别,例如:显示隐藏元素,v-show和hidden;事件处理:v-on和bindtap

13、Vuex的使用和五个核心

五个核心:state , getter , mutation , action , module

14、vue中Tab栏怎么实现

​ 每一个tab标题对应一个tab组件,并且每一个标题都有一个点击事件和传入的参数,在点击的时候tab组件接收参数来控制显示和隐藏

​ 也可以用路由实现,适用于全屏的tab

15、在vue中获取dom元素

​ 在vue中可以通过给标签加ref属性,就可以在js中利用$refs去引用它,从而操作该dom元素

16、vue单页面 首屏加载怎么优化

  1. 按需加载

  2. 基于DllPlugin 和 DllReferencePlugin 的 webpack 构建优化

  3. 异步组件

  4. 优化组件加载时机

18、什么是MVVM。分别描述一下你对MVVM优缺点的理解

​ 即:Model-View-ViewModel 它是一种基于前端开发的架构模式,其核心是提供对View 和 ViewModel 的双向数据绑定,

​ 这使得ViewModel 的状态改变可以自动传递给 View,即所谓的数据双向绑定。

​ MVVM不仅简化了业务与界面的依赖关系,还优化了数据频繁更新的解决方案,甚至可以说提供了一种有效的解决模式。

​ MVVM用来做服务端是极其不适用的,因为:网络资源成本过高 开发成本过高

19、vue.js的view-model是如何工作的

​ Vue.js 是一个提供了 MVVM 风格的双向数据绑定的 Javascript 库,专注于View 层。

​ 它的核心是 MVVM 中的 VM,也就是 ViewModel。 ViewModel负责连接 View 和 Model,

​ 保证视图和数据的一致性,这种轻量级的架构让前端开发更加高效、便捷。

20、vue中$set什么时候用

​ 生成vue实例后,当再次给数据赋值时,有时候并不会自动更新到视图上去,此时使用 vm.$set实例方法,这也是全局 Vue.set方法的别名

21、Vue-cli的src文件夹中有哪些文件

​ assets中是图片,字体等一些静态资源

​ components中是组件

​ filters中是过滤器

​ router中是路由文件

​ App.vue 根组件

​ mian.js

22、vue-router有哪几种导航钩子?(具体怎么用的)

三种,
第一种:是全局导航钩子:router.beforeEach(to,from,next),作用:跳转前进行判断拦截。
第二种:组件内的钩子
第三种:单独路由独享组件

23、路由之间是如何跳转的跳转?

​ 1、router-link to = 'path'

​ 2、router.push('path')

24、怎么定义vue-router的动态路由?怎么获取传过来的动态参数?

​ 在router目录下的index.js文件中,对path属性加上/:id。 使用router对象的params.id

25、vue-router是什么?它有哪些组件?

​ vue用来写路由一个插件。router-link、router-view

26、如何让CSS只在当前组件中起作用?

​ 将当前组件的style修改为<style scoped>

27、<keep-alive></keep-alive>的作用是什么?

​ <keep-alive></keep-alive> 包裹动态组件时,会缓存不活动的组件实例,主要用于保留组件状态或避免重新渲染。

大白话: 比如有一个列表和一个详情,那么用户就会经常执行打开详情=>返回列表=>打开详情…这样的话列表和详情都是一个频率很高的页面,那么就可以对列表组件使用<keep-alive></keep-alive>进行缓存,这样用户每次返回列表的时候,都能从缓存中快速渲染,而不是重新渲染

28、如何实时修改data中数组中的值(数据改变试图改变)

this.$set(this.data,”key”,value’)

​ $set的使用方法自己查

29、slot是什么

​ 插槽:

​ 三种方式:1、匿名插槽

​ 2、具名插槽

​ 3、带参数的插槽

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,185评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,445评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,684评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,564评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,681评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,874评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,025评论 3 408
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,761评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,217评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,545评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,694评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,351评论 4 332
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,988评论 3 315
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,778评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,007评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,427评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,580评论 2 349

推荐阅读更多精彩内容

  • 一:什么是闭包?闭包的用处? (1)闭包就是能够读取其他函数内部变量的函数。在本质上,闭包就 是将函数内部和函数外...
    xuguibin阅读 9,547评论 1 52
  • # 传智播客vue 学习## 1. 什么是 Vue.js* Vue 开发手机 APP 需要借助于 Weex* Vu...
    再见天才阅读 3,530评论 0 6
  • VUE Vue :数据驱动的M V Vm框架 m :model(后台提供数据),v :view(页面),vM(模板...
    wudongyu阅读 5,389评论 0 11
  • vue是什么? vue是构建数据驱动的web界面的渐进式框架。Vue.js 的目标是通过尽可能简单的 API 实现...
    九四年的风阅读 8,697评论 2 131
  • 有人开始摇头后悔 有人还在咬牙死撑 有人终于恍然醒悟 有人依旧懵懂无知 有的人明明看得清楚却做得糊涂 有人即使一无...
    妙齿阅读 236评论 8 3