1、vue实现双向数据绑定原理是什么？DOCTYPE html lang=' en ' head meta charset=' UTF-8 '/meta name=' viewport ' content=' width=设备宽度，initial-scale=1.0 '/title document/title/head body script src=' https://cdn。bootcss。com/vue/2。5 .16/vue。js '/script！-引入某视频剪辑软件文件-div id=' box '新输入v-bind :名称。sync=' name '/new-input { { name } }！-小胡子语法-输入类型=' text ' v-model=' name '//div脚本vue。component(' new-input '，{ props: 'name '，data : function(){ return { new name : this。姓名，}；}，template : ` label input type=' text ' @ keyup=' change name ' v-model=' newName '/你的名字：/label `，//模板字符串方法： {更改名称：函数(){ this .$emit('update:name)，this。newname)；}，}，手表： {名称：功能(五){ this。newname=v；}, }, //监听});新Vue({ el: '#box '，//挂载实例data: { name: 'nick '，}，//赋初始值});/script /body/html！DOCTYPE html lang=' en ' head meta charset=' UTF-8 '/meta name=' viewport ' content=' width=device-width，initial-scale=1.0 '/title document/title/head body input type=' text ' v-mode=' msg '/p v-mode=' msg '/p script const data={ msg : '你好', };常量输入=文档。查询选择器(“输入”)；const p=文档。查询选择器(“p”)；输入。值=数据。消息；p . innerhtml=data。味精；//视图变数据跟着变input.addEventListener('input '，function(){ data。msg=输入。价值；});//数据变视图变let temp=data . msg object . define property(data，' msg '，{ get(){ return temp；
}, set(value) { temp = value; //视图修改 input.value = temp; p.innerHTML = temp; }, }); data.msg = "小李"; </script> </body></html>八股文我不想写了自己百度去2、v-model语法糖是怎么实现的<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <!-- v-model 只是语法糖而已 --> <!-- v-model 在内部为不同的输入元素使用不同的property并抛出不同的事件 --> <!-- text和textarea 元素使用value property 和 input事件 --> <!-- checkbox 和radio使用checked property 和 change事件--> <!-- select 字段将value 作为prop 并将change 作为事件 --> <!-- 注意：对于需要使用输入法(如中文、日文、韩文等)的语言，你将会发现v-model不会再输入法 组合文字过程中得到更新 --> <!-- 再普通标签上 --> <input v-model="sth" /> //这一行等于下一行 <input v-bind:value="sth" v-on:input="sth = $event.target.value" /> <!-- 再组件上 --> <currency-input v-model="price"></currentcy-input> <!--上行代码是下行的语法糖 <currency-input :value="price" @input="price = arguments<0>"></currency-input> --> <!-- 子组件定义 --> Vue.component('currency-input', { template: ` <span> <input ref="input" :value="value" @input="$emit('input', $event.target.value)" > </span> `, props: <'value'>, }) </body></html>3、Hash和history有什么区别戳右面的链接：浅谈前端路由原理hash和history - 掘金4、什么是深拷贝和浅拷贝?以及怎么实现深拷贝和浅拷贝?戳右面的链接：浅拷贝与深拷贝 - 掘金
5、什么是原型什么是原型链?<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> </body><script> function Person () { } var person = new Person(); person.name = 'Kevin'; console.log(person.name) // Kevin // prototype function Person () { } Person.prototype.name = 'Kevin'; var person1 = new Person(); var person2 = new Person(); console.log(person1.name)// Kevin console.log(person2.name)// Kevin // __proto__ function Person () { } var person = new Person(); console.log(person.__proto__ === Person.prototype) // true //constructor function Person() { } console.log(Person === Person.prototype.constructor) // true //综上所述 function Person () { } var person = new Person() console.log(person.__proto__ == Person.prototype) // true console.log(Person.prototype.constructor == Person) // true //顺便学习一下ES5得方法,可以获得对象得原型 console.log(Object.getPrototypeOf(person) === Person.prototype) // true //实例与原型 function Person () { } Person.prototype.name = 'Kevin'; var person = new Person(); person.name = 'Daisy'; console.log(person.name) // Daisy delete person.name; console.log(person.name) // Kevin //原型得原型 var obj = new Object(); obj.name = 'Kevin', console.log(obj.name) //Kevin //原型链 console.log(Object.prototype.__proto__ === null) //true // null 表示"没用对象" 即该处不应该有值 // 补充 function Person() { } var person = new Person() console.log(person.constructor === Person) // true //当获取person.constructor时，其实person中并没有constructor属性,当不能读取到constructor属性时,会从person的原型 //也就是Person.prototype中读取时,正好原型中有该属性,所以 person.constructor === Person.prototype.constructor //__proto__ //其次是__proto__，绝大部分浏览器都支持这个非标准的方法访问原型，然而它并不存在于Person.prototype中，实际上，它 // 是来自与Object.prototype,与其说是一个属性，不如说是一个getter/setter,当使用obj.__proto__时，可以理解成返回了 // Object.getPrototypeOf(obj) 总结： 1、当一个对象查找属性和方法时会从自身查找,如果查找不到则会通过__proto__指向被实例化的构造函数的prototype 2、隐式原型也是一个对象,是指向我们构造函数的原型 3、除了最顶层的Object对象没有__proto_，其他所有的对象都有__proto__,这是隐式原型 4、隐式原型__proto__的作用是让对象通过它来一直往上查找属性或方法，直到找到最顶层的Object的__proto__属性，它的值是null,这个查找的过程就是原型链</script></html>6、箭头函数和普通函数有什么区别?（1）箭头函数比普通函数更加简洁 如果没有参数，就直接写一个空括号即可 如果只有一个参数，可以省去参数括号 如果有多个参数，用逗号分割 如果函数体的返回值只有一句，可以省略大括号 如果函数体不需要返回值，且只有一句话，可以给这个语句前面加一个void关键字。最常用的就是调用一个函数： let fn = () => void doesNotReturn() (2) 箭头函数没有自己的this 箭头函数不会创建自己的this,所以它没有自己的this,它只会在自己作用域的上一层继承this。所以箭头函数中的this的指向在它在定义时一家确定了，之后不会改变。 （3）箭头函数继承来的this指向永远不会改变 (4) call()、apply()、bind()等方法不能改变箭头函数中的this指向 (5) 箭头函数不能作为构造函数使用 (6) 箭头函数没有自己的arguments (7) 箭头函数没有prototype (8) 箭头函数不能用作Generator函数,不能使用yeild关键字7、New操作符做了什么事情?1、首先创建了一个新对象2、设置原型，将对象的原型设置为函数的prototype对象3、让函数的this指向这个对象，执行构造函数的代码（为这个新对象添加属性）4、判断函数的返回值类型，如果是值类型，返回创建的对象。如果是引用类型，就返回这个引用类型的对象8、说一下eventloop戳右边链接：什么是 EventLoop ？_18岁那年的博客-CSDN博客_eventloop
9、什么是闭包，闭包的作用是什么当一个内部函数被调用，就会形成闭包，闭包就是能够读取其他函数内部变量的函数。闭包作用：局部变量无法共享和长久的保存，而全局变量可能造成变量污染，所以我们希望有一种机制既可以长久的保存变量又不会造成全局污染。10、Promise是什么?Promise 是异步编程的一种解决方案：从语法上讲，promise是一个对象，从它可以获取异步操作的消息；从本意上讲，它是承诺，承诺它过一段时间会给你一个结果。promise有三种状态： pending(等待态)，fulfiled(成功态)，rejected(失败态) ；状态一旦改变，就不会再变。创造promise实例后，它会立即执行。
const PENDING = "pending";const RESOLVED = "resolved";const REJECTED = "rejected";function MyPromise(fn) { // 保存初始化状态 var self = this; // 初始化状态 this.state = PENDING; // 用于保存 resolve 或者 rejected 传入的值 this.value = null; // 用于保存 resolve 的回调函数 this.resolvedCallbacks = <>; // 用于保存 reject 的回调函数 this.rejectedCallbacks = <>; // 状态转变为 resolved 方法 function resolve(value) { // 判断传入元素是否为 Promise 值，如果是，则状态改变必须等待前一个状态改变后再进行改变 if (value instanceof MyPromise) { return value.then(resolve, reject); } // 保证代码的执行顺序为本轮事件循环的末尾 setTimeout(() => { // 只有状态为 pending 时才能转变， if (self.state === PENDING) { // 修改状态 self.state = RESOLVED; // 设置传入的值 self.value = value; // 执行回调函数 self.resolvedCallbacks.forEach(callback => { callback(value); }); } }, 0); } // 状态转变为 rejected 方法 function reject(value) { // 保证代码的执行顺序为本轮事件循环的末尾 setTimeout(() => { // 只有状态为 pending 时才能转变 if (self.state === PENDING) { // 修改状态 self.state = REJECTED; // 设置传入的值 self.value = value; // 执行回调函数 self.rejectedCallbacks.forEach(callback => { callback(value); }); } }, 0); } // 将两个方法传入函数执行 try { fn(resolve, reject); } catch (e) { // 遇到错误时，捕获错误，执行 reject 函数 reject(e); }}MyPromise.prototype.then = function(onResolved, onRejected) { // 首先判断两个参数是否为函数类型，因为这两个参数是可选参数 onResolved = typeof onResolved === "function" ? onResolved : function(value) { return value; }; onRejected = typeof onRejected === "function" ? onRejected : function(error) { throw error; }; // 如果是等待状态，则将函数加入对应列表中 if (this.state === PENDING) { this.resolvedCallbacks.push(onResolved); this.rejectedCallbacks.push(onRejected); } // 如果状态已经凝固，则直接执行对应状态的函数 if (this.state === RESOLVED) { onResolved(this.value); } if (this.state === REJECTED) { onRejected(this.value); }};11、Set 和 Map有什么区别？1、Map是键值对，Set是值得集合，当然键和值可以是任何得值2、Map可以通过get方法获取值，而set不能因为它只有值3、都能通过迭代器进行for...of 遍历4、Set的值是唯一的可以做数组去重，而Map由于没有格式限制，可以做数据存储12、map和foreach有什么区别foreach()方法会针对每一个元素执行提供得函数,该方法没有返回值,是否会改变原数组取决与数组元素的类型是基本类型还是引用类型map()方法不会改变原数组的值,返回一个新数组,新数组中的值为原数组调用函数处理之后的值：13、localStorage sessionStorage cookies 有什么区别?localStorage:以键值对的方式存储 储存时间没有限制 永久生效 除非自己删除记录sessionStorage：当页面关闭后被清理与其他相比不能同源窗口共享 是会话级别的存储方式cookies 数据不能超过4k 同时因为每次http请求都会携带cookie 所有cookie只适合保存很小的数据 如会话标识14、Vuex有哪些基本属性?为什么 Vuex 的 mutation 中不能做异步操作?有五种，分别是 State、 Getter、Mutation 、Action、 Module1、state => 基本数据(数据源存放地)2、getters => 从基本数据派生出来的数据3、mutations => 提交更改数据的方法，同步4、actions => 像一个装饰器，包裹mutations，使之可以异步。5、modules => 模块化Vuex1、Vuex中所有的状态更新的唯一途径都是mutation，异步操作通过 Action 来提交 mutation实现，这样可以方便地跟踪每一个状态的变化，从而能够实现一些工具帮助更好地了解我们的应用。2、每个mutation执行完成后都会对应到一个新的状态变更，这样devtools就可以打个快照存下来，然后就可以实现 time-travel 了。如果mutation支持异步操作，就没有办法知道状态是何时更新的，无法很好的进行状态的追踪，给调试带来困难。15、Loader和Plugin 有什么区别Loader：直译为"加载器"。Webpack将一切文件视为模块，但是webpack原生是只能解析js文件，如果想将其他文件也打包的话，就会用到`loader`。 所以Loader的作用是让webpack拥有了加载和解析非JavaScript文件的能力。 Plugin：直译为"插件"。Plugin可以扩展webpack的功能，让webpack具有更多的灵活性。 在 Webpack 运行的生命周期中会广播出许多事件，Plugin 可以监听这些事件，在合适的时机通过 Webpack 提供的 API 改变输出结果。
16、在地址栏里输入一个地址回车会发生哪些事情1、解析URL：首先会对 URL 进行解析，分析所需要使用的传输协议和请求的资源的路径。如果输入的 URL 中的协议或者主机名不合法，将会把地址栏中输入的内容传递给搜索引擎。如果没有问题，浏览器会检查 URL 中是否出现了非法字符，如果存在非法字符，则对非法字符进行转义后再进行下一过程。2、缓存判断：浏览器会判断所请求的资源是否在缓存里，如果请求的资源在缓存里并且没有失效，那么就直接使用，否则向服务器发起新的请求。3、DNS解析： 下一步首先需要获取的是输入的 URL 中的域名的 IP 地址，首先会判断本地是否有该域名的 IP 地址的缓存，如果有则使用，如果没有则向本地 DNS 服务器发起请求。本地 DNS 服务器也会先检查是否存在缓存，如果没有就会先向根域名服务器发起请求，获得负责的顶级域名服务器的地址后，再向顶级域名服务器请求，然后获得负责的权威域名服务器的地址后，再向权威域名服务器发起请求，最终获得域名的 IP 地址后，本地 DNS 服务器再将这个 IP 地址返回给请求的用户。用户向本地 DNS 服务器发起请求属于递归请求，本地 DNS 服务器向各级域名服务器发起请求属于迭代请求。4、获取MAC地址： 当浏览器得到 IP 地址后，数据传输还需要知道目的主机 MAC 地址，因为应用层下发数据给传输层，TCP 协议会指定源端口号和目的端口号，然后下发给网络层。网络层会将本机地址作为源地址，获取的 IP 地址作为目的地址。然后将下发给数据链路层，数据链路层的发送需要加入通信双方的 MAC 地址，本机的 MAC 地址作为源 MAC 地址，目的 MAC 地址需要分情况处理。通过将 IP 地址与本机的子网掩码相与，可以判断是否与请求主机在同一个子网里，如果在同一个子网里，可以使用 APR 协议获取到目的主机的 MAC 地址，如果不在一个子网里，那么请求应该转发给网关，由它代为转发，此时同样可以通过 ARP 协议来获取网关的 MAC 地址，此时目的主机的 MAC 地址应该为网关的地址。5、TCP三次握手： 下面是 TCP 建立连接的三次握手的过程，首先客户端向服务器发送一个 SYN 连接请求报文段和一个随机序号，服务端接收到请求后向客户端发送一个 SYN ACK报文段，确认连接请求，并且也向客户端发送一个随机序号。客户端接收服务器的确认应答后，进入连接建立的状态，同时向服务器也发送一个ACK 确认报文段，服务器端接收到确认后，也进入连接建立状态，此时双方的连接就建立起来了。6、HTTPS握手： 如果使用的是 HTTPS 协议，在通信前还存在 TLS 的一个四次握手的过程。首先由客户端向服务器端发送使用的协议的版本号、一个随机数和可以使用的加密方法。服务器端收到后，确认加密的方法，也向客户端发送一个随机数和自己的数字证书。客户端收到后，首先检查数字证书是否有效，如果有效，则再生成一个随机数，并使用证书中的公钥对随机数加密，然后发送给服务器端，并且还会提供一个前面所有内容的 hash 值供服务器端检验。服务器端接收后，使用自己的私钥对数据解密，同时向客户端发送一个前面所有内容的 hash 值供客户端检验。这个时候双方都有了三个随机数，按照之前所约定的加密方法，使用这三个随机数生成一把秘钥，以后双方通信前，就使用这个秘钥对数据进行加密后再传输。7、返回数据： 当页面请求发送到服务器端后，服务器端会返回一个 html 文件作为响应，浏览器接收到响应后，开始对 html 文件进行解析，开始页面的渲染过程。8、页面渲染： 浏览器首先会根据 html 文件构建 DOM 树，根据解析到的 css 文件构建 CSSOM 树，如果遇到 script 标签，则判端是否含有 defer 或者 async 属性，要不然 script 的加载和执行会造成页面的渲染的阻塞。当 DOM 树和 CSSOM 树建立好后，根据它们来构建渲染树。渲染树构建好后，会根据渲染树来进行布局。布局完成后，最后使用浏览器的 UI 接口对页面进行绘制。这个时候整个页面就显示出来了。9、TCP四次挥手： 最后一步是 TCP 断开连接的四次挥手过程。若客户端认为数据发送完成，则它需要向服务端发送连接释放请求。服务端收到连接释放请求后，会告诉应用层要释放 TCP 链接。然后会发送 ACK 包，并进入 CLOSE_WAIT 状态，此时表明客户端到服务端的连接已经释放，不再接收客户端发的数据了。但是因为 TCP 连接是双向的，所以服务端仍旧可以发送数据给客户端。服务端如果此时还有没发完的数据会继续发送，完毕后会向客户端发送连接释放请求，然后服务端便进入 LAST-ACK 状态。客户端收到释放请求后，向服务端发送确认应答，此时客户端进入 TIME-WAIT 状态。该状态会持续 2MSL（最大段生存期，指报文段在网络中生存的时间，超时会被抛弃） 时间，若该时间段内没有服务端的重发请求的话，就进入 CLOSED 状态。当服务端收到确认应答后，也便进入 CLOSED 状态。17、UDP和TCP有什么区别
18、项目中常用的性能优化方式有哪些?太多了，自己整理吧19、怎么解决跨域问题的，你是怎么配置的
20、计算属性和watch有什么区别?以及它们的运用场景?// 区别 computed 计算属性：依赖其它属性值，并且computed的值有缓存，只有它依赖的属性值发生改变，下一次获取computed的值时才会重新计算computed的值。 watch 侦听器：更多的是观察的作用,无缓存性,类似与某些数据的监听回调,每当监听的数据变化时都会执行回调进行后续操作//运用场景 当需要进行数值计算,并且依赖与其它数据时,应该使用computed,因为可以利用computed的缓存属性,避免每次获取值时都要重新计算。 当需要在数据变化时执行异步或开销较大的操作时,应该使用watch,使用watch选项允许执行异步操作（访问一个API),限制执行该操作的频率，并在得到最终结果前，设置中间状态。这些都是计算属性无法做到的。21、Vue的生命周期是什么 每个钩子里面具体做了什么事情Vue 实例有个完整的命周期，也就是从开始创建、初始化数据、编译模版、挂载Dom -> 渲染、更新 -> 渲染、卸载 等系列过程，称这是Vue的命周期。1、beforeCreate（创建前） ：数据观测和初始化事件还未开始，此时 data 的响应式追踪、event/watcher 都还没有被设置，也就是说不能访问到data、computed、watch、methods上的方法和数据。2、created（创建后） ：实例创建完成，实例上配置的 options 包括 data、computed、watch、methods 等都配置完成，但是此时渲染得节点还未挂载到 DOM，所以不能访问到 `$el` 属性。3、beforeMount（挂载前） ：在挂载开始之前被调用，相关的render函数首次被调用。实例已完成以下的配置：编译模板，把data里面的数据和模板生成html。此时还没有挂载html到页面上。4、mounted（挂载后） ：在el被新创建的 vm.$el 替换，并挂载到实例上去之后调用。实例已完成以下的配置：用上面编译好的html内容替换el属性指向的DOM对象。完成模板中的html渲染到html 页面中。此过程中进行ajax交互。5、beforeUpdate（更新前） ：响应式数据更新时调用，此时虽然响应式数据更新了，但是对应的真实 DOM 还没有被渲染。6、updated（更新后）：在由于数据更改导致的虚拟DOM重新渲染和打补丁之后调用。此时 DOM 已经根据响应式数据的变化更新了。调用时，组件 DOM已经更新，所以可以执行依赖于DOM的操作。然而在大多数情况下，应该避免在此期间更改状态，因为这可能会导致更新无限循环。该钩子在服务器端渲染期间不被调用。7、beforeDestroy（销毁前） ：实例销毁之前调用。这一步，实例仍然完全可用，`this` 仍能获取到实例。8、destroyed（销毁后） ：实例销毁后调用，调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。该钩子在服务端渲染期间不被调用。另外还有 `keep-alive` 独有的生命周期，分别为 `activated` 和 `deactivated` 。用 `keep-alive` 包裹的组件在切换时不会进行销毁，而是缓存到内存中并执行 `deactivated` 钩子函数，命中缓存渲染后会执行 `activated` 钩子函数。22、组件之间的传值有几种方式1、父传子2、子传父3、eventbus4、ref/$refs5、$parent/$children6、$attrs/$listeners7、依赖注入(provide/inject)23、Eventbus具体是怎么实现的
24、父组件到子组件更新的方式是什么样的
25、$nexttick 是干嘛的，你一般拿它做什么
26、Keepalive 是什么，里面有哪些钩子
27、插槽是什么 怎么使用的
28、Es6常见的语法你知道哪一些
29、自定义指令你是怎么用的
30、重绘和重排
31、常见的水平垂直方式有几种?//利用绝对定位，先将元素的左上角通过 top:50%和 left:50%定位到页面的中心，然后再通过 translate 来调整元素的中心点到页面的中心。该方法需要考虑浏览器兼容问题。.parent { position: relative;}.child { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);}//利用绝对定位，设置四个方向的值都为 0，并将 margin 设置为 auto，由于宽高固定，因此对应方向实现平分，可以实现水平和垂直方向上的居中。该方法适用于盒子有宽高的情况：.parent { position: relative;}.child { position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto;}//利用绝对定位，先将元素的左上角通过 top:50%和 left:50%定位到页面的中心，然后再通过 margin 负值来调整元素的中心点到页面的中心。该方法适用于盒子宽高已知的情况.parent { position: relative;}.child { position: absolute; top: 50%; left: 50%; margin-top: -50px; /* 自身 height 的一半 */ margin-left: -50px; /* 自身 width 的一半 */}//使用 flex 布局，通过 align-items:center 和 justify-content:center 设置容器的垂直和水平方向上为居中对齐，然后它的子元素也可以实现垂直和水平的居中。该方法要**考虑兼容的问题**，该方法在移动端用的较多：.parent { display: flex; justify-content:center; align-items:center;}//另外，如果父元素设置了flex布局，只需要给子元素加上`margin:auto;`就可以实现垂直居中布局.parent{ display:flex;}.child{ margin: auto;}32、标准盒模型和怪异盒模型
33、Flex常见的属性 flex：1代表什么
34、Rem你是怎么做适配的
35、媒体查询是什么
36、首屏性能优化你是怎么做的
37、怎么解决白屏问题1、加loading2、骨架屏38、浏览器的性能监控你是怎么做的戳右边链接：如何进行 web 性能监控_isNealyang的博客-CSDN博客
39、Diff算法是什么 ：key = index 为什么不常用数组的下标作为index 加了它有什么好处
40、虚拟列表你是怎么实现的
41、说一下防抖和节流
42、哪些情况会导致内存泄漏1、意外的全局变量：由于使用未声明的变量,而意外的创建了一个全局变量,而使这个变量一直留在内存中无法被回收2、被遗忘的计时器或回调函数：设置了 setInterval 定时器，而忘记取消它，如果循环函数有对外部变量的引用的话，那么这个变量会被一直留在内存中，而无法被回收。3、脱离 DOM 的引用：获取一个 DOM 元素的引用，而后面这个元素被删除，由于一直保留了对这个元素的引用，所以它也无法被回收。4、闭包：不合理的使用闭包，从而导致某些变量一直被留在内存当中。43、Vue的父子组件生命周期钩子函数执行顺序？<!-- 加载渲染过程 --> <!-- 父beforeCreate -> 父created -> 父beforeMount -> 子beforeCreate -> 子created -> 子beforeMount -> 子mounted -> 父mounted --> <!-- 子组件更新过程 --> <!-- 父beforeUpdate -> 子beforeUpdate -> 子updaed -> 父updated --> <!-- 父组件跟新过程 --> <!-- 父beforeUpdate -> 父updated --> <!-- 销毁过程 --> <!-- 父beforeDestroy -> 子beforeDestroy -> 子destroyed ->父destroyed -->44、说一下常见的检测数据类型的几种方式?typeof 其中数组、对象、null都会被判断为Object，其他判断都正确instanceof 只能判断引用数据类型,不能判断基本数据类型constructor 它有2个作用 一是判断数据的类型，二是对象实例通过constructor对象访问它的构造函数。需要注意的事情是如果创建一个对象来改变它的原型,constructor就不能来判断数据类型了Object.prototype.toString.call()45、说一下data为什么是一个函数而不是一个对象?JavaScript中的对象是引用类型的数据，当多个实例引用同一个对象时，只要一个实例对这个对象进行操作，其他实例中的数据也会发生变化。而在Vue中，我们更多的是想要复用组件，那就需要每个组件都有自己的数据，这样组件之间才不会相互干扰。所以组件的数据不能写成对象的形式，而是要写成函数的形式。数据以函数返回值的形式定义，这样当我们每次复用组件的时候，就会返回一个新的data，也就是说每个组件都有自己的私有数据空间，它们各自维护自己的数据，不会干扰其他组件的正常运行。
46、说一下slice splice split 的区别?// slice(start,
54、说一下redux 里面有什么
55、说一下react和vue框架的区别
56、说一下proxy 它有什么优点
57、说一下vue3.0你了解多少? <!-- 响应式原理的改变 Vue3.x 使用Proxy取代 Vue2.x 版本的Object.defineProperty --> <!-- 组件选项声明方式Vue3.x 使用Composition API setup 是Vue3.x新增的一个选项，他 是组件内使用Composition API 的入口 --> <!-- 模板语法变化slot具名插槽语法 自定义指令 v-model 升级 --> <!-- 其它方面的更改Suspense支持Fragment(多个根节点) 和Protal (在dom其他部分渲染组建内容)组件 针对一些特殊的场景做了处理。基于treeshaking优化，提供了更多的内置功能。 -->58、说一下bfc bfc有什么优缺点
59、说一下你对盒模型的理解?CSS3中的盒模型有以下两种:标准盒模型、IE盒模型盒模型都是由四个部分组成的,分别是margin、border、padding和content标准盒模型和IE盒模型的区别在于设置width和height时, 所对应的范围不同1、标准盒模型的width和height属性的范围只包含了content2、IE盒模型的width和height属性的范围包含了border、padding和content可以通过修改元素的box-sizing属性来改变元素的盒模型；1、box-sizing：content-box表示标准盒模型（默认值）2、box-sizing：border-box表示IE盒模型（怪异盒模型）60、说一下SPA单页面有什么优缺点？优点：1.体验好，不刷新，减少 请求 数据ajax异步获取 页面流程；2.前后端分离3.减轻服务端压力4.共用一套后端程序代码，适配多端缺点：1.首屏加载过慢；2.SEO 不利于搜索引擎抓取61、说一下前端登录的流程?初次登录的时候，前端调后调的登录接口，发送用户名和密码，后端收到请求，验证用户名和密码，验证成功，就给前端返回一个token，和一个用户信息的值，前端拿到token，将token储存到Vuex中，然后从Vuex中把token的值存入浏览器Cookies中。把用户信息存到Vuex然后再存储到LocalStroage中,然后跳转到下一个页面，根据后端接口的要求，只要不登录就不能访问的页面需要在前端每次跳转页面师判断Cookies中是否有token，没有就跳转到登录页，有就跳转到相应的页面，我们应该再每次发送post/get请求的时候应该加入token，常用方法再项目utils/service.js中添加全局拦截器，将token的值放入请求头中 后端判断请求头中有无token，有token，就拿到token并验证token是否过期，在这里过期会返回无效的token然后有个跳回登录页面重新登录并且清除本地用户的信息
62、说一下前端权限管理怎么实现答案戳这里：blog.csdn.net/weixin_4059…
63、说一下购物车的逻辑?//vue中购物车逻辑的实现1. 购物车信息用一个数组来存储，数组中保存对象，对象中有id和count属性2. 在vuex中state中添加一个数据 cartList 用来保存这个数组3. 由于商品详情页需要用到加入购物车功能，所以我们需要提供一个mutation, 用来将购物车信息加入 cartList中4. 加入购物车信息的时候，遵照如下规则： 如果购物车中已经有了该商品信息，则数量累加，如果没有该商品信息，则新增一个对象5. 在商品详情页，点击加入购物车按钮的时候，调用vuex提供的addToCart这个mutation将当前的商品信息 （id count）传给addTocart this.$store.commit("addToCart", {id: , count：})// js中购物车逻辑的实现1.商品页点击“加入购物车”按钮，触发事件2.事件调用购物车“增加商品”的Js程序（函数、对象方法）3.向Js程序传递传递“商品id”、“商品数量”等数据4.存储“商品id”、“商品数量”到浏览器的localStorage中**展示购物车中的商品******1.打开购物车页面2.从localStorage中取出“商品Id”、“商品数量”等信息。3.调用服务器端“获得商品详情”的接口得到购物车中的商品信息（参数为商品Id）4.将获得的商品信息显示在购物车页面。**完成购物车中商品的购买******1.用户对购物车中的商品完成购买流程，产生购物订单2.清除localStorage中存储的已经购买的商品信息备注1：购物车中商品存储的数据除了“商品id”、“商品数量”之外，根据产品要求还可以有其他的信息，例如完整的商品详情（这样就不用掉服务器接口获得详情了）、购物车商品的过期时间，超过时间的购物车商品在下次打开网站或者购物车页面时被清除。备注2：购物车商品除了存储在localStorage中，根据产品的需求不同，也可以存储在sessionStorage、cookie、session中，或者直接向服务器接口发起请求存储在服务器上。何种情况使用哪种方式存储、有啥区别请自己分析。64、说一下HTTP和HTTPS协议的区别?1、HTTPS协议需要CA证书,费用较高;而HTTP协议不需要2、HTTP协议是超文本传输协议,信息是明文传输的,HTTPS则是具有安全性的SSL加密传输协议;3、使用不同的连接方式,端口也不同,HTTP协议端口是80,HTTPS协议端口是443;4、HTTP协议连接很简单,是无状态的;HTTPS协议是具有SSL和HTTP协议构建的可进行加密传输、身份认证的网络协议,比HTTP更加安全65、说一下常见的HTTP状态码?说一下状态码是302和304是什么意思？你在项目中出现过么？你是怎么解决的？ <!-- 状态码：由3位数字组成，第一个数字定义了响应的类别 --> <!-- 1xx：指示消息,表示请求已接收，继续处理 --> <!-- 2xx：成功,表示请求已被成功接收，处理 --> <!-- 200 OK：客户端请求成功 204 No Content：无内容。服务器成功处理，但未返回内容。一般用在只是客户端向服务器发送信息，而服务器不用向客户端返回什么信息的情况。不会刷新页面。 206 Partial Content：服务器已经完成了部分GET请求（客户端进行了范围请求）。响应报文中包含Content-Range指定范围的实体内容 --> <!-- 3xx 重定向 --> <!-- 301 Moved Permanently：永久重定向，表示请求的资源已经永久的搬到了其他位置。 302 Found：临时重定向，表示请求的资源临时搬到了其他位置 303 See Other：临时重定向，应使用GET定向获取请求资源。303功能与302一样，区别只是303明确客户端应该使用GET访问 307 Temporary Redirect：临时重定向，和302有着相同含义。POST不会变成GET 304 Not Modified：表示客户端发送附带条件的请求（GET方法请求报文中的IF…）时，条件不满足。返回304时，不包含任何响应主体。虽然304被划分在3XX，但和重定向一毛钱关系都没有 --> <!-- 4xx：客户端错误 --> <!-- 400 Bad Request：客户端请求有语法错误，服务器无法理解。 401 Unauthorized：请求未经授权，这个状态代码必须和WWW-Authenticate报头域一起使用。 403 Forbidden：服务器收到请求，但是拒绝提供服务 404 Not Found：请求资源不存在。比如，输入了错误的url 415 Unsupported media type：不支持的媒体类型 --> <!-- 5xx：服务器端错误，服务器未能实现合法的请求。 --> <!-- 500 Internal Server Error：服务器发生不可预期的错误。 503 Server Unavailable：服务器当前不能处理客户端的请求，一段时间后可能恢复正常， -->66、说一下常见的git操作git branch 查看本地所有分支git status 查看当前状态 git commit 提交 git branch -a 查看所有的分支git branch -r 查看远程所有分支git commit -am "init" 提交并且加注释 git remote add origin git@192.168.1.119:ndshowgit push origin master 将文件给推到服务器上 git remote show origin 显示远程库origin里的资源 git push origin master:developgit push origin master:hb-dev 将本地库与服务器上的库进行关联 git checkout --track origin/dev 切换到远程dev分支git branch -D master develop 删除本地库developgit checkout -b dev 建立一个新的本地分支devgit merge origin/dev 将分支dev与当前分支进行合并git checkout dev 切换到本地dev分支git remote show 查看远程库git add .git rm 文件名(包括路径) 从git中删除指定文件git clone git://github.com/schacon/grit.git 从服务器上将代码给拉下来git config --list 看所有用户git ls-files 看已经被提交的git rm
