32.同源策略？规避方式？

同协议、同域名、同端口简称为同源策略，同源策略是为了互联网的安全，例如网站A是无法访问到网站B所存入的cookie信息，因为它不符合同源策略的标准。但是有些技术可以进行规避：

1. cookie只有同源的网站可以访问，但是如果仅是二级域名（n.huasenjio）不同，可以通过设置相同的document.domain共享到cookie信息；
2. iframe标签，如果两个网页不同源是无法拿到对方的DOM，典型的例子是iframe的窗口和window.open的窗口，但是无法与父窗口通信；
3. window.name，浏览器有window.name属性，无论是否同源，只要在同一个窗口中打开的网页，后一个页面就可以读取，所以可以通过window.name存入信息；
4. window.postMessage，HTML5为了解决跨文档通信而开辟的API，通过window.postMessage方法可以实现不同网页之间的通信，父子网页通过监听message事件进行监听对方的消息；
5. AJAX请求只可以发送同源请求的网址，否则就会报跨域的错误，可以通过JSONP（仅支持GET）、WebSocket、CORS进行客户端规避这个限制，另外还可以架设服务器代理（浏览器请求同源服务器再转发到外部服务器），因为服务器之间的通信是没有跨域限制；

33.如何中断ajax的请求？

1. 时间超时则会自动停止ajax请求；
2. 调用XML对象的abort方法进行手动停止；

34.事件代理的理解？

事件委托是指将事件绑定到目标元素的父元素上，利用事件的冒泡机制触事件；这样做的好处有节省内存的开销以及对新增加的元素节点同样生效。

1. target被点击触发事件的元素；

36.同步代码？宏任务和微任务的理解？

执行顺序是同步代码>微任务>宏任务，程序执行，限制执行同步代码，遇到微任务（resolve()）就放到微任务队列中，优先执行微任务，遇到宏任务就放到函数调用栈中的指向的任务成为宏任务，按顺序弹出执行；一次CPN轮询下，先执行同步代码，将微任务队列中的任务全部执行完成，再按顺序执行函数调用栈中的宏任务。

37.继承的几种方式？

1. 传参数的方式不同，get的传递方式是通过URL明文传递，而post请求的参数不可见，存在与http的请求体中；
2. 传递的大小不同，get请求参数是拼接在url后面，传递的长度受限制，而post请求传递的长度没有限制；
3. 编码方式不同，get仅支持URL编码，仅支持ASCLL字符编码，post可以进行多种编码方式；
4. 健壮性不同，get请求回退不会重新发送，post请求回退后重新提交表单；

41.常见的http响应状态码？

浏览器打开网页时，浏览器会向服务器发送请求后会收到服务器返回的一个响应报文，报文中的存在有HTTP状态码的头信息。浏览器通过状态码进行一系列操作，以下就是状态码的分类：

1）1**类型的状态码，代表服务器收到请求，并要求继续执行操作：

2）2**类型的状态码，发送成功，操作成功并被处理：

1. 201请求成功但是创建了新的资源；
2. 202已经接受请求但处理未完成；
3. 204无内容（请求处理成功但为返回内容）；

3）3**类型的状态码，重定向，需要进一步操作来完成请求：

1. 301请求资源已经被永久移动到新的URL上但返回值中带有新的url浏览器会自动跳转；
2. 304请求资源未修改并直接读取本地缓存的资源；

4）4**类型的状态码，客户端错误，请求包含错误或无法完成请求：

1. 400客户端请求语法错误导致服务端无法解析；
2. 401请求要求用户的身份认证；
3. 403请求被接收但被拒绝访问；
4. 404服务端无法找到客户端访问的资源；
5. 405请求的接口禁用此方法；

5）5**类型的状态码，服务器错误，请求过程中服务器发生错误：

1. 500服务器内部错误且无法完成请求；
2. 501服务器不支持功能请求；
3. 503服务器超载或者系统维护；

transform可以定义元素很多静态样式实现变形倾斜（skew）、旋转（rotate）、缩放（scale）、位移（translate）以及透视（perspective）等功能，几个主要参数：

默认情况下CSS属性的变化是瞬间完成的可以控制transform让变化过程平滑，但是不是所有的css属性都支持动画特效，一般来说具有中间值的属性是可以存在动画。简单写法：transition: 2s;动画过程是2s，其他省略的属性全部是默认值，有以下控制值：

1. transition-property，默认值为all即所有的属性均参与动画，可以自定义动画的属性；
2. transition-duration: 3s，定义动画过程的时间，可以设定两个时间，根据顺序分给需要设定设定动画的属性值；

44.如何理解使用关键帧？

