vue面试题和答案
1、rem 换算原理
我通常会写一个js文件,在这个文件中,当浏览器尺寸变化的时候,window.onresize事件会,根据浏览器的宽
来计算fontSize的值 clientWidth/一个值 来确定fontsize 的大小 fontsize的大小 就是1rem的值
屏幕越大,fontsize越大,1rem 的值也越大,这样就做到了 一个等比例的适配。
2、路由懒加载(按需/异步加载)
开发时,项目最后打包会变得非常大,影响页面加载,特别是首页加载速度。
这个时候把不同路由对应的组件分割成不同的代码 然后当路由被访问的时候才加载对应组件,这样就更加高效了。
方式一:const Foo = () => import(’./Foo.vue’);
方式二:const home = r => require.ensure([], () => r(require(’…/page/home/home’)), ‘home’);
3、移动端页面300毫秒延迟处理
FastClick 是 FT Labs 专门为解决移动端浏览器 300 毫秒点击延迟问题所开发的一个轻量级的库。FastClick的实现原理是在检测到touchend事件的时候,会通过DOM自定义事件立即出发模拟一个click事件,并把浏览器在300ms之后的click事件阻止掉。
vue项目中 安装 FastClick插件 取消300毫秒延迟事件
if (‘addEventListener’ in document) {
document.addEventListener(‘DOMContentLoaded’, function() {
FastClick.attach(document.body);
}, false);
}
4、生产模式,开发模式有什么不同?
生产模式,开发模式的ip地址,服务器路径,图片路径,路由模式会有不同
5、如何判断 是生产模式还是开发模式?
通过判断:process.env.NODE_ENV的值
如果==development 属于开发模式
如果==production 属于生产模式
然后根据不同的模式,导出routerMode,baseUrl,imgBaseUrl 这些路径
6、vue 路由模式
路由模式分为两种history 和hash
hash —— 即地址栏 URL 中的 # 符号
特点:hash虽然出现在 URL 中,但不会被包括在HTTP 请求中,对后端完全没影响,
因此改变hash不会重新加载页面。
history —— 利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法。
它们提供了对历史记录进行修改的功能。当它们执行修改时,虽然改变了当前的 URL,
但浏览器不会立即向后端发送请求。
7、vue 路由传参数 params 和query的区别
params 传参数语法:this.router.push(name:′cs′,params:geohash:geohash)必须使用name传递接收参数语法:this.router.push({name:'cs', params:{geohash:geohash}}) 必须使用name 传递 接收参数语法:this.router.push(name:′cs′,params:geohash:geohash)必须使用name传递接收参数语法:this.route.params.路由参数名
query 传参数语法:this.$router.push({path:'/cs', query:{geohash:geohash}})
接受参数语法:this.$route.query.路由参数名
1、params是路由的一部分,必须要在路由后面添加参数名。 query是拼接在url后面的参数,不用设置参数名。
2、params一旦设置在路由,params就是路由的一部分,如果这个路由有params传参,但是在跳转的时候没有传这个参数,会导致跳转失败或者页面会没有内容。
3、:to='/city/+item.id 这种拼接的方式 属于params传参数
$route 与$router 的区别
$route 是只读,获取路由对象信息的时候使用
$router 是操作路由跳转的时候使用
8、什么是git?有哪些常用指令?
git是状态管理系统分为两种 本地仓库和远程仓库
当使用本地仓库时使用git init 创建个仓库,把想管理的项目和文件通过git add 文件名储存到我们的暂存区
通过git commit 添加到本地仓库中,每添加一次就产生一个新的版本,多个版本是时候有利于我们管理,
通过git reset --hard 版本id可以跳到这个版本;
9、如何将本地git 提交到远程仓库?写出具体操作指令
1、通过git init创建git仓库
2、通过git remote add origin 地址 添加上传地址
3、把要上传的项目 git add 文件名保存在暂存区
4、通过 git commit 提交到本地仓库
5、使用git pull origin master 同步到远程仓库
6、通过git push -u origin master 提交
10、git如何解决本地冲突,和远程提交冲突。
本地仓库有的时候合并的时候会冲突;远程仓库在git pull origin master时候会产生冲突。
这个时候我选择使用编辑器中的终端中使用git指令操作;
会有几个选项;这个时候如果冲突了我可以手动去选择是都保留还是保留其中一个
11、路由跳转 有几种方式
router-view 实现路由内容的地方,引入组件时写到需要引入的地方
需要注意的是,使用vue-router控制路由则必须router-view作为容器。
router-link是路由跳转最基本的方式,浏览器在解析是把它解析成为a标签,需要在router文件中index.js中引入规则
1.router-link:<router-link to='需要跳转到的页面的路径>
2.this.router.push(path:’/user’)常用于路由传参,实现携带参数的跳转常用语路有传参,query的引入方式,params只能用name来引入路由,而query要用path引入query的传递方式类似于我们ajax中get传参,在浏览器地址栏中显示参数,params则类似于post,在浏览器地址栏中不显示参数3.this.router.push({ path:’/user’})常用于路由传参,实现携带参数的跳转
常用语路有传参,
query的引入方式,params只能用name来引入路由,而query 要用path引入
query的传递方式 类似于我们ajax中get传参,在浏览器地址栏中显示参数,params则类似于post,在浏览器地址栏中不显示参数
3.this.router.push(path:’/user’)常用于路由传参,实现携带参数的跳转常用语路有传参,query的引入方式,params只能用name来引入路由,而query要用path引入query的传递方式类似于我们ajax中get传参,在浏览器地址栏中显示参数,params则类似于post,在浏览器地址栏中不显示参数3.this.router.replace{path:‘/’ }
4.this.$router.go(-1)
12、组件通信 -父传子,子传父,兄弟 如何实现, (写出关键代码)
父传子:
1、在父组件中给子组件的标签绑定一个属性,属性上挂载需要传输的变量
2、在子组件中通过props:[‘自定义属性’]来接收这个数据
3、数据可以直接使用了 接的什么就使用什么
子传父:(在子组件中调用父组件的方法)
在子组件中调用父组件的方法
1、在父组件上的子组件标签绑定一个自定义事件 给这个事件挂载需要调用的方法
2、在子组件的方法中通过this.$emit("自定义事件名")来调用这个方法,如果父组件的方法中有参数 那么$emit第二个参数的位置就是我们要传递的参数
子传父的本质就是调用父组件的方法 然后把值当成实参给父组件传递
兄弟组件传值
方式1:
先子传父,然后再父传子
方式2:(中央通信bus)数据从组件A传输到组件B
1、创建一个空的vue实例来担任总线的位置
2、把总线引入到组件A中
然后再组件方法中通过派发事件 来发送数据
Bus.$emit("事件名","消息")
3、把总线引入到组件B中
在钩子函数created中来监听来自A的事件
bus.$on("事件名",(参数)=>{
then挂载的从A过来的数据
})
13、props 如何做类型验证
props 是父组件用来传递数据的一个自定义属性。父组件的数据需要通过 props 把数据传给子组件,子组件需要显式地用 props
类似于用 v-bind 绑定 HTML 特性到一个表达式,也可以用 v-bind 动态绑定 props 的值到父组件的数据中。每当父组件的数据变化时,该变化也会传导给子组件:
props 是单向绑定的:当父组件的属性变化时,将传导给子组件,但是不会反过来。
props 是一个对象而不是字符串数组时,它包含验证要求:
验证的type类型可以是:
String
Number
Boolean
Object
Array
Function
type也可以是一个自定义构造器,使用instanceof检测。
props:{
a:nummber,
b:[string,number]
}
14、什么是solt 如何使用,具名插槽如何使用?
插槽内可以是任意内容。
如果现在事先模板中不知道需要什么内容,需要在使用时传递
就可以使用插槽with来实现,这种效果! 类似ThinkPHP中的模板继承
的block 标签的功能
匿名插槽 顾名思义就是没有名字的插槽, 匿名插槽只能有一个,多的话就会乱
实名插槽可以有多个,在使用时必须使用name属性来标识
插槽可以设置默认值,定义了不使用就会使用默认值,
如果没有名字的标签的标签默认会放到default(即匿名插槽)
15、vuex中有哪些属性,各自的作用是什
状态管理模式,多个组件之间的数据共享
state
数据的声明,使用数据时 this.$store.state.变量名
mutations
处理state中数据的操作方法,在某个组件中 使用 this.$store.commit(‘方法名’,参数)
getters
相当于state的计算属性,把state中的变量,二次处理,返回一个新的值。
actons
处理state中数据的操作方法,里面可以写异步操作 使用 this.$store.dispatch(‘方法名’,参数)
在action中 异步处理结束之后,在通过context.commit(‘mutations中的方法名’)
modules
模块化,把项目中的多个业务逻辑,封装成多个文件 在通过 modules 引入
在每个引入的模块文件中添加 命名空间 namespaced: true
使用某个模块的方法 时, this.$store.getters[‘shopcar/getN’]
使用mapGetters/mapActions/… …mapGetters({
‘getN’:‘shopcar/getN’
})
plugins
是插件 比如说 vuex结合本地存储 vuex-persist
16、什么是辅助函数?如何使用(关键代码)
在使用vuex过程中,业务功能逐渐增加,会出现很多个状态。当一个组件需要多个状态的时候,将这些状态都声明为计算属性会有些重复和冗余。
vuex提供了一些非常方便的辅助函数,比如mapState、mapGetter、mapMutation、mapAction。
mapState 把vuex store中的数据直接映射到vue实例中 …mapState([‘变量名’])
mapGetters 把vuex中的 getters中的方法直接映射到vue实例中 this.方法名
mapActions 把vuex中的 mapActions中的方法直接映射到vue实例中
mapMutations 把vuex中的 mapMutations中的方法直接映射到vue实例中
17、 post 请求 content-type类型有哪些,作用是什么?
1、application/json json格式数据
2、multipart/form-data 上传文件/图片
如何上传图片?
1、修改post请求头headers 的 content-type 类型 为multipart/form-data
2、使用 formData.append('file',文件)
18 vue获取dom的方式
1.在标签上加ref=‘dom’,通过this.$refs.dom拿到页面元素
2.通过document.getElementById()方法来获取
19、$nextTick
是在vue组件dom元素渲染完成的时候调用
答:是在下次DOM更新循环结束之后实现延迟回调,在修改数据之后,使用nexttick,则可以在回调中获取更新后的DOMthis.nexttick,则可以在回调中获取更新后的DOM this.nexttick,则可以在回调中获取更新后的DOMthis.nextTick
(vue响应的改变一个值后,此时的dom并不会立即更新,如果数据需要在数据改变以后,立即通过dom做一些操作,可以使用$nexttick获取更新后的dom)
20、keep-alive的作用,何时使用?
keep-alive是Vue.js的一个内置组件。它能够不活动的组件实例保存在内存中,而不是直接将其销毁,它是一个抽象组件,不会被渲染到真实DOM中,也不会出现在父组件链中。
它提供了include与exclude两个属性,允许组件有条件地进行缓存。
keep-alive组件提供了include(包括)与exclude(不包括)两个属性来允许组件有条件地进行缓存,二者都可以用逗号分隔字符串、正则表达式或一个数组来表示。
keep-alive提供了两个生命钩子,分别是activated与deactivated。
因为keep-alive会将组件保存在内存中,并不会销毁以及重新创建,所以不会重新调用组件的created等方法,需要用activated与deactivated这两个生命钩子来得知当前组件是否处于活动状态。
作用就是缓存组件,使用某个组件时,通过keep-alive 组件包裹即可
如果是路由组件,我通常会给路由设置一个meta属性 如果这个属性是true 我就让 router-view 被keep-alive包裹
21、生命周期有哪些,各自的使
beforecreate : el(dom结构) 和 data(数据) 并未初始化
举个栗子:不做逻辑处理
created :完成了 data 数据的初始化,el没有
beforeMount:挂在之前
mounted :完成了 el 和 data 初始化 ,并且挂在完成
在这发起后端 ajax请求,拿回数据
beforUpdate:数据更新前
updated:数据更新完成
栗子:获得v-for渲染的每个li的高度,这个li是后添加到页面的,所以需要在updated中获得。
beforeDestroy:组件销毁前,比如组件使用v-if被隐藏,会调用。
栗子: 当移除组件时。你确认删除XX吗?
destroyed :当前组件已被删除,清空相关内容,比如说,定时器,和滚动事件。
activated : 使用了keepalive 缓存的组件被激活。
deactivated : 使用了keepalive 缓存的组件被 移除。