vue常见面试题总结

  1. 列举数据绑定

说出至少4vue当中的指令和它的用法?

v-if:判断是否隐藏;v-for:数据循环出来;v-bind:class:绑定一个属性;v-model:实现双向绑定

数据绑定最基础的形式是文本插值,使用 "Mustache" 语法(双大括号)

v-model 主要用在input select text checkboxradio等表单控件元素上的双向数据绑定

v-show 根据表达式的值来显示或隐藏HTML元素,简单的基于CSS的切换 

v-if 根据表达式的值在dom中生成或移除一个元素 

v-else 必须跟着v-if或者 v-show 使用 

 v-for 对数组或对象进行渲染 

v-bind 操作元素的 class 列表和内联样式 

v-on 绑定事件监听器 

    <a v-on:click.stop="doThis">a>

    <form v-on:submit.prevent="onSubmit">form>

      <a v-on:click.stop.prevent="doThat">a>

       <form v-on:submit.prevent>form>

2active-class是哪个组件的属性?

vue-router模块的router-link组件。

3、嵌套路由怎么定义?

在实际项目中我们会碰到多层嵌套的组件组合而成,但是我们如何实现嵌套路由呢?因此我们需要在 VueRouter 的参数中使用 children 配置,这样就可以很好的实现路由嵌套。
index.html,只有一个路由出口

  1. "app"
  2.      
  3.      

