Vue面试题总结

1、组件间怎么传值,具体说说代码怎样实现

  • 子传父:子向父是通过 events($emit);通过父链 / 子链也可以通信($parent / $children);ref 也可以访问组件实例;provide / inject API;$attrs/$listeners
  • 父传子:父向子传递数据是通过 props,
  • 兄弟组件传值:bus,vuex
  • 跨级父子通信:Bus;Vuex;provide / inject API、$attrs/$listeners

2、Vue双向绑定原理

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

3、vue的生命周期(钩子函数)

beforecreate : 举个栗子:可以在这加个loading事件 created :在这结束loading,还做一些初始化,实现函数自执行 mounted : 在这发起后端请求,拿回数据,配合路由钩子做一些事情 beforeDestroy: 你确认删除XX吗? destroyed :当前组件已被删除,清空相关内容

4、应该在vue的生命周期的什么阶段发出ajax请求,为什么

看实际情况,一般在 created 里面就可以,如果涉及到需要页面加载完成之后的话就用 mounted

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

一个状态管理器,

只用来读取的状态集中放在store中; 改变状态的方式是提交mutations,这是个同步的事务; 异步逻辑应该封装在action中。 在main.js引入store,注入。新建了一个目录store,….. export 。 场景有:单页应用中,组件之间的状态同步、音乐播放、登录状态、加入购物车

6、Vue路由守卫

路由跳转前做一些验证,比如登录验证,是网站中的普遍需求。对此,vue-route 提供的 beforeRouteUpdate 可以方便地实现导航守卫

每个守卫方法接收三个参数:

  • to: Route: 即将要进入的目标 路由对象
  • from: Route: 当前导航正要离开的路由
  • next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数,确保要调用 next 方法,否则钩子就不会被 resolved

7、常用的vue指令,Vue的自定义指令怎么做

常用的vue指令有v-if、v-show,v-for,v-model等等

//全局指令
Vue.directive('dir2', {
    inserted(el) {
        console.log(el);
    }
})

8、Vue登录流程?需要做什么验证

在前后端完全分离的情况下,Vue项目中实现token验证大致思路如下:

1.直接登陆流程(登录是使用用户名与密码验证, 发送请求才需要在请求头带token)

  • 首先判断是否第一次登录, 如果是第一次登陆,前端调后端的登陆接口,发送用户名和密码
  • 如果不是第一次登陆, 浏览器会在缓存中查找token, 如果有token, 就
  • 后端收到请求,验证用户名和密码,验证成功,就给前端返回一个token
    • 第一次验证通过 hash加密 (发送前) , 将密码转化为密文, 到服务器数据库对比 密码密文对比
  • 前端拿到token,将token存储到localStorage和vuex中,并跳转路由页面
  • 前端每次跳转路由,就判断 localStroage 中有无 token ,没有就跳转到登录页面,有则跳转到对应路由页面
    • 对于需要登陆后才能访问的页面可以添加路由守卫()
  • 每次调后端接口,都要在请求头中加token,通常做法是在axios的请求库中,添加全局拦截器,将token设置在请求头中。
    • 拦截器:
  • 后端判断请求头中有无token,有token,就拿到token并验证token,验证成功就返回数据,验证失败(例如:token过期)就返回401,请求头中没有token也返回401
  • 如果前端拿到状态码为401,就清除token信息并跳转到登录页面

9、讲一下MVVM中的vm工作流程

ViewModel 通过双向数据绑定把 View 层和 Model 层连接了起来,而View 和 Model 之间的同步工作完全是自动的,无需人为干涉,因此开发者只需关注业务逻辑,不需要手动操作DOM, 不需要关注数据状态的同步问题,复杂的数据状态维护完全由 MVVM 来统一管理。

10、vue 和react的区别

1.监听数据变化原理不同
2.数据流不同
3.HOC和minixs
4.组件通信不同
5.模板渲染不同
6.框架本质不同
7.渲染过程不同

11、Vue里面的插槽

<slot>

是组件的一块HTML模板,父组件决定这块模板显不显示以及怎么显示。

