vue面试题

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{:}^{\prime }c{s}^{\prime },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.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
（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 缓存的组件被 移除。