main.js,路由的重定向,就会在页面一加载的时候,就会将home组件显示出来,因为重定向指向了home组件,redirect的指向与path的必须一致。children里面是子路由,当然子路由里面还可以继续嵌套子路由。

  1. import Vue from 'vue' 
  2. import VueRouter from 'vue-router' 
  3. Vue.use(VueRouter) 
  4. //引入两个组件
  5. import home from "./home.vue" 
  6. import game from "./game.vue" 
  7. //定义路由 
  8. const routes = [ 
  9.     { path: "/", redirect: "/home" },//重定向,指向了home组件 
  10.     { 
  11.         path: "/home", component: home, 
  12.         children: [ 
  13.             { path: "/home/game", component: game } 
  14.         ] 
  15.     } 
  16. //创建路由实例 
  17. const router = new VueRouter({routes}) 
  18. new Vue({ 
  19.     el: '#app'
  20.     data: { 
  21.     }, 
  22.     methods: { 
  23.     }, 
  24.     router 
  25. })

home.vue,点击显示就会将子路由显示在出来,子路由的出口必须在父路由里面,否则子路由无法显示。

game.vue

  1.  

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

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

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

导航钩子有哪些?它们有哪些参数?

导航钩子有:

a/全局钩子和组件内独享的钩子。b/beforeRouteEnterafterEnterbeforeRouterUpdatebeforeRouteLeave

参数:

to(去的那个路由)、from(离开的路由)、next(一定要用这个函数才能去到下一个路由,如果不用就拦截)最常用就这几种

6scss是什么?在vue.cli中的安装使用步骤是?有哪几大特性?

css的预编译。

使用步骤:

第一步:用npm 下三个loadersass-loadercss-loadernode-sass

第二步:在build目录找到webpack.base.config.js,在那个extends属性中加一个拓展.scss

第三步:还是在同一个文件,配置一个module属性

第四步:然后在组件的style标签加上lang属性 ,例如:lang=”scss”

有哪几大特性:

1、可以用变量,例如($变量名称=值);
2、可以用混合器,例如()
3、可以嵌套

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

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

8v-model是什么?怎么使用? vue中标签怎么绑定事件?

可以实现双向绑定,指令(v-classv-forv-ifv-showv-on)。vuemodel层的data属性。绑定事件:

9iframe的优缺点?

iframe也称作嵌入式框架,嵌入式框架和框架网页类似,它可以把一个网页的框架和内容嵌入在现有的网页中。

优点:

  1. 解决加载缓慢的第三方内容如图标和广告等的加载问题
  2. Security sandbox
  3. 并行加载脚本
  4. 方便制作导航栏

缺点:

  1. iframe会阻塞主页面的Onload事件
  2. 即时内容为空,加载也需要时间
  3. 没有语意

10、简述一下SassLess,且说明区别?

他们是动态的样式语言,是CSS预处理器,CSS上的一种抽象层。他们是一种特殊的语法/语言而编译成CSS
变量符不一样,less@,而Sass$;
Sass
支持条件语句,可以使用if{}else{},for{}循环等等。而Less不支持;
Sass
是基于Ruby的,是在服务端处理的,而Less是需要引入less.js来处理Less代码输出Css到浏览器

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

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

12axios+tp5进阶中,调用axios.post(‘api/user’)是进行的什么操作?axios.put(‘api/user/8′)呢?

跨域,添加用户操作,更新操作。

13vuex是什么?怎么使用?哪种功能场景使用它?

vue框架中状态管理。在main.js引入store,注入。新建了一个目录store….. export 。场景有:单页应用中,组件之间的状态。音乐播放、登录状态、加入购物车

14mvvm框架是什么?它和其它框架(jquery)的区别是什么?哪些场景适合?

一个model+view+viewModel框架,数据模型modelviewModel连接两个

区别:vue数据驱动,通过数据来显示视图层而不是节点操作。

场景:数据操作比较多的场景,更加便捷

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

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

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

钩子函数参数:elbinding

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

vue用来写路由一个插件。router-linkrouter-view

17Vue的双向数据绑定原理是什么?

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

具体步骤:

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

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

第三步:Watcher订阅者是ObserverCompile之间通信的桥梁,主要做的事情是:
1
、在自身实例化时往属性订阅器(dep)里面添加自己
2、自身必须有一个update()方法
3、待属性变动dep.notice()通知时,能调用自身的update()方法,并触发Compile中绑定的回调,则功成身退。

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

18、请详细说下你对vue生命周期的理解?

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

  1. 创建前/后: beforeCreated阶段,vue实例的挂载元素$el和数据对象data都为undefined,还未初始化。在created阶段,vue实例的数据对象data有了,$el还没有。
  2. 载入前/后:在beforeMount阶段,vue实例的$eldata都初始化了,但还是挂载之前为虚拟的dom节点,data.message还未替换。在mounted阶段,vue实例挂载完成,data.message成功渲染。
  3. 更新前/后:当data变化时,会触发beforeUpdateupdated方法。
  4. 销毁前/后:在执行destroy方法后,对data的改变不会再触发周期函数,说明此时vue实例已经解除了事件监听以及和dom的绑定,但是dom结构依然存在

19、请说下封装 vue 组件的过程?

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

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

20、你是怎么认识vuex的?

vuex可以理解为一种开发模式或框架。比如PHPthinkphpjavaspring等。
通过状态(数据源)集中管理驱动组件的变化(好比springIOC容器对bean进行集中管理)。

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

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

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

用途:js可以写es6style样式可以scsslesstemplate可以加jade

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

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

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

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

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

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

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

24、聊聊你对Vue.jstemplate编译的理解?

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

详情步骤:

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

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

25vue的历史记录

history 记录中向前或者后退多少步

26vuejsangularjs以及react的区别?

1.AngularJS的区别

相同点:

都支持指令:内置指令和自定义指令。

都支持过滤器:内置过滤器和自定义过滤器。

都支持双向数据绑定。

都不支持低端浏览器。

不同点:

1.AngularJS的学习成本高,比如增加了Dependency Injection特性,而Vue.js本身提供的API都比较简单、直观。

2.在性能上,AngularJS依赖对数据做脏检查,所以Watcher越多越慢。

Vue.js使用基于依赖追踪的观察并且使用异步队列更新。所有的数据都是独立触发的。

对于庞大的应用来说,这个优化差异还是比较明显的。

2.React的区别

相同点:

React采用特殊的JSX语法,Vue.js在组件开发中也推崇编写.vue特殊文件格式,对文件内容都有一些约定,两者都需要编译后使用。

中心思想相同:一切都是组件,组件实例之间可以嵌套。

都提供合理的钩子函数,可以让开发者定制化地去处理需求。

都不内置列数AJAXRoute等功能到核心包,而是以插件的方式加载。

在组件开发中都支持mixins的特性。

不同点:

React依赖Virtual DOM,Vue.js使用的是DOM模板。React采用的Virtual DOM会对渲染出来的结果做脏检查。

Vue.js在模板中提供了指令,过滤器等,可以非常方便,快捷地操作DOM

26vue生命周期面试题

什么是vue生命周期?

Vue 实例从创建到销毁的过程,就是生命周期。也就是从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新渲染、卸载等一系列过程,我们称这是 Vue 的生命周期。

vue生命周期的作用是什么?

它的生命周期中有多个事件钩子,让我们在控制整个Vue实例的过程时更容易形成好的逻辑。

vue生命周期总共有几个阶段?

它可以总共分为8个阶段:创建前/, 载入前/,更新前/,销毁前/销毁后

第一次页面加载会触发哪几个钩子?

第一次页面加载时会触发 beforeCreate, created, beforeMount, mounted 这几个钩子

DOM 渲染在 哪个周期中就已经完成?

DOM 渲染在 mounted 中就已经完成了

简单描述每个周期具体适合哪些场景?

生命周期钩子的一些使用方法: beforecreate : 可以在这加个loading事件,在加载实例时触发 created : 初始化完成时的事件写在这里,如在这结束loading事件,异步请求也适宜在这里调用 mounted : 挂载元素,获取到DOM节点 updated : 如果对数据统一处理,在这里写上相应函数 beforeDestroy : 可以做一个确认停止事件的确认框 nextTick : 更新数据后立即操作dom

27arguments是一个伪数组,没有遍历接口,不能遍历

28cancasSVG的是什么以及区别

SVG

SVG 是一种使用 XML 描述 2D 图形的语言。
SVG 基于 XML,这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。
SVG 中,每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化,那么浏览器能够自动重现图形。

Canvas

Canvas 通过 JavaScript 来绘制 2D 图形。
Canvas 是逐像素进行渲染的。
canvas 中,一旦图形被绘制完成,它就不会继续得到浏览器的关注。如果其位置发生变化,那么整个场景也需要重新绘制,包括任何或许已被图形覆盖的对象。

Canvas SVG 的比较

Canvas

  1. 依赖分辨率
  2. 不支持事件处理器
  3. 弱的文本渲染能力
  4. 能够以 .png .jpg 格式保存结果图像
  5. 最适合图像密集型的游戏,其中的许多对象会被频繁重绘

SVG

  1. 不依赖分辨率
  2. 支持事件处理器
  3. 最适合带有大型渲染区域的应用程序(比如谷歌地图)
  4. 复杂度高会减慢渲染速度(任何过度使用 DOM 的应用都不快)
  5. 不适合游戏应用

1、vuex有哪几种属性?
答:有五种,分别是 State、 Getter、Mutation 、Action、 Module
2、vuex的State特性是?
一、Vuex就是一个仓库,仓库里面放了很多对象。其中state就是数据源存放地,对应于与一般Vue对象里面的data
二、state里面存放的数据是响应式的,Vue组件从store中读取数据,若是store中的数据发生改变,依赖这个数据的组件也会发生更新
三、它通过mapState把全局的 state 和 getters 映射到当前组件的 computed 计算属性中
3、vuex的Getter特性是?
答:一、getters 可以对State进行计算操作,它就是Store的计算属性
二、 虽然在组件内也可以做计算属性,但是getters 可以在多组件之间复用
三、 如果一个状态只在一个组件内使用,是可以不用getters
4、vuex的Mutation特性是?
答:一、Action 类似于 mutation,不同在于:
二、Action 提交的是 mutation,而不是直接变更状态。
三、Action 可以包含任意异步操作
5、Vue.js中ajax请求代码应该写在组件的methods中还是vuex的actions中?
答:一、如果请求来的数据是不是要被其他组件公用,仅仅在请求的组件内使用,就不需要放入vuex 的state里。
二、如果被其他地方复用,这个很大几率上是需要的,如果需要,请将请求放入action里,方便复用,并包装成promise返回,在调用处用async await处理返回的数据。如果不要复用这个请求,那么直接写在vue文件里很方便。
6、不用Vuex会带来什么问题?

一、可维护性会下降,你要想修改数据,你得维护三个地方

二、可读性会下降,因为一个组件里的数据,你根本就看不出来是从哪来的

三、增加耦合,大量的上传派发,会让耦合性大大的增加,本来Vue用Component就是为了减少耦合,现在这么用,和组件化的初衷相背。
但兄弟组件有大量通信的,建议一定要用,不管大项目和小项目,因为这样会省很多事

vuex的优势

1 状态管理工具 核心是响应式的做到数据管理, 一个页面发生数据变化。动态的改变对应的页面

你可能感兴趣的:(vue)