位置由子组件自身决定(slot现在组件template的什么位置,父组件传过来的模板将来就显示在什么位置)

匿名插槽:只能有一个,可以放在组件的任何位置

12、Vue-cli2.0和Vue-cli3.0的区别

用vue-cli3.0版本创建的项目与2.0版本相比较,我们会发现,文件目录少了很多 eg:build、config,那么如何像vue-cli 2.* 之前关于端口号的配置、打包之后的路径的配置、图片的配置等,到哪里配置呢??vue-cli 3.0 可以在项目的根目录下新建一个 vue.config.js 文件,之前繁琐的配置都可以在这里直接配置

3.0能直接运行单个组件

3.0有一个UI管理界面

安装了2.0版本,要先卸载

13、Vue的路由实现 || vue-router的原理

**hash模式:**在浏览器中符号“#”,#以及#后面的字符称之为hash,用window.location.hash读取; 特点:hash虽然在URL中,但不被包括在HTTP请求中;用来指导浏览器动作,对服务端安全无用,hash不会重加载页面。 hash 模式下,仅 hash 符号之前的内容会被包含在请求中,如 http://www.xxx.com,因此对于后端来说,即使没有做到对路由的全覆盖,也不会返回 404 错误。

**history模式:**history采用HTML5的新特性;且提供了两个新方法:pushState(),replaceState()可以对浏览器历史记录栈进行修改,以及popState事件的监听到状态变更。 history 模式下,前端的 URL 必须和实际向后端发起请求的 URL 一致,如 http://www.xxx.com/items/id。后端如果缺少对 /items/id 的路由处理,将返回 404 错误。”

14、vue路由的钩子函数

首页可以控制导航跳转beforeEachafterEach等一般用于页面title的修改一些需要登录才能调整页面的重定向功能

beforeEach主要有3个参数tofromnext

toroute即将进入的目标路由对象

fromroute当前导航正要离开的路由

nextfunction一定要调用该方法resolve这个钩子执行效果依赖next方法的调用参数可以控制网页的跳转

15、对keep-alive 的了解

答:keep-alive 是 Vue 内置的一个组件,可以使被包含的组件保留状态,或避免重新渲染。

16、DOM 和虚拟DOM的区别 以及你对于他们了解

DOM的本质:DOM是浏览器概念,浏览器从服务器端读取html页面,浏览器将html解析成一棵元素嵌套关系的dom树,用对象来表示页面上的元素,并提供操作dom对象的api。

虚拟DOM:框架概念,程序员用js对象来模拟页面上dom元素的嵌套关系( 本质 ),为了实现页面元素的高效更新( 目的 )

虚拟DOM是真实DOM结构的映射,即一个数据集合

17、vue指令的生命周期

自定义指令有五个生命周期(也叫钩子函数),分别是 bind,inserted,update,componentUpdated,unbind

  • bind:只调用一次,指令第一次绑定到元素时调用,用这个钩子函数可以定义一个绑定时执行一次的初始化动作。
  • inserted:被绑定元素插入父节点时调用(父节点存在即可调用,不必存在于document中)。
  • update:被绑定于元素所在的模板更新时调用,而无论绑定值是否变化。通过比较更新前后的绑定值,可以忽略不必要的模板更新。
  • componentUpdated:被绑定元素所在模板完成一次更新周期时调用。
  • unbind:只调用一次,指令与元素解绑时调用。

18、vue封装公共组件(通用组件)需要考虑到什么

1.组件通信

2.处理事件

3.插槽

4.样式独立

5.尽量不要使用vuex传参

19、父组件怎么调用子组件里的方法

在子组件上绑定ref=‘子组件名称’ 使用$refs.子组件名称.子组件方法名称 来调用

20、css只在当前组件起作用

style 标签上加上 scoped 表示 style里面的样式只在当前页面生效

21、v-if 和 v-show 区别

答:v-if按照条件是否渲染,v-show是display的block或none;

22、

route

 

 

router的区别

答:

routepathparamshashqueryfullPathmatchedname

router是“路由实例”对象包括了路由的跳转方法,钩子函数等。

