面试各种

1.vue中如何自定义指令：
当我们需要对普通的dom进行底层操作的时候，就需要使用自定义指令
指令内部包括五个生命周期函数：
bing（）：当指令绑定到dom元素上触发，只调用一次
inserted（）：当绑定了指令的该dom元素插入到父元素上触发（#app），但不保证父元素已经插入了dom文档
update（）：所在组件VNode更新时调用
componentUpdated：指令所在组件的VNode以及其字VNode全部更新后调用
unbind（）：指令与元素解绑是调用，只调用一次
除了udpdate与componentUpdated钩子函数之外，每个钩子函数都有el、binding、vnode三个参数，并且binding、vnode属性只读

 <div id="app">
      <h1 v-title="red">h1</h1>
      <h1 v-title="black">h1</h1>
    </div>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script>
      // 全局自定义指令
      const vm = new Vue({
        el: "#app",
        data: {
          red: "green",
          black: "blue"
        },
        directives: {
          title: {
            bind: function(el, binding, VNode) {
              // el：绑定的元素
              // binding,VNode只读
              console.log(el, binding , VNode);
              if (binding.value == "green") {
                el.style.color = binding.value;
              }
              el.style.color = binding.value;
            }
          }
        }
      });
    </script>

2.路由的模式有哪些：
分为hash模式（默认）与history模式
hash模式：地址栏的#符号，比如 http://www.ww.com/#wxt ，hash的值为#wxt，特点：hash虽然出现在url中，但是不会包含在http请求中，对后端没有影响，因此改变hash值不会重新加载页面
history模式：如果后端不进行任何处理，在dev阶段是正常的，但是打包之后，访问路径会返回404，因此要在服务端增加一个覆盖所有情况的候选资源，如果url匹配不到任何静态资源，则应该返回同一个indexl页面

3.全局守卫模式：
比如在项目中跳转到某个页面之前需要做一下验证
全局前置守卫：router.beforeEach（(to ， from , next) =>{}）：确认导航之前
全局解析守卫：router.beforeresolve（(to ， from，next) =>{}）：在导航被确认之前，同事在异步组件被解析之后调用
全局后置守卫：router.afterEach（(to ， from ， next) =>{}）
接收三个参数：
to：即将进入的路由对象
from：即将离开的路由
next：进行的回调

4.vuex的使用在项目的哪一部分使用最多，为什么：

	多个组件共享状态，并且需要对该data进行管理，可以用vuex
	非父子组件之间跨组件共享数据
	同一个数据在不同页面控制某个属性，且多个页面都能修改这个数据

5.插槽的使用场景，举例说明：
比如自己写的外卖app，头部是公共组件headerTop，当切换底部页面的时候，顶部的登录、搜索会随着底部切换而切换，所以就要使用到插槽。
在headerTop中使用slot ，并设置一个name属性为left or right，
在其他组件使用headerTop的时候，需要显示登录、搜索框，就给当前登录、搜索框添加slot属性，值为需要在对应插槽位置显示的name值就ok。



6.vue如何缓存一个页面，别的页面不受影响，如何看到缓存的数据：
在配置路由的时候设置元信息meta属性：meta:{keepAlive：true}
在组件中引入组件，用包裹

7.说出c3的新增属性，说出border-image的用途，在项目中使用场景:
border-radius
border-shadow：水平、垂直、模糊度、颜色
border-image
background:color、image、repeat（no-repeat、repeat-x、repeat-y）、position

8.说出es6的新特性，let、var的主要区别是什么：
不一样的变量声明：const、let
模板字符串：反引号${name} , ${age}
箭头函数：不需要function创建函数、省略return关键字
函数默认值：

// 箭头函数
[1,2,3].map(item => item > 1) // [2,3]

 在es5的时候，我们都这样传默认值
 function person (name){
 name = name || 'ww'
 }
 
// es6
function person（name = ‘default’）{
	console.log(name)
}

9.promise的涌入和传统的ajax区别是什么，解决了什么问题：
promise是表示一个异步操作的最终结果，避免ajax回调地狱，不然代码不够直观。
回调地狱：某个异步操作需要等待之前的异步操作完成，无论是回调还是事件都会陷入不断的嵌套。因为函数闭包特性，所以产生层级嵌套。
解决了什么问题：回调地狱
promise是一个构造函数，可以new Promise()得到一个promise实例，有两个函数，分别是resolve（成功后的回调函数），reject（失败后的回调函数），构造函数都有一个prototype属性，有一个.then（）方法。
如果异步执行成功了，需要在内部调用成功的回调函数reslove，把结果返回给调用者。
反之，需要在内部调用失败的回调函数reject，把结果返回给调用者

