vue面试知识点

1. Vue优势

Vue专注于MVVM模式的viewmodel层，通过双向绑定把view和model层连接起来，操作数据重新渲染页面，vue有优势是简单快捷组合紧凑

2. Vue2.0/vue1.0

每个组件模板中不在支持片段代码

组件的定义发生了改变和升级

生命周期发生了变化

3. 浏览器兼容（高低兼容）

1、不同浏览器的标签默认的外补丁( margin )和内补丁(padding)不同

解决方案： css 里增加通配符 * { margin: 0; padding: 0; }

2、IE6双边距问题；在 IE6中设置了float , 同时又设置margin , 就会出现边距问题

解决方案：设置display:inline;

3、当标签的高度设置小于10px，在IE6、IE7中会超出自己设置的高度

解决方案：超出高度的标签设置overflow:hidden,或者设置line-height的值小于你的设置高度

4、图片默认有间距

解决方案：使用float 为img 布局

5、IE9一下浏览器不能使用opacity

解决方案：

opacity: 0.5;filter: alpha(opacity = 50);filter: progid:DXImageTransform.Microsoft.Alpha(style = 0, opacity = 50);

6、边距重叠问题；当相邻两个元素都设置了margin 边距时，margin 将取最大值，舍弃最小值；

解决方案：为了不让边重叠，可以给子元素增加一个父级元素，并设置父级元素为overflow:hidden；

7、cursor:hand 显示手型在safari 上不支持

解决方案：统一使用 cursor:pointer

8、两个块级元素，父元素设置了overflow:auto；子元素设置了position:relative ;且高度大于父元素，在IE6、IE7会被隐藏而不是溢出；

解决方案：父级元素设置position:relative

判断浏览器

navigator = window.navigator,

agent = navigator.userAgent.toLowerCase(),

4. 路由权限控制

5. Vue打包配置项

1、build/dev-server.js 文件 项目node的启动文件，这里面做了webpack配置和node操作，

2、build/webpack.base.conf.js webpack基本配置文件

3、build/webpack.dev.conf.js 开发环境webpack配置

4、build/webpack.prod.conf.js 正式环境的webpack配置

5、build/build.js 执行打包的配置文件

6、config/index.js 开发、线上环境的文件输出、打包等一些配置

这是脚手架里面的一些主要配置文件，通过配置，整个项目分为开发环境和生产环境，不需要你多做很多繁琐的工作，用起来很方便，如果你想按照自己的喜好或者需求，可以修改主题文件的配置，下面我们就附上上述每个文件的代码和注释。　　　　ps：代码我修改过，不是完全一样的，大家主要看看文件功能，和一些代码、组件的含义。

6. 跨域

XMLHttpRequest Level2

XHR2是HTML5新特性中的一个(事实上没有什么XHR1，XHR2这样的概念，XHR2只是HTML5提供的一套新的规范)，在原有XHR对象上新增了一些功能：跨域访问，全新的事件，还有请求进度以及响应进度。

Response.AddHeader(“Access-Control-Allow-Origin”,"*") ;//跨域访问

1、 Jsonp解决

this.$http.jsonp(‘http://www.demo2.com:8080/login’, {

​ params: {},

​ jsonp: ‘onBack’

}).then((res) => {

​ console.log(res);

})

2、 document.domain + iframe跨域

3、 location.hash + iframe

4、 window.name + iframe跨域

5、 postMessage跨域

6、 跨域资源共享（CORS）

7、 nginx代理跨域

8、 nodejs中间件代理跨域

9、 WebSocket协议跨域

7. History/hash

hash —— 即地址栏 URL 中的 # 符号（此 hash 不是密码学里的散列运算）。

比如这个 URL：http://www.abc.com/#/hello，hash 的值为 #/hello。它的特点在于：hash 虽然出现在 URL 中，但不会被包括在 HTTP 请求中，对后端完全没有影响，因此改变 hash 不会重新加载页面。

history —— 利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法。（需要特定浏览器支持）

hash 模式和 history 模式都属于浏览器自身的特性，Vue-Router 只是利用了这两个特性（通过调用浏览器提供的接口）来实现前端路由。公共组件封装

hash 模式下，仅 hash 符号之前的内容会被包含在请求中，如 http://www.abc.com，因此对于后端来说，即使没有做到对路由的全覆盖，也不会返回 404 错误。

