vue常见面试题总结大全(下)

28. vue双向绑定原理

VUE实现双向数据绑定是通过数据劫持结合发布者-订阅者模式的方式来实现的, Object.defineProperty() 这个方法重新定义了对象获取属性值(get)和设置属性值(set)的操作来实现的。

29. vuex的理解

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。

简单的说吧,我是这么认为的:Vuex 就是前端为了方便数据的操作而建立的一个” 前端数据库“。

30. vue组件组件之间传参(父传子,子传父

父组件向子组件传值:

(1)子组件在props中创建一个属性,用来接收父组件传过来的值;

(2)在父组件中注册子组件;

(3)在子组件标签中添加子组件props中创建的属性;

(4)把需要传给子组件的值赋给该属性

子组件向父组件传值:

(1)子组件中需要以某种方式(如点击事件)的方法来触发一个自定义的事件;

(2)将需要传的值作为$emit的第二个参数,该值将作为实参传给响应事件的方法;

(3)在父组件中注册子组件并在子组件标签上绑定自定义事件的监听。

31. Vue路由钩子

说到路由,不得不说的就是路由钩子,他其实就是路由的各种状态的回调函数,跟页面的生命周期有点相似,主要用在登陆拦截,token,sessionstory等的拦截,从而跳转到login

router.beforeEach可以注册一个全局的路由钩子,它有三个参数

to: Route: 即将要进入的目标 路由对象

from: Route: 当前导航正要离开的路由

next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。

next(): 进行管道中的下一个钩子。如果全部钩子执行完了,则导航的状态就是confirmed (确认的)。

next(false): 中断当前的导航。如果浏览器的 URL 改变了(可能是用户手动或者浏览器后退按钮),那么 URL 地址会重置到 from 路由对应的地址。

next('/') 或者 next({ path: '/' }): 跳转到一个不同的地址。当前的导航被中断,然后进行一个新的导航。

确保要调用next 方法,否则钩子就不会被 resolved。

32. 用vue过程中遇到什么BUG?

症结1:删除的过滤器仍被引用

BUG: vue.min.js:7 Uncaught TypeError: Cannot read property 'read' of undefined

症结2:无法找到待加载的页面

BUG: vue.min.js:6 Uncaught TypeError: Cannot set property '__vue__' of undefined

症结3:v-for="10",正确写法v-for="p in 10"

BUG: vue.min.js:7 Uncaught TypeError: Cannot read property 'create' of undefined

33. 导航跳转的方式有哪些?

(1)router link to 跳转下一个页面

(2)$router.push(要跳转的路径)

(3)$router.replace(要跳转的路径),没有历史记录

(4)$router.go(前进或后退,数字类型)Window下history对象go

34. 递归是什么?

答:自己调用自己,直到满足退出条件。

35. 递归用在什么地方?怎么用?

答:递":传递,“归”:回归。

简单的解释:方法内调用它本身。

传递和回归必须存在一个临界点:比如最内层被调用的方法内给了一个返回值,或者是最内存被调用方法结束,然后将结果返回给上一层的方法.,然后一层层结束,一层层返回。

它的使用场景,比如会用递归来解决斐波那契数列、阶乘。。的问题。

36. Vue中的递归怎么用?用在哪?

答:组件中需要组件调用自身,这就是递归组件,递归组件需要声明name和自己引入自己并声明注册为组件,并且需要使用props进行传参,其还需要一个停止条件,否则会进入死循环。

vue的递归组件和其v-for指令之间的关系和js中的for循环和递归函数一样,一个是有尽头,一个是不知道到底嵌套了多少层级。在vue中我们是数据驱动界面,根据数据来渲染界面,而很多数据我们是从后台获取,事先并不知道它会嵌套多少层,这时候使用v-for指令就不能满足我们的要求了,需要使用递归组件,和js中的递归函数一个道理!

37. 对vue的理解?

vue对比angular

(1)vue在设计之初参考了很多angularjs的思想s

(2)vue相对比与angular比较简单

(3)vue相对比与angular比较小巧,运行速度快

(4)vue与angular数据绑定都可以用{{}}

(5)vue指令用v-xxx angularjs用ng-xxx

(6)vue数据放在data对象里面,angular数据绑定到$scope对象上

vue对比react

(1)vue与react都使用 virtual DOM

(2)vue与react都提供了组件化的视图组件

(3)vue与react将注意力集中保持在核心库,有丰富的插件库

(4)react使用jsx渲染页面,vue使用更简单的模版

(5)vue比react运行速度更快

计算属性放在computed:{//函数} 效率高 methods设置效率低。

38. scss是什么?安装使用的步骤是?有哪几大特性?

答:预处理css,把css当前函数编写,定义变量,嵌套。 先装css-loader、node-loader、sass-loader等加载器模块,在webpack-base.config.js配置文件中加多一个拓展:extenstion,再加多一个模块:module里面test、loader

有哪几大特性:

(1)可以用变量,例如($变量名称=值);

(2)可以用混合器,例如()

(3)可以嵌套

39. mint-ui是什么?怎么使用?说出至少三个组件使用方法?

答:基于vue的前端组件库。npm安装,然后import样式和js,vue.use(mintUi)全局引入。在单个组件局部引入:import {Toast} from ‘mint-ui’。组件一:Toast(‘登录成功’);组件二:mint-header;组件三:mint-swiper

40. axios是什么?怎么使用?描述使用它实现登录功能的流程?

答:请求后台资源的模块。npm install axios -S装好,然后发送的是跨域,需在配置文件中config/index.js进行设置。后台如果是Tp5则定义一个资源路由。js中使用import进来,然后.get或.post。返回在.then函数中如果成功,失败则是在.catch函数中

41. $route和$router的区别

答:$route是“路由信息对象”,包括path,params,hash,query,fullPath,matched,name等路由信息参数。而$router是“路由实例”对象包括了路由的跳转方法,钩子函数等。

42. Vue的路由实现:hash模式 和 history模式

hash模式:在浏览器中符号“#”,#以及#后面的字符称之为hash,用window.location.hash读取;特点:hash虽然在URL中,但不被包括在HTTP请求中;用来指导浏览器动作,对服务端安全无用,hash不会重加载页面。

history模式:history采用HTML5的新特性;且提供了两个新方法:pushState(),replaceState()可以对浏览器历史记录栈进行修改,以及popState事件的监听到状态变更。

43. 自定义指令(v-check、v-focus)的方法有哪些?它有哪些钩子函数?还有哪些钩子函数参数?

答:全局定义指令:在vue对象的directive方法里面有两个参数,一个是指令名称,另外一个是函数。组件内定义指令:directives

钩子函数:bind(绑定事件触发)、inserted(节点插入的时候触发)、update(组件内相关更新)

钩子函数参数:el、binding 

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

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

45. 请说下封装vue组件的过程?

答:首先,组件可以提升整个项目的开发效率。能够把页面抽象成多个相对独立的模块,解决了我们传统项目开发:效率低、难维护、复用性等问题。

然后,使用Vue.extend方法创建一个组件,然后使用Vue.component方法注册组件。子组件需要数据,可以在props中接受定义。而子组件修改好数据后,想把数据传递给父组件。可以采用emit方法。 

46. vue-loader是什么?使用它的用途有哪些?

答:解析.vue文件的一个加载器,跟template/js/style转换成js模块。

用途:js可以写es6、style样式可以scss或less、template可以加jade等 

47. 请说出vue.cli项目中src目录每个文件夹和文件的用法?

答:assets文件夹是放静态资源;components是放组件;router是定义路由相关的配置;view视图;app.vue是一个应用主组件;main.js是入口文件 

48. vue.cli中怎样使用自定义的组件?有遇到过哪些问题吗?

答:第一步:在components目录新建你的组件文件(smithButton.vue),script一定要export default {

第二步:在需要用的页面(组件)中导入:import smithButton from ‘../components/smithButton.vue’

第三步:注入到vue的子组件的components属性上面,components:{smithButton}

第四步:在template视图view中使用,  问题有:smithButton命名,使用的时候则smith-button。 

49. 聊聊你对Vue.js的template编译的理解?

答:简而言之,就是先转化成AST树,再得到的render函数返回VNode(Vue的虚拟DOM节点)

详情步骤:

首先,通过compile编译器把template编译成AST语法树(abstract syntax tree 即 源代码的抽象语法结构的树状表现形式),compile是createCompiler的返回值,createCompiler是用以创建编译器的。另外compile还负责合并option。

然后,AST会经过generate(将AST语法树转化成render funtion字符串的过程)得到render函数,render的返回值是VNode,VNode是Vue的虚拟DOM节点,里面有(标签名、子节点、文本等等)

50. vue等单页面应用及其优缺点

答:优点:Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件,核心是一个响应的数据绑定系统。MVVM、数据驱动、组件化、轻量、简洁、高效、快速、模块友好。缺点:不支持低版本的浏览器,最低只支持到IE9;不利于SEO的优化(如果要支持SEO,建议通过服务端来进行渲染组件);第一次加载首页耗时相对长一些;不可以使用浏览器的导航按钮需要自行实现前进、后退。

 

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