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路由的钩子函数
首页可以控制导航跳转,beforeEach,afterEach等,一般用于页面title的修改。一些需要登录才能调整页面的重定向功能。
beforeEach主要有3个参数to,from,next:
to:route即将进入的目标路由对象,
from:route当前导航正要离开的路由
next:function一定要调用该方法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、
router的区别
答:
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是使用选择器(
("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.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
来源:前端网
文章版权归作者所有,未经允许请勿转载。

共有 0 条评论