history 模式下，前端的 URL 必须和实际向后端发起请求的 URL 一致，如 http://www.abc.com/book/id。如果后端缺少对 /book/id 的路由处理，将返回 404 错误。Vue-Router 官网里如此描述：“不过这种模式要玩好，还需要后台配置支持……所以呢，你要在服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面，这个页面就是你 app 依赖的页面。”

8. Vuex数据处理

vuex就是一个存放多个组件共用的一个数据的存放、更改、处理的一个容器，就是说来存放处理公共数据的工具，存放的数据一变，各个组件都会更新，也就是说存放的数据是响应式的。

9. Css处理器优先级

通用选择器（*） < 元素(类型)选择器 < 类选择器 < 属性选择器 < 伪类 < ID 选择器 < 内联样式

10. Div上下左右

11. Js原型链 变量提升

原型链

所有的实例对象都有__proto__属性, 它指向的就是原型对象

这样通过__proto__属性就形成了一个链的结构---->原型链

当查找对象内部的属性/方法时, js引擎自动沿着这个原型链查找

当给对象属性赋值时不会使用原型链, 而只是在当前对象中进行操作

变量提升: 在变量定义语句之前, 就可以访问到这个变量(undefined)

12. 弹性

只需要设置display:flex只需要设置display:flex

13. 满足什么条件才算跨域（IP相同，port不同）

跨域，指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器施加的安全限制。

所谓同源是指，域名，协议，端口均相同，只要有一个不同，就是跨域。不明白没关系，举个栗子：

http://www.123.com/index.html 调用 http://www.123.com/server.php （非跨域）

http://www.123.com/index.html 调用 http://www.456.com/server.php （主域名不同:123/456，跨域）

http://abc.123.com/index.html 调用 http://def.123.com/server.php （子域名不同:abc/def，跨域）

http://www.123.com:8080/index.html 调用 http://www.123.com:8081/server.php （端口不同:8080/8081，跨域）

http://www.123.com/index.html 调用 https://www.123.com/server.php （协议不同:http/https，跨域）

请注意：localhost和127.0.0.1虽然都指向本机，但也属于跨域。

14. Vue组件

