关于Vue的一些要点

参考文章:58 道 Vue 常见面试题集锦,涵盖入门到精通,自测 Vue 掌握程度(Lucky Girl

文章链接:https://mp.weixin.qq.com/s/YMSAq14dYPjda0LyUyWjBg

1.Vue的优点

答:

轻量级框架,只关注视图层,大小只有几十kb;

简单易学,中文文档,国人开发;

双向数据绑定,在数据操作上非常简单;

组件化,保留了React的优点,实现了HTML的封装和重用;

虚拟DOM,在Vue中不直接操作DOM,而是先用虚拟DOM最后再直接操作DOM。

运行速度更快,同样是操作虚拟DOM,Vue的性能比React要强大

2.vue-loader

处理.vue文件,将template/js/style转换成js模块。js可以写es6,style样式可以写scss或less,template可以加jade

3.axios

npm install axios --save装好后,用import引入,然后.get或.post。返回成功在.then函数中,失败在.catch函数中。

4.computed和watch

computed,当一个属性受多个属性影响时用computed。

watch,当一个属性影响多个属性时用watch

5.v-on可以监听多个事件

<input type="text" v-on="{input:onInput,focus:onFocus,blur:onBlur, }">

6.$nextTick

当修改了data的值后马上获取这个dom元素的值,是获取不到更新后的值,需要使用$nextTick的回调,才能在dom上获取到更新后的值

7.vue中的data为什么是一个函数

写成函数时,每个组件都会返回一份新的data,如果写成对象形式,会让所有组件示例共用一份data

8.Vue中双向数据绑定是如何实现的

通过数据劫持、发布订阅模式实现的,核心方法是Object.defineProperty()。数据和视图同步,数据变化视图也会变化,视图变化数据也会跟着变化。

9.单页面应用和多页面应用

单页面应用SPA,只有一个主页面,浏览器一开始就加载所有必须的html/js/css,所有的页面内容都包含在这个所谓的主页面中。在写的时候会把页面片段分开写,然后在交互的时候由路由程序动态载入,单页面的页面跳转仅刷新局部资源,多应用于PC端。

多页面MPA,页面跳转时整页刷新,有多个页面。

单页面优点:内容的改变不需要重新加载整个页面,对服务器的压力较小,切换页面内容时可以有比较炫的效果。

单页面缺点:不利于SEO;初次加载耗时多;页面复杂度提高很多;单页面不能用浏览器的前进后退功能,如果需要导航要自行实现前进后退。

10.v-if和v-for的优先级

v-if、 v-for一起使用时,v-for的优先级更高,这意味着v-if将重复运行在每个循环的item。所以不推荐同时使用,最好将v-if放到外层。

11.assets和static的区别

都是存放静态资源文件的,图片、字体、图标、样式文件。

assets中的压缩之后再上传,static的不会压缩而是直接上传。

建议:引入的第三方资源文件放在static中直接上传,自己写的样式文件最好在assets压缩再上传

12.vue的两个核心点

数据驱动:viewModel,保证数据和视图的一致性

组件系统:应用类UI可以看做组件树构成的

13.Vue和jQuery的区别

jQuery是使用选择器$选取DOM对象,对其进行赋值、取值、事件绑定等操作,与原生HTML相比的区别只在于更方便的选取和操作DOM对象。数据和界面是在一起的,比如要获取label标签的值"$("label").val()",还是依赖DOM元素的值。

而Vue是通过Vue对象将数据和View完全分离开来,对数据进行操作不再需要引用相应的DOM对象。

14.SPA首屏加载慢如何解决

安装动态懒加载所需插件;使用CDN资源

15.Vue-router跳转和location.href有什么区别

location.href = /url 刷新了页面。

router.push(/url)是静态跳转,不会刷新页面,使用了diff算法,实现了按需加载,减少了DOM的消耗。vue-router实际上是使用history.pushState来实现的。

16.vue slot

父组件想要在子组件内放一些DOM,这些DOM的显示就是slot负责的内容

17.vue-router 里params和query的区别

query要用path引入,params要用name引入。query会显示在浏览器url中而params不会。页面刷新,query不会丢失,params会丢失。

18.vue初始化页面闪动问题

在Vue初始化之前,div是不归vue管的,所以代码未被解析,可能会出现{{msg}}字样,虽然可能会很短暂,但是还是要解决一下。可以在根元素上加上 style="display: none;" :style="{display:  block }"

19.什么是Vue的生命周期?有什么作用?

每个Vue实例在被创建时都要经过一系列的初始化过程,例如,需要设置数据监听、编译模板、将实例挂载到DOM并在数据变化时更新DOM。同时会在这个过程中会运行一些叫做生命周期钩子的函数,这给用户在不同阶段添加自己的代码的机会,例如如果要通过某些插件操作DOM节点,如在页面渲染完后弹出广告窗,那最早只能在mounted中进行。

20.每个周期具体适合哪些场景

beforeCreate:在beforeCreate生命周期执行的时候,data和methods中的数据都还没有初始化。

created:data和methods都已经被初始化好了,可以使用data和methods了。

beforeMount:在内存中已经编译好了模板,但是还没有挂载到页面中,此时页面还是旧的

mounted:Vue实例已经初始化完成了,组件脱离了创建阶段,进入到了运行阶段,可以操作页面上的DOM节点了

beforeUpdate: 此时页面中的显示数据还是旧的,data中的数据时更新后的数据,页面还没有和最新的数据保持同步

updated:页面显示的数据和data中的数据已经保持同步了,都是最新的

beforeDestory:Vue实例从运行阶段进入到了销毁阶段,这时所有的data、methods、指令、过滤器...都是处于可用状态,还没有真正被销毁

destroyed:这时所有的data、methods、指令、过滤器...都不可用了,组件已经被销毁了

21.vue-router实现路由懒加载(动态加载路由)

三种方式:

第一种:vue异步组件技术,vue-router配置路由,可以实现按需加载。这种情况下一个组件生成一个js文件。

第二种:路由懒加载,使用import

第三种:webpack提供的require.ensure(),多个路由指定相同的chunkName会合并打包成一个js文件

22.vuex有哪几种属性?

state:基本数据,数据源存放地

getters:从基本数据派生出来的数据

mutations:提交更改数据的方法,同步

actions:像一个装饰器,包裹mutations,使之可以异步

modules:模块化vuex

23.vue中ajax请求应该写在组件的methods里还是vuex的actions?

如果请求来的数据不需要被公用,就不用放在vuex的state里,放在组件里就可以了。如果其他地方要复用,应该放在action里

24.渐进式框架的理解

每个框架都有自己的主张,渐进式意味着主张最少,可以根据不同的需求选择不同的层级。比如Vue,你可以在原有的大系统上,只用它来实现一两个组件,当jQuery用;也可以整个用它全家桶开发,当Angular用;还可以用它的视图,搭配自己设计的整个下层用。它只做自己该做的事,不会强迫你必须怎么用。

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

推荐阅读更多精彩内容

  • 本文首发于TalkingCoder,一个有逼格的程序员社区。转载请注明出处和作者。 写在前面 本文为系列文章,总共...
    Aresn阅读 9,514评论 0 42
  • Vue讲解 Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层...
    艾曼大山阅读 11,707评论 7 109
  • 基于Vue的一些资料 内容 UI组件 开发框架 实用库 服务端 辅助工具 应用实例 Demo示例 element★...
    尝了又尝阅读 1,142评论 0 1
  • 1.css只在当前组件起作用答:在style标签中写入scoped即可 例如: 2.v-if 和 v-show 区...
    小棋子js阅读 512评论 0 0
  • 夜,冷嗖嗖的风 我,孤单单的走 昏黄的大道 落叶飘了满地 看着我的影子 仿佛我也是个影子 没人注意 注定孤独 消失...
    Forever默阅读 24评论 0 0