transition过渡动画是两个状态间的变化，帧动画可以处理动画过程中不同时间的细节变化，对每一帧进行处理，也可以把帧动画理解为多个帧之间的过渡动画。也不是所有的css属性都具有动画，具有以下属性：

1. animation-duration：动画时间，可以设定多个值并分给上面的动画；

// 第一帧的状态特效 // 整个动画的1/4节点上的特效状态 // 整个动画的2/4节点上的特效状态 // 最后一帧的状态特效

一个函数对其周围状态（变量）的引用并保存周围变量，乃至函数执行完成后仍然可以访问的现象称之为闭包，闭包让外部访问函数内部的变量成为可能（私有属性），因为被引用的数据常驻内存，可能会造成内存泄露（一块内存长期被变量占据而不进行释放），闭包可以让你在一个内层函数中访问到其外层函数的作用域的状态并保存，在js中每当创建一个函数，闭包环境就在函数创建时产生，闭包环境相互独立，如果闭包环境引用外部函数作用域的一个变量a，即使当外部函数作用域的变量被销毁释放内存，但变量a不会被删除。

2.怎么理解未声明和未定义？

未声明的变量是程序中不存在且未声明的变量，访问未声明的变量会进行报错；未定义的变量是在程序中声明但尚未给出任何值的变量，访问不会报错并得出undefined值。

声明变量时省略关键字就会造成变量污染

4.定时器？定时器的缺点？

延时一段时间并执行任务，因为它是宏任务，需要等待微任务执行完成后才可以执行。

5.相等符号中”“和”=“的不同？

1. ===称为严格等式运算符，两个操作数比较前不会进行类型转换，如果数据类型不同就直接定为不同；
2. ==包容等式运算符，两个操作数比较前如果发现数据类型不一样，则转换成数据相同的数据类型再比较，不同则不同；

逻辑运算符"=="进行两个是比较是否相等时，不同的数据类型会造成隐式转换后再比较，属于js中比较难的部分，具体情况如下：

1. 数组和布尔值比较，[] == true;//false，空数组转为""再转为0，逻辑值true直接转为1；
2. 字符串和数字进行比较，'1' == 1 // true，字符串转为数字后与数字1比较；
3. 字符串和布尔值进行比较，'1' == true; // true，字符串转为数字1，布尔值转为数字1，比较相等；
4. 布尔值和数字比较，true == 1;/ true，布尔值转为数字1再比较；

有趣的事情是[] == false和![] == false的结果都是true，第一个[]数组转为""再转成0，false直接转为0，比较相等；第二个同理，!符号优先级高所以先执行，所以式子就变成(![]) == false，估计就能理解了！另外有几个比较的特殊undefined == null //

7.逻辑值为假？逻辑值为真？

js中空字符串（""）、NaN、undefined、null、flase，0，逻辑值为假，但是空数组（[]）、空对象（{}）逻辑值为真。

1. 复杂数据类型：数组、对象；

9.new操作符具体干了什么呢?

1.创建了一个新的空对象{}；

3.构造函数中的this指向新对象a；

Var res = 构造器.call(obj)，因为函数存在闭包所以每一个作用域都是相互独立，就有了对象的概念。

4.属性访问器中的setter中进行判断，如果是对象（引用类型则返回），否则返回空对象{}；

10.理解节流和防抖？

前端开发中我们经常需要绑定一些持续触发的函数，例如：跳转屏幕宽度resize，监听页面滚动scroll，拖拽mousemove。这些过程中绑定的函数频繁的触发，所以节流和防抖就很好的解决办法。

1. 防抖debounce，指触发事件触发后的n秒内又被触发，则会重新计算时间，例如设置300毫秒的防抖时间，事件触发后的300毫秒内该事件又被触发，则重新计算时间，又将等待300毫秒。如果三百毫秒内没有触发，则直接执行事件的处理程序；

1. 节流throttle，连续触发事件，但是在n秒内只是执行一次处理程序，体现效果每200毫秒会执行事件的处理程序；

MVVM是model-View-ViewModel的缩写，其中model代表数据模型可以其中定义数据操作业务逻辑；View代表视图层，界面UI组件负责展示数据；ViewModel监听数据模型的改变和控制视图行为、处理用于交互。MVVM架构中，数据模型和视图分离，数据模型仅与ViewModel进行双向交互，View数据变化会同步传入ViewModel中，进而改变数据模型的值，同理数据模型的改变也会间接反映到View视图层上。ViewModel通过双向绑定把view视图和Model数据模型连接，同步操作自动完成，复杂的数据状态完全由MvvM统一管理。

实例从创建到销毁的过程就叫生命周期，从开始创建，初始化数据，编译解析模板，挂载DOM并渲染，循环监听更新渲染，销毁实例等一系列过程。

