前端vue常见面试题

1.v-show和v-if区别

Q：vue中的v-show和v-if是做什么用的，两者区别是什么 ？

A: v-if 是“真正的”条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。 相比之下， v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。
一般来说， v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件不太可能改变，则使用 v-if 较好。

2. v-model是什么？怎么使用？ vue中标签怎么绑定事件？

一、v-model的使用
可以实现表单元素双向绑定。 在input或者select或者文本域配合value使用

二、vue中的标签如何绑定事件
    v-on:click 简写 @click
    绑定事件：<input @click=doLog() />
    在移动端click有300ms延迟的问题，解决这个问题可以引入fastClick

1. 下载

npm install fastclick

2. 引入

import FastClick from 'fastclick'
FastClick.attach(document.body);

3.Vue 组件 data 为什么必须是函数?

Q:Vue 组件 data 为什么必须是函数

A：不用脚手架 vue.js

new Vue({
	el:"#app",
	template:xxx
	data : {
		...
	}
})

脚手架 组件 data 为什么必须是函数?

因为 JS 本身的特性带来的，如果 data 是一个对象，那么由于对象本身属于引用类型，当我们修改其中的一个属性时，会影响到所有 Vue
实例的数据。如果将 data 作为一个函数返回一个对象，那么每一个实例的 data 属性都是独立的，不会相互影响了。

如果上面不好理解，可以用对象的方式理解

var Person = function (){}
Person.prototype.data = {
	msg:'123'  //相当于组件中的data
}
var obj1 = new Person(); //相当于使用每一个组件
var obj2 = new Person(); //相当于使用每一个组件

obj1.data.msg = 456;

console.log(obj2.data.msg);

4.Vue中key的作用

Q: vue 中 key 的作用

总结：key的作用主要是为了高效的更新虚拟dom

没有加key，diff默认算法的问题（虚拟dom）

1. 如果节点类型不同，直接干掉前面所有的节点，再创建并插入新的节点，不会再比较这个节点以后的子节点
2. 如果节点类型相同，则会重新设置节点的属性，从而实现节点的更新

5.Vue的双向数据绑定原理是什么？

Q: Vue的双向数据绑定原理是什么？
总结：vue数据双向绑定是通过数据劫持结合发布者-订阅者模式的方式来实现的。

1. 为什么会多出这两个方法呢？

   因为vue是通过Object.defineProperty()来实现数据劫持的。

2. Object.defineProperty( )是用来做什么的？

   它可以来控制一个对象属性的一些特有操作，比如读写权、是否可以枚举，这里我们主要先来研究下它对应的两个描述属性get和set。

Object.defineProperty(对象,属性,{
	get(){},
	set(){}
})

6.watch和computed差异

Q: watch和computed差异

• computed ： 计算属性

1. 计算属性是由data中的已知值，得到一个新的值
2. 性能不好
3. 别人变化影响我自己

• watch : 监听数据的变化

1. 监听data中的数据
2. 我的变化影响别人

7.vue项目是打包了一个js文件，一个css文件，还是有多个文件

Q: 你们vue项目是打包了一个js文件，一个css文件，还是有多个文件？

根据vue-cli脚手架规范，一个js文件，一个CSS文件。

在打包之前，

1. 代理的url
2. build
   assetsPublicPath: ‘./’

8.vue之前如何实现传值通信？

1. 父子组件通信

主要使用自定义属性进行传值
父组件：<组件 :msg='msg'></组件>
子组件：使用props:[‘msg’]属性接受父组件传递的数据

2. 子父组件通信

主要使用自定义事件进行数据传递
在子组件中<子组件名 @自定义事件名="函数名"></子组件名>
父组件中this.$emit('父组件传递自定义事件名',要传递给父组件的数据)

3. 非父子组件通信

首先要准备一个公共的容器，将vue的实例挂载到vue的原型中，作为公共的容器
Vue.prototype.bus = new Vue();
new Vue({})
数据发送端：this.bus.$emit('事件名','要发送的数据')
数据接受端： this.bus.$on('事件名',(形参)=>{... })

9.vue-cli项目中src目录每个文件夹和文件的用法？

文件夹名	用法
src	目录
assets	静态文件（图片，js，css）
components	非路由组件
views	路由组件
router	路由配置
store	vuex仓库
App.js	挂载的第一个组件
main.js	全局的文件

10.axios是什么？怎么使用？vue跨域请求接口代理方式？

1. axios是什么？怎么使用？

1>axios 是一个基于 promise 的 HTTP 库，简单的讲就是可以发送get、post请求。
2>使用,下载npm install axios --save
引入(main.js)并挂载到原型链上
使用axios.get(),axios.post()

2. 设置代理，请求接口（跨域）

在config/index.js中配置,
注意:配置完要重启一下项目

proxyTable: {
	'/api':{
        target:"http://localhost:8080/",
        changeOrigin:true,
        pathRewrite:{
            '^/api':'static/mock'
        }
    }
}

11.请详细说下你对vue生命周期的理解

钩子函数	作用
页面渲染期
beforeCreate	vue实例的挂载元素$el和数据对象data都为undefined，还未初始化
created	vue实例的数据对象data有了，但是$el还是没有
beforeMount	vue实例的$el和data都初始化了,但还是挂载之前为虚拟dom节点，data.msg还未替换
mounted	vue实例挂载完成,data.msg成功渲染的
数据更新期
beforeUpdate	数据更新前触发
updated	数据更新后触发
销毁期
beforeDistory	vue实例销毁之前触发
distoryed	销毁后触发
若使用keep-alive
activated
deactivated

12.单页面(SPA)应用的优缺点

