目录
1、样式穿透
1)stylus的样式穿透使用>>>
2)sass和less的 样式穿透
外层容器 /deep/组件{ }
外层容器 ：：v-deep 组件{ }
2、什么情况下发生跨域，如何解决
1) 通过PHP设置响应头允许跨域(CORS方式)
CORS（跨域资源共享,Cross-Origin Resource Sharing）定义一种跨域访问的机制，可以让AJAX实现跨域访问。
CORS 允许一个域上的网络应用向另一个域提交跨域 AJAX 请求。实现此功能非常简单，
只需由服务器发送一个响应头即可
2) 使用php做代理去请求第三方api接口
php是可以跨域的，我们利用ajax请求本域名中的php文件，php再去请求第三方接口文件，从而达到跨域目的。
3) jsonp方法 只能get
浏览器只对XHR(XMLHttpRequest)请求有同源请求限制，而对script标签src属性、link 标签ref属性和img标签src属性没有这这种限制 , 利用这个“漏洞”就可以很好的解决跨域请求。
JSONP实现跨域请求的原理简单的说，就是动态创建<script>标签，然后利用<script>的src 不受同源策略约束来跨域获取数据
3、vue如何兼容IE
兼容问题：
1) vue只兼容IE8以上版本
2)IE不兼容axios的promise对象
3)IE不兼容es6语法
解决方法：下载对应插件包解决js兼容问题: babel-polyfill，es6-promise以及 babel-plugin-transform-es2015-modules-commonjs
详细网址：
https://blog.csdn.net/qq_26887683/article/details/124794482?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522165776059416782391831501%2522%252C%2522scm%2522%253A%252220140713.130102334..%2522%257D&request_id=165776059416782391831501&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~sobaiduend~default-2-124794482-null-null.142^v32^pc_search_v2,185^v2^control&utm_term=vue%E5%A6%82%E4%BD%95%E5%85%BC%E5%AE%B9IE&spm=1018.2226.3001.41874、js数据类型
1）基本数据类型
基本数据类型是指存放在栈中的简单数据段，数据大小确定，内存空间大小可以分配，它们是直接按值存放的，所以可以直接按值访问
6种类型：Number数值类型、String 字符串类型、Boolean 布尔类型、Null 空对象、Undefined、Symbol
2）引用数据类型
引用数据类型也叫对象数据类型，包括function,object,array,date,RegExp等可以可以使用new创建的数据，又叫对象类型，他们是存放在堆(heap)内存中的数据
5、vue生命周期
vue生命周期是指vue是对象从创建到销毁的过程。
在vue生命周期的不同阶段通过对应的钩子函数来实现组件数据管理和DOM渲染两大重要功能。
创建阶段：
beforecreate：实例已经初始化，但不能获取DOM节点。(没有data，没有el)
created:实例已经创建，仍然不能获取DOM节点。(有data，没有el)
载入阶段：
beforemount：模板编译完成，但还没挂载到界面上。(有data，有el)
mounted：编译好的模板已挂载到页面中(数据和DOM都已经渲染出来)。
更新阶段：
beforeupdate：数据发生变化立即调用，此时data中数据是最新的，但页面上数据仍然是旧的(检测到数据更新时，但DOM更新前执行)。
updated：更新结束后执行，此时data中的值和页面上的值都是最新的。
销毁阶段：
beforedestroy：当要销毁vue实例时，在销毁之前执行。
destroy：在销毁vue实例时执行。
6、你对vue项目做过那些优化，怎样优化网页
Vue项目的优化一般分为代码层面、Webpack打包层面和基础Web技术层面共三个层面的优化。
1)代码层面的优化
v-if 和 v-show 区分使用场景
computed 和 watch 区分使用场景
v-for 遍历必须为 item 添加 key，且避免同时使用 v-if
长列表性能优化
事件的销毁
图片资源懒加载
路由懒加载
第三方插件的按需引入
优化无限列表性能
服务端渲染 SSR or 预渲染
2)Webpack 层面的优化
Webpack 对图片进行压缩
减少 ES6 转为 ES5 的冗余代码
提取公共代码
模板预编译
提取组件的 CSS
优化 SourceMap
构建结果输出分析
Vue 项目的编译优化
3)基础的 Web 技术的优化
开启 gzip 压缩
浏览器缓存
CDN 的使用
使用 Chrome Performance 查找性能瓶颈
7、说一下双向数据绑定原理
“双向数据绑定的原理:采用“数据劫持”结合“发布者-订阅者”模式的方式,通 过“Object.defineProperty()”方法来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发相应的监听回调。
8、v-if和v-show的区别？
共同点：都能控制元素在页面是否显示 。
不同点：
1） v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
2) v-if 也是惰性的：如果在初始渲染时条件为假 则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。
3) 相比之下，v-show 就简单得多——不管初始条件是什么 元素总是会被渲染，并且只是简单地基于 CSS 进行切换。
4) 一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。
9、数组如何去重
1)利用ES6 Set去重
2)利用for嵌套for，然后splice去重
3)利用indexOf()、sort()、includes()去重
4)利用Map数据结构去重
10、Computed与watch的区别?
computed是计算属性,具有缓存性。
当页面中有某些数据依赖其他数据进行变动的时候，可以使用计算属性computed。用于依赖发生变化时，触发属性重新计算。
Computed本质是一个具备缓存的watcher，依赖的属性发生变化就会更新视图。 适用于计算比较消耗性能的计算场景。
watch 无缓存性，页面重新渲染时值不变化也会执行。
更多的是「观察」的作用,类似于某些数据的监听回调,用于观察props,$emit或者本组件的值,当数据变化时来执行回调进行后续操作。
Watch没有缓存性，更多的是观察的作用，可以监听某些数据执行回调。当我们需要深度监听对象中的属性时，可以打开deep：true选项，这样便会对对象中的每一项进行监听。这样会带来性能问题，优化的话可以使用字符串形式监听，如果没有写到组件中，不要忘记使用unWatch手动注销。
11、Es6 新特性有哪些?
1) let，作用与var类似，用于声明变量
2) const 用于声明常量
3) 解构赋值 ES6允许按照一定模式从数组和对象中提取值，对变量进行赋值
4) 模板字符串
5) 简化对象写法 ES6 允许在大括号里面，直接写入变量和函数，作为对象的属性和方法（在属性名和变量名相同的情况下），这样的书写更加简洁
6) 箭头函数
7) 函数参数的默认值设置 : ES6允许给函数参数赋初始值,可以与解构赋值一起使用
8) rest参数 ES6引入rest参数，用于获取函数的实参，用来代替arguments
9) 扩展运算符 ...能将「数组」转为逗号分隔的「参数序列」
应用场景：数组的合并 数组的克隆 将伪数组转为真正的数组
10）Symbol ES6引入了一种新的原始数据类型Symbol，表示独一无二的值。它是JavaScript语言的第7种数据类型，是一个类似字符串的数据类型
Symbol特点：
Symbol的值是唯一的，用来解决命名冲突的问题
Symbol值不能与其他数据进行运算，也不能与自己进行运算，譬如+、-、*、/、比较运算
Symbol定义的对象属性不能使用for…in遍历，但是可以使用Reflect.ownKeys来获取对象的所有键名
11）Promise Promise是ES6引入的异步编程的新解决方案。语法上Promise是一个构造函数，用来封装异步操作并可以获取其成功或失败的结果
Promise.prototype.then方法：then方法的返回结果，依然是一个promise对象，其状态的成功或失败，由then里的回调函数的执行结果决定
Promise对象catch方法 : 用于指定promise对象失败的回调
12) map：它类似于对象，也是键值对的集合，但是“键”的范围不限于字符串，各种类型的值（包括对象）都可以当做键。Map也实现了iterator接口，所以可以使用「扩展运算符」和for...of进行遍历
13) set：ES6提供了新的数据结构set(集合)，本质上是一个对象。它类似于数组，但成员的值都是唯一的，集合实现了iterator接口，所以可以使用「扩展运算符」和for...of进行遍历
12、查看数据类型的方法有哪些？
1）使用 typeof typeof可以测试出number、string、boolean、undefined及function，
【注意】：对于null及数组、对象，typeof均检测出为object，不能进一步判断它们类型。
2）使用 instanceof
obj instanceof Object ，可以左边放你要判断的内容，右边放类型来进行JS类型判断，只能用来判断复杂数据类型,因为instanceof 是用于检测构造函数（右边）的 prototype 属性是否出现在某个实例对象（左边）的原型链上。
3）使用Object.prototype.toString.call
在任何值上调用 Object 原生的 toString() 方法，都会返回一个 [object NativeConstructorName] 格式的字符串。每个类在内部都有一个 [[Class]] 属性，这个属性中就指定了上述字符串中的构造函数名。
但是它不能检测非原生构造函数的构造函数名。
4）使用constructor
constructor不能判断undefined和null，并且使用它是不安全的，因为contructor的指向是可以改变的
13、原型以及闭包
原型链概念：每个构造函数都会有一个显示原型 prototype
每个实例对象,都有一个隐式原型__proto__
对象的隐式原型__proto__等于其构造函数的显示原型prototype
当我们查找对象的属性或方法时,会现在自身上查找,若找不到则会沿着原型的原型也就是 （__proto__,__proto__）向上查找 , 而我们把原型形成的这种链条关系称为原型链
闭包特点：函数嵌套函数,函数作为返回值被返回,作为参数被传入
闭包中的自由变量,是在函数定义的时候确认的,而不是函数在执行的时候确认的
作用：创建局部作用域
在函数外部可以返回函数内部的局部变量
封装组件与插件
缺点：闭包中的自由变量,不会被销毁而会常驻在内存,使用不当容易造成内存的占用
14、单页面和多页面的区别
单页面：只有一个对应的html页面，一开始需要加载js、css等所有的相关资源（刚开加载会很慢）。所有内容都包含在主页面，对每一个功能模块组件化。页面的切换其实就是组件的切换、所有跳转方式都是通过组件切换完成的！
多页面：每个页面都是独立的HTML文件都需要去加载js、cssd等文件2跳转的时候通过刷新页面从而去重新加载新的HTML页面！
单页面优点：
1）用户体验好，快，内容的改变不需要重新加载整个页面
2）对服务器压力较小，前后端分离
缺点 :
1）不利于seo搜索引擎搜索
2）导航不可用，如果一定要导航需要自行实现前进、后退this.$router.go()
3）初次加载时耗时多
4）页面复杂度提高很多
多页面优点：
1）多个页面之间跳转，用户可以清晰的了解整个网站的内容构成
2）页面结构的分布也不会很拥挤；实现简单，开发成本低
3）适用于对搜索引擎支持较高，页面跳转较少，数据传递较少的项目中开发。
缺点：
1）页面跳转时，要重新执行css，js等文件
2）页面片段之间跳转较慢，需要用到页面跨页面传值的几种方法
3）实现转场动画比较困难。维护成本高。
扫一扫
22万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