10.为什么vue做出来的项目是单应用页面，跟传统的有什么区别：
SPA：第一次请求就加载一个完整的页面，以后请求，只会加载数据，并渲染到对应的页面地方（用户体验好、加载速度快），因为只有一个页面，不存在页面发生跳转，我们就要根据hash值来切换组件。
MPA：多个独立的页面应用，每个页面都要自己加载公用资源，多页面切换，需要整页资源刷新。

11.项目里面的遇到最难的问题，如何解决：
12.弹性布局原理是什么，可以用什么方式实现，缺点是什么，em、rem区别是什么：
原理：可以根据屏幕尺寸或者浏览器窗口尺寸来自动调整页面中局部区域的显示方式
缺点：浏览器兼容性比较差，只能兼容到ie9及以上
flex容器的属性：
flex-direction：flex item排列的方向：row（从左到右）、row-reverse（从右到左）、column（从上到下）、colum-reverse（从下到上）
flex-wrap：flex item是否自动换行
flex-flow：上述两个的简写（默认：row nowrap）
justify-content：水平方向的对齐方式
align-items：垂直方向的对齐方式，可实现垂直居中
em、rem区别
rem：rem转换为px是取决于html元素的font-size，用根元素大小rem值
em：em转换为px是用em值使用em单位元素的font-size

13.项目结构，如何布局，说一下
14.前端优化：
使用CDN加速
减少http请求
尽可能的减少dom操作
使用图片懒加载
将js、css文件放在页面最底部
使用浏览器存储，本地存储
项目中采用按需加载
压缩图片
尽量使用css动画
iconfont代替图片

15.登录页面在哪一步添加token，为什么
第一次登录的时候，就调用后端的登录接口，发送用户名与密码
后端接收到请求，验证用户名与密码，验证成功的话，就返回给前端token
拿到token就存储到localStorage与vuex中，再进行路由跳转
前端每次跳转路由，就判断有无token，没有就跳转到登录页面，有就跳转组件
每次调用后端接口，都要在请求头中加token
后端判断请求头中有无token，有token就拿到token并且进行token验证，验证失败（比如token过期）就返回401，请求头中没有token返回401
如果前端拿到状态码401，就清除token，跳转到登录页面

16.vue如何追踪变化
当一个vue实例创建时，vue会遍历data选项的属性，采用的是数据劫持，结合发布与订阅者模式的方式，通过Object.definedProperty劫持各个属性的getter / setter ，在属性被访问和修改时通知变化。

17.单项绑定与双向绑定区别是什么
单向绑定：将model绑定到view，当我们用js代码更新到model时，view就会自动更新，因此我们不需要额外的dom操作，只需要进行model的操作就可以实现视图的联动更新。
双向绑定：将model有view互相绑定，既可以通过model更新view，也可以反之进行更新。

17.ajax返回的状态码
400：错误请求
401：请求授权失败
403：请求不允许
404：没有发现文件
412：一个或多个请求头字段在当前请求中错误
413：请求的资源大于服务器允许的大小
414：请求的资源URL长于服务器允许的长度
500：服务器产生内部错误
501：服务器不支持请求的函数
502：服务器暂时不可用
503：服务器过载

18.get、post的区别
get请求头可省略，在请求行中拼接数据，最大长度为2048；

 xhr.open('get' , './01-ajax-get.php?name = ' + txt)

	post请求需要请求头，请求会带上content-type高速服务器post过去的数据格式和url的参数数据一样，在请求主体中传送数据

xhr.setRequestHeader('content-type', 'application/x-	www-form-urlencoded'); 

xhr.send('name=' + cont + '&age = 18 '); 

	post发送的数据在请求体中，用户看不到，get发送的数据在地址栏中，用户能看到，不安全
	设计隐私数据的时候用post请求比较安全，发送大量数据的时候用post

19.build --report
会生成report.html可以看到项目哪些包占用比较大
比如moment时间插件，可以使用data-fns

20.gzip的原理是什么
原理：在一个文本文件中找出一些重复的字符串，临时替换他们，从而使整个文件变小，文件中代码的重复率越高，压缩效率就越高。