Vue.component(“mycomponent”,{}

15. 闭包

闭包

• 理解:

• 当嵌套的内部函数引用了外部函数的变量时就产生了闭包

• 通过chrome工具得知: 闭包本质是内部函数中的一个对象, 这个对象中包含引用的变量属性

• 作用:

• 延长局部变量的生命周期

• 让函数外部能操作内部的局部变量

• 写一个闭包程序

function fn1() {

 var a = 2;

 function fn2() {

  a++;

  console.log(a);

 }

 return fn2;

}

var f = fn1();

f();

f();

• 闭包应用:

• 模块化: 封装一些数据以及操作数据的函数, 向外暴露一些行为

• 循环遍历加监听

• JS框架(jQuery)大量使用了闭包

• 缺点:

• 变量占用内存的时间可能会过长

• 可能导致内存泄露

• 解决:

• 及时释放 : f = null; //让内部函数对象成为垃圾对象

16. Typeof instanceof

1、typeof返回结果是该类型的字符串形式表示【6】（number、string、undefined、boolean、function、object）

注意

typeof对于原始类型来说，除了null都可以显示正确类型

typeof对于对象来说，除了函数都会显示object

2、instanceof是用来判断 A 是否为 B 的实例，表达式为：A instanceof B，如果 A 是 B 的实例，则返回 true,否则返回 false。 在这里需要特别注意的是：instanceof 检测的是原型。

instanceof 只能用来判断两个对象是否属于实例关系， 而不能判断一个对象实例具体属于哪种类型。

17. Js 继承实现

18. Px/em的区别

19. 页面性能

资源压缩合并，减少HTTP请求（图片合并、JS脚本文件合并、CSS文件合并）

非核心代码异步加载——异步加载的方式——异步加载的区别

利用浏览器缓存——缓存的分类——缓存的原理

使用CDN（网络优先）——本质上是一个缓存，将数据缓存在离用户最近的地方，一般缓存的是静态资源

将CSS放在页面最上面，将JS放在页面最下面（页面从上到下加载）

把JS和CSS提取出来放在外部文件中（优点：减少了http体积，提高了js和css的复用性，提供可维护性；缺点：增加了http 请求，可通过缓存解决）

预解析DNS，减少DNS查询（DNS将请求的域名转换为对应的IP地址，然后将IP返回给浏览器，此过程会花费一定时间，影响页面加载）——方法：缓存DNS查找！

20. MVVM理解

21. Vue生命周期

22. Vue组件数据传递

23. Vue路由实现

利用 Vue.js 提供的插件机制 .use(plugin) 来安装 VueRouter

vue-router是Vue.js框架的路由插件，它是通过mode这一参数控制路由的实现模式的：

const router=new VueRouter({

mode:‘history’,

routes:[…]

})

import Vue from ‘vue’

import Router from ‘vue-router’

import Home from ‘@/pages/home/Home’

import City from ‘@/pages/city/City’

Vue.use(Router)

export default new Router({

routes: [

{

path: ‘/’,

name: ‘Home’,

component: Home

},

{

path: ‘/city’,

name: ‘City’,

component: City

}

]

})

24. Vue路由钩子函数

主要包括beforeEach和aftrEach,

beforeEach函数有三个参数：

to:router即将进入的路由对象

from:当前导航即将离开的路由

next:Function,进行管道中的一个钩子，如果执行完了，则导航的状态就是 confirmed （确认的）；否则为false，终止导航。

afterEach函数不用传next()函数

这类钩子主要作用于全局,一般用来判断权限,以及以及页面丢失时候需要执行的操作,例如:

//使用钩子函数对路由进行权限跳转

router.beforeEach((to, from, next) => {

const role = localStorage.getItem(‘ms_username’);

if(!role && to.path !== ‘/login’){

​ next(’/login’);

}else if(to.meta.permission){

​ // 如果是管理员权限则可进入，这里只是简单的模拟管理员权限而已

​ role === ‘admin’ ? next() : next(’/403’);

}else{

​ // 简单的判断IE10及以下不进入富文本编辑器，该组件不兼容

​ if(navigator.userAgent.indexOf(‘MSIE’) > -1 && to.path === ‘/editor’){

​ Vue.prototype.$alert('vue-quill-editor组件不兼容IE10及以下浏览器，请使用更高版本的浏

​ 览器查看’, ‘浏览器不兼容通知’, {

​ confirmButtonText: ‘确定’

​ });

​ }else{

​ next();

​ }

}

25. Vuex是什么 怎么用

26. Vue打包配置项

vue中打包生成可配置文件以便修改接口地址

27. H5新特性

Web前端最新的官方标准无疑就是es6和H5了，es6之前已经说过了（多是一些语法糖），现在来总结一下H5给我们来了哪些新“朋友”吧~

1.video/radio 视频/音频

2.canvas 绘画

3.geolocation 定位

4.WebSocket 前后端双向通讯

5.localStorage/sessionStorage代替cookie本地存储

6.文件拖拽（drag事件+dataTransfer+FileReader）

7.WebWorker js多线程,提高性能

8.WebSQL 前端数据库(已被官方弃用)

9.manifest 离线缓存

同时也新增了一些标签，常用的有：header、nav、section、aside、footer

28. 单独路由

建立一个 router.js 文件

引入

import Vue from 'vue'

import VueRouter from 'vue-router'

import Home from '../components/home/home.vue'

然后注册

Vue.use(VueRouter);

const router = new VueRouter({

​	mode : 'history',

​	base: __dirname,

 	routes: [

​	 	{

​	   	path:  historyUrl + '/',

​	   	component: Home,

​	   	name : '主页'

​	 	},

]}

最后暴露出云

export default router

在main.js 里面直接引入然后就可以用了

import router from './main/router.js'

const app = new Vue({

​	router : router,

​	watch : {

 		'$route' (to,from,next){

 			//console.log(to) //路由监听

 			//console.log(from)

 		}

 	},

​	render : h => h(App)

}).$mount('#app');

 

别的 js 文件如果要调用 router 方法，直接像 main.js 一样引入直接用就可以了

29. 常用指令Vue-router动态路由 怎么获取参数 拦截做什么 token登录

#30.Vue-router动态路由 怎么获取参数 拦截做什么 token登录

this.$route.query.id，this.$route.params.idVue-router动态路由 怎么获取参数 拦截做什么 token登录

31. Vue操作dom吗

32. 哪些适合vue（数据多、手机web、APP共用一套、利于跨平台）

33. Vue+iview

1、js数据类型有几种，如何判断数据的类型

基本类型：String、Number、Boolean、Symbol、Undefined、Null

引用类型：Object

Typeof、instanceof

2、如何判断某个变量是数组

arr instanceof Array

3、H5的本地存储特性是什么，最大存储量是多少

（1）两个接口：分别是localStorage和sessonStorage

（2）四个函数：分别是setItem、getItem、removeItem和clear

最大存储：

不同浏览器对 HTML5 的本地存储大小如下：

IE 9 > 4999995 + 5 = 5000000

firefox 22.0 > 5242875 + 5 = 5242880

chrome 28.0 > 2621435 + 5 = 2621440

safari 5.1 > 2621435 + 5 = 2621440

opera 12.15 > 5M

不同手机对 HTML5 的本地存储大小基本均有限制，一个测试的结果如下：

iPhone > 2M + 512 = 2.5M

android 2M

4、用过Promise吗，Promise的作用

Promise对象用于异步操作，它表示一个尚未完成且预计在未来完成的异步操作。

5、vue子父组件之间相互传值

props

6、vue生命周期

• beforeCreate：实例刚在内存中被创建出来，此时，还没有初始化好 data 和 methods 属性

​ + created：实例已经在内存中创建OK，此时 data 和 methods 已经创建OK，此时还没有开始 编译模板

​ + beforeMount：此时已经完成了模板的编译，但是还没有挂载到页面中

​ + mounted：此时，已经将编译好的模板，挂载到了页面指定的容器中显示

• 运行期间的生命周期函数：

  • beforeUpdate：状态更新之前执行此函数， 此时 data 中的状态值是最新的，但是界面上显示的 数据还是旧的，因为此时还没有开始重新渲染DOM节点

  • updated：实例更新完毕之后调用此函数，此时 data 中的状态值 和 界面上显示的数据，都已经完成了更新，界面已经被重新渲染好了！

• 销毁期间的生命周期函数：

  • beforeDestroy：实例销毁之前调用。在这一步，实例仍然完全可用。

  • destroyed：Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。
    

7、如何判断是ios系统还是安卓系统，手机型号从什么对象中取

methods:{

downApp() {

​ let ua = navigator.userAgent.toLowerCase();

​ //Android终端

​ let isAndroid = ua.indexOf(‘Android’) > -1 || ua.indexOf(‘Adr’) > -1;

·　　 //Ios终端

​ let isiOS = !!ua.match(/(i[^;]+;( U;)? CPU.+Mac OS X/);

​ if (isWeixinBrowser()) {

​ this.$router.push({

​ path: ‘/product’

​ })

​ } else {

​ if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {

​ //Ios

​ } else if (/(Android)/i.test(navigator.userAgent)) {

​ //Android终端

​ window.location = ‘http://www.xyfan.top/app.apk’

​ }

​ }

​ function isWeixinBrowser() {

​ return (/micromessenger/.test(ua)) ? true : false;

​ }

}

}

8、路由拦截，一般会在路由拦截中做什么

在一个vue项目中很多页面是需要登录后才有权限访问的，所以需要在前端做路由拦截判断用户是否可以访问该页面。

const routes = [

{

path: ‘/’,

name: ‘Index’,

meta: {

requireAuth: true,

},

components: Index

},

{

path: ‘/login’,

component: Login

}

];

9、vue中有几种定时器，啥区别

在项目中，我们经常会使用到定时器setInterval()，可是很多时候我们会发现，即使我退出当前页面，定时器依然在工作，非常消耗内存，所以我们要进行手动清理：

将定时器保存在变量中，退出页面时清除变量

1.定义空的变量

data: function (){

return {

timer: null

}

}

2.定义定时器

methods: {

setTimer: function () {

this.timer = setInterval( () => {

…

}, 1000)

}

}

3.进入和退出时清除定时器

mounted() {

clearInterval(this.timer)

},

distroyed: function () {

clearInterval(this.timer)

}

截判断用户是否可以访问该页面。

const routes = [

{

path: ‘/’,

name: ‘Index’,

meta: {

requireAuth: true,

},

components: Index

},

{

path: ‘/login’,

component: Login

}

];

9、vue中有几种定时器，啥区别

在项目中，我们经常会使用到定时器setInterval()，可是很多时候我们会发现，即使我退出当前页面，定时器依然在工作，非常消耗内存，所以我们要进行手动清理：

将定时器保存在变量中，退出页面时清除变量

1.定义空的变量

data: function (){

return {

timer: null

}

}

2.定义定时器

methods: {

setTimer: function () {

this.timer = setInterval( () => {

…

}, 1000)

}

}

3.进入和退出时清除定时器

mounted() {

clearInterval(this.timer)

},

distroyed: function () {

clearInterval(this.timer)

}