23、vue.js的两个核心是什么?

答:数据驱动、组件系统

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

组件系统:应用类UI可以看作全部是由组件树构成的。

24、vue常用的修饰符?

答:.prevent: 提交事件不再重载页面;.stop: 阻止单击事件冒泡;.self: 当事件发生在该元素本身而不是子元素的时候会触发;.capture: 事件侦听,事件发生的时候会调用

25、v-on 可以绑定多个方法吗?

答:可以 写法 v-on={方法一,方法二...方法x}

26、vue中 key 值的作用?

key的作用主要是为了高效的更新虚拟DOM

27、什么是vue的计算属性?

在模板中放入太多的逻辑会让模板过重且难以维护,在需要对数据进行复杂处理,且可能多次使用的情况下,尽量采取计算属性的方式

好处:①使得数据处理结构清晰;②依赖于数据,数据更新,处理结果自动更新;③计算属性内部this指向vm实例;④在template调用时,直接写计算属性名即可;⑤常用的是getter方法,获取数据,也可以使用set方法改变数据;⑥相较于methods,不管依赖的数据变不变,methods都会重新计算,但是依赖数据不变的时候computed从缓存中获取,不会重新计算。

28、vue等单页面应用及其优缺点

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

29、vue路由之间跳转

1.标签 router-link to=‘将要跳转的地址’

2.js this.$router.push('将要跳转的地址')

30、Vue中怎么实现跨域

1、打开config/index.js,在proxyTable中添写如下代码:

proxyTable: { 
  '/api': {  //使用"/api"来代替"http://aa.com" 
    target: 'http://aa.com', //源地址 
    changeOrigin: true, //改变源 
    secure:false // 是否使用https
    pathRewrite: { 
      '^/api': '/api' //路径重写 
      } 
  } 
}

2、使用axios请求数据时直接使用“/api”

31、Vue首屏加载过慢的解决方法有哪些

原因:网速,首次加载需要加载所有组件以及组件内部的逻辑代码,组件内的js、css文件 图片 媒体文件

解决办法:1.vue-router 路由懒加载

2.按需引入组件

3.在首页价格loading的效果(用户方面)

32、vue项目的多语言处理

Vue已经有了这个多语种的插件,vue-i18n

35.分别简述computed和watch的使用场景

computed: 当一个属性受多个属性影响的时候就需要用到computed

​ 最典型的栗子: 购物车商品结算的时候

watch: 当一条数据影响多条数据的时候就需要用watch

​ 栗子:搜索数据

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

答:1. 建立组件的模板,先把架子搭起来,写写样式,考虑好组件的基本逻辑。

2. 准备好组件的数据输入。即分析好逻辑,定好 props 里面的数据、类型。     3. 准备好组件的数据输出。即根据组件逻辑,做好要暴露出来的方法。     4. 封装完毕了,直接调用即可

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

答:vue文件的一个加载器,将template/js/style转换成js模块。 用途:js可以写es6、style样式可以scss或less、template可以加jade等

38.axios及安装?

答:请求后台资源的模块。npm install axios --save装好, js中使用import进来,然后.get或.post。返回在.then函数中如果成功,失败则是在.catch函数中。

39.v-modal的使用。

答:v-model用于表单数据的双向绑定,其实它就是一个语法糖,这个背后就做了两个操作: v-bind绑定一个value属性; v-on指令给当前元素绑定input事件。

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

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

41.渐进式框架的理解

答:主张最少;可以根据不同的需求选择不同的层级;

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

答:当 v-if 与 v-for 一起使用时,v-for 具有比 v-if 更高的优先级,这意味着 v-if 将分别重复运行于每个 v-for 循环中。所以,不推荐v-if和v-for同时使用。 如果v-if和v-for一起用的话,vue中的的会自动提示v-if应该放到外层去。

**43.**assets和static的区别

相同点:assets和static两个都是存放静态资源文件。

不同点:assets中存放的静态资源文件在项目打包时 ,会把打包后的文件放入static中,static中的文件在在没有打包时占用内存比较大 上传速度慢 然如果使用assets先打包放入static 然后再进行上传会快很多