优点:

1. 用户体验好，快，内容的改变不需要重新加载整个页面，基于这一点spa对服务器压力较小
2. 前后端分离
3. 页面效果会比较炫酷（比如切换页面内容时的转场动画）

缺点:

1. 不利于seo
2. 导航不可用，如果一定要导航需要自行实现前进、后退。（由于是单页面不能用浏览器的前进后退功能，所以需要自己建立堆栈管理）
3. 初次加载时耗时多
4. 页面复杂度提高很多

13.路由的跳转方式

1. router-link
2. this.$router.xxx
   push() ： history添加一个记录
   replace() ： history不会记录上,采用的是替换掉当前的路由
   go() ==>正整数 或者 负数

14.$route 和 $router 的区别

$router为vueRouter的实例，相当于一个全局路由对象，里面含有很多属性和子对象,例如push(),go()等等
$route相当于当前正在跳转的路由对象,里面有关于当前路由的详细内容，例如params，query等等

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

在定义路由规则的时候使用：表示路由要传递的参数，例如{path：'/index /: id'}，：id表示动态路由要传递的参数。
获取动态参数：使用$router中的params 方法接收，例如：$router.params.id即可获取传递过来的参数

16.vue-router有哪几种导航钩子?

Vue路由有三种类型的守卫：
一，路由独享守卫
有一个钩子函数beforeEnter，设置在要守卫的路由规则内，可以在访问在路由的时候进行一定的处理
二，组件守卫 , 有三个钩子函数 都设置在组件内部，与data平级
beforeRouteEnter 在访问该组件的时候触发此函数
beforeRouteUpdata 在复用组件，浏览器地址发生变化的时候触发此函数,注意:不能使用this,因为在触发此函数的时候vue实例还没有创建出来
beforeRouteLeave 在路由离开当前组件的时候触发此函数
三，全局守卫 设置在VueRouter实例化之后，VueRouter导出之前
beforeEach 所有的路由规则都会进入此函数
afterEach 所有路由跳转之后触发， 一般用来做记录

---

导航钩子中参数的作用

• to : 即将要进入的目标路由对象
• from ：当前导航正要离开的路由
• next() : 如果一切正常，则调用这个方法进入下一个钩子
• next(false) ： 去掉导航
• next(’/login’) ： 跳转到对应的路由
• next(error) ：执行一个error实例

17.为什么通过vuex的motution修改state中的参数就不会报错，而直接更改state中的参数就会报错？

1.使用vuex修改state时，有两种方式：
（1）可以直接使用this.$store.变量=xxx；
（2）this. $store.dispatch、this. $store.commit;
2.异同点：
（1）共同点：能够修改state里的变量，并且时响应式的（能触发视图更新）
（2）不同点：若将vue创建store的时候传入strict true，开启严格模式，那么任何修改state的操作，只要不经过mutation的函数，vue就会throw error：[vuex] Do not mutate vuex store outside mutation handlers.

18.使用 Vuex 只需执行 Vue.use(Vuex)，并在 Vue 的配置中传入一个 store 对象的实例，store 是如何实现注入的？

Vue.use(Vuex) 方法执行的是 install 方法，它实现了 Vue 实例对象的初始化方法封装和注入，使传入的 store 对象被设置到 Vue 上下文环境的store中。因此在VueComponent任意地方都能够通过this.store 访问到该 store。

19.vuex原理和属性使用

一、vuex原理
1. vuex其实是一个vue的插件，高度依赖vue.js
2. vue插件都需要一个install方法，
install方法调用了applyMixin，该方法主要是在所有组件中的beforeCreate中注入了this.$store对象。
3. vue 自身的响应式设计，依赖监听、依赖收集都属于 vue 对象 Property set get方法的代理劫持。

vuex属性的作用
一，state 相当于组件内部的data，vuex是一个单一状态树，所有的数据都存放在state内
二，getters 相当于组件内的计算属性computed，拥有计算属性的所有特性，同样会被vue实例缓存
三，mutations 用来修改state内部数据的唯一模块，内部一般都是同步操作
四，actives 不直接修改state的数据，而是操作mutations来修改state内部数据，用来处理异步操作
五，modules 因为vuex是一个单一状态树，当应用过多的时候会使vuex非常臃肿，所以出现modules来进行模块化处理，modules内部同样拥有state，getters，mutations，actives ，modules ，甚至可以进行模块嵌套

20.css样式局部化scss和stylus样式穿透

一、让css只在当前组件生效 <style scoped>
二、scss、stylus
scss ：
1.下载
npm install sass-loader node-sass --save
2.<style lang=‘scss’ scoped>
3. scss 样式穿透
父元素 /deep/ 子元素

---

stylus:
1. 下载 npm install stylus stylus-loader --save
2. <style lang=‘stylus’ scoped>
3. stulus 样式穿透
父元素 >>> 子元素

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

一、项目打包
npm run build —> index.html
开发的时候操作的都是 xxx.vue文件
loader ： 加载器
二、用途 : js可以写es6、style样式可以scss或less、template可以加jade等

22.NextTick 是做什么的?

说明：$nextTick 是在下次 DOM 更新循环结束之后执行延迟回调，在修改数据之后使用 $nextTick，则可以在回调中获取更新后的 DOM。

场景：需要在视图更新之后，基于新的视图进行操作
使用swiper
axios请求数据， 数据（图片）

23.对 keep-alive 的了解?

1.keep-alive是什么？
内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染dom。

2.说明
keep-alive 它不会在dom树中渲染

3.使用场景，几乎和渲染有关系

4.多2个生命周期
activated
deactivated