1.v-if和v-show区别：

     v-if -->  创建、删除  (没有元素) 真正的条件渲染。切换开销较高

     v-show -->  显示、隐藏 （有元素） 控制的事display:none;和display:block;

     非常频繁的切换时用v-show,如果在运行是条件不太可能改变，则用v-if。

2.如何让css只在当前的组件中起作用：

      style中加一个scoped。

3.v-moudel的使用：

      实现数据双向绑定，在input或select或文本域配合value使用。

4.vue中的标签如何绑定事件：

      v-on:click  简写 @click  在移动端click有300ms延迟事件 可以引用一个fastClick文件

      import FastClick from 'fastclick'

      FaskClick.attach(document.body);

5.es6新增 Set 和Map

    Set。它类似于数组，但是成员的值都是唯一的，没有重复的值。

   Map值—值对应的关系。“键”的范围不限于字符串，各种类型的值（包括对象）都可以当作键

   Map 的键实际上是跟内存地址绑定的，只要内存地址不一样，就视为两个键

   如果 Map 的键是简单类型的值（数字、字符串、布尔值），则只要两个值严格相等，Map 将其视为一个键

6. 如何在created里操作DOM  NextTick是什么：

   NextTick

   $nextTick是在下次DOM更新循环结束后执行的延迟回调，在修改数据后使用$nextTick

   则可以在回调中获取更新后的DOM

   应用场景：需要在视图更新后，基于新的视图进行操作。

7.vue组建的data为什么必须是函数：

   如果是一个对象，那么由于对象本身属于引用类型，当我们修改其中一个属性时，会影响

   vue实例的数据。如果是函数那么每一个实例的data属性都是独立的 就不会互相影响了。

8.对keep-alive的理解：

   keep-alive是一个内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染dom

9.vue中key的作用：

   主要是为了高效的更新虚拟dom。

11.watch和computed差异：

   computed --> 计算属性。 是由data中的已知值得到一个新的值。性能不好，核心是别人变化会影响自己。

   watch --> 监听数据的变化。 监听data中的数据,它的变化影响别人。可以监控路由变化。

12.项目是打包了一个js文件，一个css文件还是多个文件：

   一个js文件，一个css文件。打包之前有可能会改代理的url和build的 assetsPubblicPaths:'./'