44.vue和jQuery的区别

答:jQuery是使用选择器(

DOMHTML便DOMlabel

("lable").val();,它还是依赖DOM元素的值。

Vue则是通过Vue对象将数据和View完全分离开来了。对数据进行操作不再需要引用相应的DOM对象,可以说数据和View是分离的,他们通过Vue对象这个vm实现相互的绑定。这就是传说中的MVVM

45.引进组件的步骤

答: 在template中引入组件; 在script的第一行用import引入路径; 用component中写上组件名称。

46.delete和Vue.delete删除数组的区别

答:delete只是被删除的元素变成了 empty/undefined 其他的元素的键值还是不变。Vue.delete 直接删除了数组 改变了数组的键值。

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

区别:使用location.href='/url'来跳转,简单方便,但是刷新了页面;

Vue-router使用history.pushState('/url'),无刷新页面,静态跳转;

48.Vue里面router-link在电脑上有用,在安卓上没反应怎么解决?

答:Vue路由在Android机上有问题,babel问题,安装babel polypill插件解决。

49.Vue2中注册在router-link上事件无效解决方法

答: 使用@click.native。原因:router-link会阻止click事件,.native指直接监听一个原生事件

50.axios的特点有哪些

答:1.从浏览器中创建XMLHttpRequests;

2.node.js创建http请求;

3.支持Promise API;

4.拦截请求和响应;

5.转换请求数据和响应数据;

6.取消请求;

7.自动换成json。

8.axios中的发送字段的参数是data跟params两个,两者的区别在于params是跟请求地址一起发送的,data的作为一个请求体进行发送 params一般适用于get请求,data一般适用于post put 请求。

51.params和query的区别

答:用法:query要用path来引入,params要用name来引入,接收参数都是类似的,分别是this.

route.query.namethis.

route.params.name。 url地址显示:query更加类似于我们ajax中get传参,params则类似于post,说的再简单一点,前者在浏览器地址栏中显示参数,后者则不显示 注意点:query刷新不会丢失query里面的数据 params刷新 会 丢失 params里面的数据。

52.vue更新数组时触发视图更新的方法

答:push();pop();shift();unshift();splice(); sort();reverse()

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

答:beforeCreate, created, beforeMount, mounted

54.vue常用的性能优化

(1)合理的使用 v-if v-show
(2)v-for 后面加key
(3)自定义事件 dom事件及时销毁
(4)合理使用异步组件
(5)合理使用keep-alive
(6)合理使用commputed
(7)data的层级不要太深
(8)使用ssr

55.vue中ref的作用

1.获取dom元素:this.$refs.box
2.获取子元素中data :$refs.box.msg
3.调用子组件的方法:this.$refs.box.open()

56.路由模式有哪些

hash: history:
传参方式:query和params
接收参数:this.$route.params  this.$route.query

57.移动端适配

通过根元素<HTML>的font-size的大小,来控制整个html的字体大小,宽高,内外边距,等

58.为什么用vue开发

组件化开发  单页面路由 丰富API方法 双向数据绑定  单向数据流 易于结合UI库

59.BOM对象有哪些

1.widow
2.document
3.loaction
4.Navigator
5.screen
6.history

60.深拷贝和浅拷贝的区别

含义:假设a复制b,看a是否会发生改变,当b修改时,a发生改变则为浅拷贝,a没发生改变则为深拷贝。
深拷贝方法:
1.递归
2.json对象   JSON.parse(JSON.stringify())
3.JQ中的extend  jQuery.extend([deep], target, object1, [objectN]);

版权声明:
作者:wuhou123
链接:https://wuhou.fun/116.html
来源:前端网
文章版权归作者所有,未经允许请勿转载。

THE END
分享
二维码
海报
Vue面试题总结
1、组件间怎么传值,具体说说代码怎样实现 子传父:子向父是通过 events($emit);通过父链 / 子链也可以通信($parent / $children);ref 也可以访问组件……
<<上一篇
下一篇>>
文章目录
关闭
目 录