1. beforeCreate创建前，数据观测和初始化事件未开始；
2. create创建后完成数据观测属性和方法的运算，初始化事件，$属性没有被挂载渲染出来；
3. beforeMount挂载前，实例挂载el对象前被调用，render函数手册被调用，完成模板编译，data里面数据和模板生成fragment片段，但是还没有被挂载到html文档上去，尚不能操作进程DOM节点获取操作；
4. mounted挂载后，替换原来el并挂载到实例上去，以及可以获取到DOM节点，可进行ajax交互，节点进行实践监听等操作；
5. beforeUpdate更新前，数据更新前调用，发生在虚拟DOM重新渲染和打好补丁之前，不会触发附加的重渲染过程；
6. updated更新后，数据更新导致虚拟DOM重新渲染，数据以及更新完毕；
7. beforeDestroy销毁前，vue实例销毁前调用，此时仍然可以访问使用；
8. destroyed销毁后，vue实例销毁后调用，事件监听以及组件实例都被销毁；

3.Vue实现数据双向绑定的原理？

vue实现数据双向绑定的主要是采用数据劫持结合发布者订阅者者模式的方式，通过definedProperty()定义属性特征以及属性访问器getter/setter进行数据拦截，当数据发生变动时进入getter访问器，通过notify()通知订阅者，触发回调update方法更新数据视图。vue的双向绑定将MVVM作为绑定数据的入口，整合Observer，Compile和Watcher三者，开局Observe监听自己数据变化生成发布者，通过Compile解析模板指令，生成属性订阅者。

4.组件之间参数传递？

1. 父组件向子组件传值，父组件使用子组件时设置属性，子组件内部通过props方法接收数据；
2. 子组件向父组件传值，子组件内部使用$emit方法发生事件，父组件在子组件上监听并绑定该方法，取得数据；
3. 非父子关系时，创建一个事件中心，通过事件总线的方式通信；
4. VUE实现父子组件之间的数据交互；

hash模式在浏览器中URL后面带"#“号，”#"包括后面的字符称之为hash，可以使用window.location.hash读取，当路由跳转时，URL发生改变，但不会发送HTTP网络请求，页面不会重载，但需要注意的是页面上的锚点会影响到hash模式；history模式是采用HTML5新增的两个方法pushState()和replaceState（），可以对浏览器历史记录栈进行修改，以及popState事件触发状态的变更，history在真实的项目中常常需要后端服务器的配合，例如nginx的反向代理。

1. 相同点，vue和angular都支持内置指令和自定义指令，支持过滤器数据双向绑定。vue和安react的中心思想相似，react采用特殊的JSX语法，vue组件化开发中也推崇.vue文件的使用，vue文件的使用理解更为直接。一切皆为组件，声明周期过程都提供合理的钩子函数；
2. 不同点，angular增加特性，学习成本高，vue提供的api相对简单直观，依赖对脏数据的检测，所以当Watcher订阅者越多越慢，vue采用的依赖追中的观察，并且使用异步队列更新，所有的数据都是独立触发。React采用虚拟dom对渲染结果做脏数据检测，而vue在模板中提供指令，过滤器更加方便快捷的操作虚拟dom；

7.Vue路由的钩子函数？

首页可以控制导航跳转，beforeEach，afterEach导航守卫，可以对页面title进行修改，页面访问权限的控制，例如登录后才可以访问某些页面等效果实现，beforeEach和afterEach都是存在三个主要参数，to、from、next（）以下就是详细的介绍：

1. to代表route即将进入的页面；
2. from代表正要离开的页面；
3. next函数需要调用该钩子函数，否则会对路由对象进行拦截导致报错；

8.Vuex是什么？怎么使用？工作场景？

1. state仓库，Vuex使用单一状态树，每一个应用最好仅包含一个store实例，不建议直接修改state的值，最好是通过commit方法调用mutation任务进行修改，方便后期数据的追踪；
2. mutation，定义方法动态修改state中的数据，不建议包含逻辑业务处理，处理一些同步任务；
3. getter，类似vue实例中的计算属性特点，用来过滤规范改造数据；
4. 项目特别复杂的时候，每一个模块拥有自己的state，mutation，Action，getter，代码逻辑更加清晰；

9.Vue-cli如何新增自定义指令？

keep-alive是Vue内置的一个组件，包含的组件保留状态，避免被重新渲染，keep-alive加入两个属性，include（包含）和exclude（排除）且exclude优先级大于include，可以通过正则表示式或者字符串定义。