13.vue组件之间的传值：

   父传子 --> 父组件：<Herader :msg='msg'></Header>

   子组件：props:['msg']或props:{msg:数据类型}

   子传父 --> 子组件：this.$emit('自定义事件名称'，要传的数据)

   父组件： <Herader @事件名=“getVal”></Header>

   methods:{getVal(msg){

       msg就是子组件传递的数据

   }

}

    兄弟之间传值：通过一个中转（bus）

    A兄弟传值：import bus from '@common/bus'

      bus.$emit("toFooter",this.msg);

   B兄弟接收：import bus from '@common/bus'

        bus.$on('toFooter',(data)=>{//data就是this,msg数   据})

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

src

    assets --> 静态资源（图片、js、css）

    components --> 非路由组件

    views --> 路由组件

    router --> 路由配置

    store --> vuex(仓库)

    App.vue --> 挂载的第一个组件

    main.js --> 全局的文件

15.vue生命周期的理解：

   vue从初始化到销毁的过程

   beforeCreat 创建前，刚执行new的操作，其他什么都没做

   created 创建后，属性和方法挂在到了实例上

   beforeMount 挂载前，找到了el或mount对应的节点范围，但是数据还没替换

   mounted 挂载后，vue范围内的变量会被替换成data里面对应的数据值

   beforeUpdate 数据更新前

   updated 数据更新后

   beforeDestroy 销毁前

   destroyed 销毁后

16.call和apply区别：

都是改变this指向。call参数是一个一个传递，apply是把所有参数组成一个数组传递。call性能好一点

尤其是传递给函数参数超过3个的时候

17.箭头函数和普通函数区别：

（1）箭头函数语法比普通函数简洁

（2）箭头函数没有自己的this，它里面的this属于函数的上下文中的this(使用任何方法都无法改变this指向)

对箭头函数的了解：

语法比较简单

没有this指向和arguments 如果有就是来自父级作用域的

18.闭包理解：

内部函数总是可以访问其所在的外部函数中声明的参数和变量，即使在其外部函数被返回（寿命终结）了之后。

19.vue常见指令和用法：

v-show和v-if:控制元素显示和隐藏（一个是创建和销毁一个是控制元素的display）

v-on:绑定事件（简写如：@click）

v-for:列表循环

v-model:数据双向绑定

v-html和v-text: 一个用于输出html一个用于输出纯文本 （v-text:简写{{}}）

20.$route和$roter区别：

$route是“路由信息对象”，包括path，params，hash，query，fullPath，matched，name等路由信息参数。

而$router是“路由实例”对象包括了路由的跳转方法，钩子函数等

21.link和import区别:

link是HTML方式， @import是CSS方式

                link最大限度支持并行下载，@import过多嵌套导致串行下载

                link可以通过rel=”alternate stylesheet”指定候选样式

                浏览器对link支持早于@import，可以使用@import对老浏览器隐藏样式

                @import必须在样式规则之前，可以在css文件中引用其他文件

                总体来说：link优于@import

23.for…in 和for…of有什么区别

for ...in循环的是key，for...of循环的是value。

for...of适用于遍历数组、字符串、map、set等，但是不能遍历对象

24.cookie,localstorege和sessionstrorage区别：

Cookie：一般由服务器生成，可设置失效时间。如果在浏览器端生成Cookie，默认是关闭浏览器后失效，4K左右

每次都会携带在HTTP头中，如果使用cookie保存过多数据会带来性能问题，需要程序员自己封装，源生的Cookie接口不友好

localStorage：除非被清除，否则永久保存，一般为5MB，仅在客户端（即浏览器）中保存，不参与和服务器的通信，

源生接口可以接受，亦可再次封装来对Object和Array有更好支 持

sessionStorage：仅在当前会话下有效，关闭页面或浏览器后被清除，一般为5MB，仅在客户端（即浏览器）中保存，

不参与和服务器的通信，源生接口可以接受，亦可再次封装来 对Object和Array有更好的支持

25.em,rem,px区别：

px:固定大小的单位,做不到自适应的效果。

em:相对长度单位,em是相对于父级元素的单位，会随父级元素的属性（font-size或其它属性）变化而变化

rem:只相对于根目录，即HTML元素。所以只要在html标签上设置字体大小，文档中的字体大小都会以此为参照标准，

一般用于自适应布局。1em = 1rem = 16 px

26.let,const,var区别:

let:let 声明变量，块作用域，后面不能覆盖之前声明的值,不能变量提升

const:const 声明常量，后面不能修改

var:var 声明变量，函数作用域，后面能覆盖之前声明的值,可以变量提升

27.undefined和not defined区别：

undefined：不明确的  表示是javascript中的一种数据类型，当被定义的变量没有被赋值或者某个被调用的函数没有定义

返回值时候会产生。

not defined：未定义,没有定义,无法定义  是一种语法错误，表示xx变量没有被定义。

28.MVVM和MVC模式区别：

相同点：其中M指的是model，V指的是view

不同点：这两种架构中，不同的只是MV之间的纽带部分。

MVC模式：用户操作> View (负责接受用户的输入操作)>Controller（业务逻辑处理） >Model（数据持久化）>View（

将结果通过View反馈给用户）

缺点：1.所有业务逻辑都在Controller里操作，逻辑复杂且不利于维护，

　　　　　2.大量的DOM 操作使页面渲染性能降低，加载速度变慢，影响用户体验。

　　　　    3.当 Model 频繁发生变化，需要主动更新到View ；当用户的操作导致Model发生变化，

同样需要将变化的数据同步到Model中， 这样的工作不仅繁琐，而且很难维护复杂多变的 数据状态。

View 和 Model 之间并没有直接的联系，而是通过ViewModel进行交互。ViewModel 通

过双向数据绑定把 View 层和 Model 层连接了起来，而View 和 Model 之间的同步工作完

全是自动的，无需人为干涉，因此开发者只需关注业务逻辑，不需要手动操作DOM, 不需要

关注数据状态的同步问题，复杂的数据状态维护完全由 MVVM 来统一管理。

29.暂时性死区：

在代码块内，使用let命令声明变量之前，该变量都是不可用的。这在语法上，称为“暂时性死区”（temporal dead zone，

简称TDZ）。

30.页面跳转怎么传值：

1.<router-link :to="{path:'/test',query: {userid: id}}">跳转</router-link>

接收：var id = this.$route.query.userid

2.this.$router.push({path:'/selectCate',query:{userid:id}});

接收：var id = this.$route.query.userid;

3.this.$router.push({name:'selectCate',params:{userid:id}});

接收：var id = this.$route.params.userid;

query和param区别：1.引入路由方式不同 param->name  query->path

2.取值方式不同

3.浏览器地址栏 显示不同  query相当于get请求，参数会拼接在 url上。param相当于post请求

4.param传参刷新页面后无效。query刷新后也有效。

31.get和post区别：

get:向服务器上发送数据，参数拼接在url后所以不安全，传参长度有限制，一般用于查询。

post:从服务器上拿数据，传参长度没有限制，安全。一般用于修改和保存。

32.vue中怎么写正则校验：

基于elementui: 表单标签中绑定rules属性，需要校验字段名称中添加prop，data（）{}中 验证

33.setTimeOut和setInterval的区别

setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式

setInterval()则是在每隔指定的毫秒数循环调用函数或表达式，直到clearInterval把它清除

也就是说setTimeout()只执行一次，setInterval()可以执行多次。两个函数的参数也相同，

第一个参数是要执行的code或句柄，第二个是延迟的毫秒数。

34.jq对象怎么转化为js对象：

var $v =$("#v") ; //jQuery对象

var v=$v[0]; //js对象

35、vue-cli 2.0和3.0

使用的3.0

首先很鲜明的一点，vue-cli 3.0的创建方式和vue-cli 2.0不同，这是因为vue-cli 3.0是构建在 webpack 和 webpack-dev-server 之上的，可以理解更高一级于2.0，并具备有新的配置和功能。

vue-cli 3.0的项目目录结构也不同于vue-cli 2.0，3.0摈弃了 config 、 build 、 static 目录，新增了 public 目录，将根目录下的 index.html 放置在 public 目录下。

新增 webpack 的配置文件 vue.config.js ，可以在该文件中进行webpack的相关配置，例如 loader、开发环境等等。

新增 .browserslistrc 文件，指定了项目的目标浏览器的范围，用来确定需要转译的 JavaScript 特性和需要添加的 CSS 浏览器前缀，可以理解为浏览器兼容。

新增 babel.config.js 替代原先的.babelrc，具备和原先.babelrc一样的作用。

36.Vuex 怎么用：

是一种状态管理模式

vuex 集中管理状态 在main.js引入store

vuex：状态管理  state => 存储基本数据 【getters】对state进行过滤加工。

mutations => 更改state数据状态的唯一方法。（mutations必须是同步函数）

actions 异步

state:数据源，存放数据，可以通过this.$store.state,value来获取定义的数据

Getters：相当于vue中的computed计算属性，Getters 可以用于监听、state中的值的变化，

返回计算后的结果  this.$store.getters.value 或...mapGetter([])获取

Mutations：如果需要修改store中的值唯一的方法就是提交mutation来修改，只能执行同步操作。

              用this.$store.commit()或...mapMutations([])来获取mutations中的方法

Actions：执行异步操作。不能直接修改state中的数据，必须通过context.commit()来触发某个mutations中的方法。

用this.$store.dispatch()或...mapActions([])来触发actions中的方法

37.怎么阻止事件冒泡：

event.stopPropagation() 阻止事件冒泡

event.preventDefault()  阻止默认行为

1.vue优点：轻量级框架：只关注视图层 双向数据绑定 组件化 单页面应用（SPA），

2.keep-alive 是 Vue 内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染

声明周期:页面进入的时候activeted 页面退出的时候：deactivated 

2.0后 keep-alive新加入了两个属性: include(包含的组件缓存) 与 exclude(排除的组件不缓存，优先级大于include) 。

3.$nextTick这个回调，在created（）里操作dom 不会更新渲染 让修改后的data值渲染更新到dom元素之后在获取

4.data必须以函数的形式存在，不可以是对象。

写成对象形式，就是所有的组件实例共用了一个data，这样改一个全都改了。

组件共享 data 属性，当 data 的值是同一个引用类型的值时，改变其中一个会影响其他 函数rerun一个新对象不会影响

5.关于VUE双向数据绑定，其核心是 Object.defineProperty()方法数据劫持各个属性的set get 达到监听数据变动的目的

发送给订阅者第一个参数：var obj={}定义属性的对象obj。//第二个参数：要定义或修改的属性

的名称。//第三个参数：具体改变的方法。

6.动态路由在router目录下的index.js文件中，对path属性加上/:id。 使用router对象的params.id。

vue-router不刷新页面。

第一种：是全局导航钩子：router.beforeEach(to:即将进入的路由对象,from：离开的路由,next：)，作用：跳转前进行判断拦截。

第二种：组件内的钩子 第三种：单独路由独享组件

$toute 是路由信息对象，包括path  params query name 等路由信息参数  $router 是路由实例，对象包括了路由的跳转方法，

钩子函数等

10.watch和computed区别

computed支持缓存，只有依赖数据发生改变，才会重新进行计算 不支持异步

watch 不支持缓存 数据变，直接会触发相应的操作 支持异步

11.表单验证 from (data 里写数据对象、校验规则对象  绑定表单 prop字段名 -：rules 绑定规则

-validator自定义校验

12.处理token过期

通过响应拦截，如果响应错误拦截，是401 ，判断其存在不存在token和新的token，

请求接口，获取token,token 放到共享数据或本地存储的位置 ,再将其错误对象返回从新执行

14.hash 地址 加# 虽然出现在 URL 中，但不会被包括在 HTTP 请求中，对后端完全没有影响，

因此改变 hash 不会重新加载页面。但是在history下，你可以自由的修改path，当刷新时，

如果服务器中没有相应的响应或者资源，则会刷新出来404页面

15、Vue.$set是干什么的

Vue 双向数据绑定时，属性必须要在data对象上存在时才是响应式的，如果要给对象添加新的属性，

此时新属性不是响应式的，不会触发视图更新，这时要用到vm.$set或者vue.set（三个参数1、要修改的对象，

2、属性 3、属性值）返回已经修改的值

17、Promise 异步处理函数 有两个参数 一个是成功的回调（resolve）并将异步操作的结果，

作为参数传递出去  一个是失败的回调（reject）在异步操作失败时调用，并将异步操作报出的错误，作为参数传递出去 

Promise 是 ES6 新增的语法，解决了回调地狱的问题。可以把 Promise看成一个状态机。初始是 pending 状态，

可以通过函数 resolve 和 reject，将状态转变为 resolved 或者 rejected 状态，状态一旦改变就不能再次变化。

then 函数会返回一个 Promise 实例，并且该返回值是一个新的实例而不是之前的实例。

因为 Promise 规范规定除了 pending 状态，其他状态是不可以改变的，如果返回的是一个相同实例的话，

多个 then 调用就失去意义了。 对于 then 来说，本质上可以把它看成是 flatMap

18、Vue3 将使用 ES6的Proxy 作为其观察者机制，取代之前使用的Object.defineProperty。

Object 只能对对象属性劫持 ，属性遍历 如果属性也是对象就要进行深度遍历 比较麻烦  proxy 有13种拦截

除了劫持set和get 还可以劫持很多  new Proxy(target, handler); target 代表需要添加代理的对象，

handler 用来自定义对象中的操作

19、vue loader webpack 打包时 处理资源路径 不是webpack自带的是vue里的

webpack打包原bai理是根据文件间的依赖关系对其进行静态分du析，然后将这些模块按指定zhi规则生成静态资源，

当dao webpack 处理程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，

然后将所有这些模块打包成一个或多个 bundle。webpack有两种组织模块的依赖方式，同步、异步。异步依赖将作为分割点，

形成一个新的块；在优化了依赖树之后，每一个异步区块都将作为一个文件被打包。webpack有一个智能解析器，

几乎可以处理任何第三方库。无论它们的模块形式是CommonJS、AMD还是普通的JS文件；甚至在加载依赖的时候，

允许使用动态表require("、/templates/"+name+"、jade")。

8、全局定义指令：在vue对象的directive方法里面有两个参数，一个是指令名称，另外一个是函数。

组件内定义指令：directives

9.v-cli如何解决跨域cors 后台加请求头  jsonp

vue如何兼容ie 安装插件 babel=polyfill

加载页面闪烁问题  v-clock

axios优缺点：

axios是通过Promise实现对ajax技术的一种封装 自动转换JSON数据

axios的回调函数，.then为请求成功的回调函数，而.catch为请求失败的回调函数

优点：

1.从node.js创建http请求

2.支持Promise API

3.客户端防止CSRF（网站恶意利用）

4.提供了一些并发请求的接口

跨域解决 协议域名端口

1.cors 后端设置请求头 前段不需要  如果带cooiek 前后端都需要

2.jsonp 动态创建script标签 通过标签的src属性 传参一个回调函数名给后端 回调执行函数  只能实现get一种请求

3.document.domain+iframe 请求 仅限主域相同，子域不同的跨域应用场景

    两个页面都通过js强制设置document.domain为基础主域，就实现了同域。

4.location.hash+iframe跨域  a欲与b跨域相互通信，通过中间页c来实现。 三个页面，

    不同域之间利用iframe的location.hash传值，相同域之间直接js访问来通信。

Nginx

Nginx是一个HTTP服务器，可以将服务器上的静态文件（如HTML、图片）通过HTTP协议展现给客户端

反向代理服务器:

vue 和 react 区别 

Vue使用的是可变数据，而React更强调数据的不可变

vue 双向绑定 React一直不支持双向绑定，提倡的是单向数据流

模板的语法不同，React是通过JSX渲染模板。而Vue是通过一种拓展的HTML语法进行渲染

封装组件

对外暴露 prop solt  $emit  等

谈谈eval的理解？

答：这个一个完整的js解释器，把代码写进去他会帮忙执行，正是这样它执行效率特别慢，要编译一次再执行一次，eval声明的变量不会变量提升

10、const 定义的数组可以改变吗？

可以const定义的基本数据类型不可以改变，复杂数据类型可以改变，通过属性来修改

11、当生成vue实例后，当再次给数据赋值时，有时候并不会自动更新到视图上去

使用Vue.set() 和 this.$set()  这两个 api 的实现原理基本一模一样，都是使用了set函数。

set 函数是从 …/observer/index 文件中导出的。

区别在于 Vue.set( ) 是将 set 函数绑定在 Vue 构造函数上，this.$set() 是将 set 函数绑定在 Vue原型上

12、函数的节流和防抖

函数节流是指一定时间内js方法只跑一次

函数防抖是指频繁触发的情况下，只有足够的空闲时间，才执行代码一次。

函数防抖的要点，也是需要一个setTimeout来辅助实现。延迟执行需要跑的代码。 ?

如果方法多次触发，则把上次记录的延迟执行代码用clearTimeout清掉，重新开始。

如果计时完毕，没有方法进来访问触发，则执行代码。

13、深拷贝和浅拷贝

浅拷贝是拷贝对象的属性，不存在递归 相当于拷贝了一个地址，原对象改变 新的也会跟着改变

深拷贝 就是开辟了一个新空间 把对象包括属性递归拷贝过去  不会影响相互数

14、原型链

当一个对象调用自身不存在的属性或者方法时，就会去自己的proto 的prototype对象去找 如果没找到

就去Protype的 原型proto 的prototype去找  以此类推 一直找到undefined为止

原理题

Vue-router 原理：

原理核心就是 更新视图但不重新请求页面。

vue-router实现单页面路由跳转，提供了三种方式：hash模式、history模式、abstract模式，

根据mode参数来决定采用哪一种方式

v-model原理：

利用v-model绑定数据后 v-bind:绑定响应式数据，触发 input 事件 并传递数据 通过监听当前表单值的改变

vue响应式原理：

是通过 数据劫持 结合 发布订阅模式的方式来实现的，

也就是说数据和视图同步，数据发生变化，视图跟着变化，视图变化，数据也随之发生改变；

其核心是 Object.defineProperty()方法数据劫持各个属性的set get 达到监听数据变动的目的

发送给订阅者第一个参数：var obj={}定义属性的对象obj。//第二个参数：要定义或修改的属性

的名称。//第三个参数：具体改变的方法。

Async和await的原理：

async 函数返回一个 Promise 对象，当函数执行的时候，一旦遇到 await 就会先返回，等到触发的异步操作完成

再接着执行函数体内后面的语句

async 是generator的语法糖 generator函数使用function*除了 return 还可以用yield多次返回  yield就相当于await

jsonp的跨域原理：

客户端向服务端发送请求，传递过去一个函数，服务端接受到客户端发送的请求，拿到传过来的函数，

准备好返回的数据，返回给客户端一个字符串，这个字符串就是客户端发过来的函数名+JSON格式的数据，

客户端接收到。

all（）方法的原理：

all（）方法：promise的all方法提供并执行异步操作的能力，并且在所有异步操作执行完成才执行回调

Promise.all()方法用于将多个 Promise 实例，包装成一个新的 Promise 实例。该方法提供了并行执行异步操作的能力，

并且在所有异步操作执行完并且执行结果都是成功的时候才执行回调。

小程序

原生小程序绑定事件用bind catch

页面跳转wx.navigateTo 和 wx.redirectTo 不允许跳转到 tab 所包含的页面=switchTab

小程序的双向绑定 this.setdata

下拉刷新首先在全局 config 中的 window 配置 enablePullDownRefresh onPullDownRefresh

小程序请求 将所有的接口放在统一的js文件中并导出

小程序参数传值 1/给html元素添加 data-属性 通过e.currentTarget.dataset

                        2/设置id 的方法标识来传值通过e.currentTarget.id

                        3/在navigator中添加参数传值

小程序异步请求 用promise 两个参数 wx.login（）

小程序原理 采用JavaScript、WXML、WXSS三种技术进行开发，

· project.config.json 项目配置文件，用得最多的就是配置是否开启https校验；

· App.js 设置一些全局的基础数据等；

· App.json 底部tab, 标题栏和路由等设置；

· App.wxss 公共样式，引入iconfont等；

· pages 里面包含一个个具体的页面；

· index.json (配置当前页面标题和引入组件等)；

index.wxml (页面结构)；

index.wxss (页面样式表)；

· index.js (页面的逻辑，请求和数据处理等)；

登录：小程序**  向  微信服务器**  获取小程序的 code

自己的公司服务器（小程序appID）  向 微信服务器  获取 code；（

先后必须是同样的appID） 后台写的代码

用户信息 + code 从  微信小程序 ----->  **自己的服务器 **

请求数据获取token；

购物车 有token：生成订单，进入订单页面 无token：登录页面，

获取token后，返回购物车页面；

常见的攻击

XSS脚本攻击  CSRF 跨站点伪造请求

解决

XXS攻击是指攻击者在网站上注入恶意的客户端代码，通过恶意脚本对客户端网页进行篡改

XXS对于用户的输入要进行检查、过滤和转义 ，服务端输出使用编码或转义

CSRF是因为攻击者可以完全伪造用户的请求，该请求中所有的用户验证信息都是存在于 Cookie 中

CSRF 1用户请求输入验证码 2 可以在 HTTP 请求中以参数的形式加入一个随机产生的 token

前端性能问题

http层面一般采用DNS Prefetch 一种DNS 预解析技术，当你浏览网页时，浏览器会在加载网页时对网页中的域名

进行解析缓存，这样在你单击当前网页中的连接时就无需进行DNS的解析，减少用户等待时间，提高用户体验。

减少http的请求次数，将多个请求合并成同一个，减少http的开销

图片优化 使用精灵图类

css js合并

组件复用

使用CDN（内容发布网络）是一组分布在多个不同地理位置的Web服务器，用于更加有效地向用户发布内容。

在优化性能时，向特定用户发布内容的服务器的选择基于对网络慕课拥堵的测量。

例如，CDN可能选择网络阶跃数最小的服务器，或者具有最短响应时间的服务器。

CDN还可以进行数据备份、扩展存储能力，进行缓存，同时有助于缓和Web流量峰值压力。

避免重定向  重定向是用于将用户从一个URL重新路由到另一个URL。