1. css只在当前组件起作用，因为style标签中写入scoped进行限制则不会穿透，如果是渲染markdown语法则使用常规选择符将不会生效；
2. v-if是按照条件是否渲染，v-show按照条件隐藏显示，还存在与文档流中，类似于控制css中的display设置为none；
3. $router是路由实例对象，包含路由的跳转方法，钩子函数，而$route是活跃路由信息对象，指向正在展示的活跃路由的信息，包含pah，params等信息；
4. vue的两个核心是数据驱动和组件系统；
5. 事件修饰符，prevent阻止事件默认行为，stop阻止点击事件冒泡行为，self事件仅在触发元素上发生，capture事件捕获，once触发一次，native绑定原生click；
6. v-on可以绑定多个方法；
7. vue中遍历时key的作用为每一个节点做唯一标识，v-for更新已渲染过的元素列表时，出于优化性能采用"就地复用策略"，当当数据项的顺序被改变，Vue不会移动DOM元素来匹配数据项的顺序，而是简单复用每一个元素，key的作用就是更新dom，从而不要复用，避免获得脏数据结果；
8. vue的计算属性调用时仅写计算属性名，获取数据并按一定规则输出，计算属性和method不同。不管依赖的数据是否变化，method都是从新计算，计算属性则是从缓存中读取，优化性能；
9. vue具有简单的API实现数据绑定以及响应，核心是一个响应的数据绑定系统，MVVM架构，组件化开发，轻量等优点，但是vue不支持低版本的浏览器，目前仅支持到IE9，不利于SEO的优化，首屏加载时间较长；
10. 路由通过path/:id属性后面添加冒号和便利的形式，使用时通过params.id获取；

当你修改DOM元素的值后直接获取DOM节点的更新数据可能会造成获取不到，使用$nextTick回调函数可以让渲染完成后才会进行操作。

14.SPA应用和多页面应用？

单页面应用（SPA）程序仅有一个入口，首屏加载时间相对较长，一旦加载完成后用户体验很好，减少服务器的压力，但是不利于SEO，多页面应用程序有多个入口，页面跳转是整页进行刷新。

v-for具有更高的优先级，意味者遍历的时候每个元素都进行if判断，造成内存的浪费。

1. 相同点，两者都是存放静态资源文件；
2. 不同点，assets资源文件存放的资源文件项目打包时会对静态资源文件进行处理，修改名字改变类型等操作，而static则是直接拷贝到打包文件夹中，没有经过压缩处理。template需要的样式文件都可以放在asset中，压缩代码体积，第三方静态文件库可以放static中；

18.SPA首屏加载慢如何解决？

懒加载方式引入文件，打包构建时采用tree shaking操作，分割第三方库使用CDN方式引入。

插槽常用于组件封装中，组件具有一定布局，但内容元素相似，可以使用插槽预留位置，使用插入对应的DOM，vue内部会自动进行替换。

22.Vue中数组方法修改元素数据会响应更新？

Grunt和Gulp属于一类的都是构建工具，Webpack 是目前最热门的前端资源模块化管理和打包工具，gulp基于任务和流，而webpack是基于入口文件，根据关系依赖引入文件，根据依赖图进行打包。

1. file-loader文件统一输出到指定文件夹，HTML中通过相对路径引用文件；

2. url-loader文件很小的情况下以 base64 的方式把文件内容注入到代码中；

1. loader意思作为加载解析文件作用，实现的功能比较小，默认webpack仅可以打包json和js语法，通过安装loader可以加载识别更多文件。plugin是插件，更为灵活实现的功能更广泛；
2. loader使用前需要安装，不需要引入可直接在module.rules中配置。plugin则需要安装，引入模块，使用时需要new 实例对象；

1. 初始化参数，从配置文件和 Shell 语句中读取与合并配置参数；
2. 开始编译，通过配置参数初始化 Compiler 对象，加载配置的插件，执行对象的 run 方法开始执行编译；
3. 确定入口，根据配置中的 entry 找出入口文件；
4. 编译模块，入口文件出发，调用所有配置的 Loader 对模块进行翻译；
5. 完成模块编译，使用 Loader 翻译完所有模块后得到模块之间的依赖关系图；
6. 输出资源，根据入口和模块之间的依赖关系，引入模块组合成为Chunk，再把每个 Chunk 转换成一个单独的文件加入到输出列表，此处可以修改输出文件；
7. 输出完成，确定好输出内容后，根据配置确定输出的路径和文件名，把文件内容写入到文件系统；

可以做到不用刷新浏览器而将新变更的模块替换掉旧的模块

1. 开发环境优化，DevServer开发工具优化，实现HMR热替换，采用多线程编译；
2. 生产环境优化，代码分隔配合CDN引入资源，使用ES6语法引入，实现Tree shaking效果，通过压缩代码缩小体积，通过source-map进行源文件和资源文件的映射方式，内联方式可以提高性能；

违法和不良信息举报电话021-丨全国旅游投诉热线12345丨