Vue面试总结

1.路由导航钩子
全局导航钩子:前置守卫(beforeeach)  (后置钩子)aftereach
组件导航钩子:beforeRouterEnter beforeRouterUpdata  beforeRouterLeave
单独路由钩子:beforeEnter
导航钩子参数（to(去往的路由),from（离开的路由）,next（进入下一个路由，不写则被拦截））

2.vue声明周期
创建前/后(beforeCreate/Create):在beforeCreate阶段,vue的数据对象data和el挂载还没初始化，在create阶段，vue的数据对象初始化完毕,但是el挂载还没
载入前/后(beforeMounted/mounted):在beforeMounted阶段时；vue的数据对象和el挂载都初始化完成，但是还是挂载在之前为虚拟的dom节点上，data.message未进行替换，
在mounted阶段时,vue实例el挂载完成,data.message成功渲染；
更新前/后(beforeUpdata/Updata):data数据对象变化时，会触发beforeUpdata和updata方法
销毁(destory):在执行destory方法后，data数据变化已经不能触发生命周期函数啦，说明vue实例已经解除事件监听和dom的绑定,但是dom结构依然存在；

3.vuex
vuex是vue的一个数据管理,包括state，mutations，actions
mutations是同步操作
vue页面中访问state数据是采用{{$store.state.count}和引入import {mapstate} from 'vuex'  然后computed：{...mapstate(['count'])} 然后在页面中用{{count}}
vuex变更数据不能直接操作store中的数据,只能通过mutation变更store数据   在mutations中添加方法来变更数据，然后在页面中通过this.$store.commit('add)触发mutations中的函数（在调用commit触发mutations时可以携带参数）
触发mutations的第二种方法import {mapmutations} from vuex  然后...mapMutations(['sub'])  然后在方法中调用this.sub()
actions是异步操作，方法里面有个context参数，  通过触发context.commit触发mutations的方法来改变state里面的数据改变
在页面methods方法中通过this.$store.dispatch('addAsync')来触发actions中的方法,而actions中的方法通过commit触发mutations中的方法从而改变state的值。
触发actions的第二种方法import {mapActions} from ‘vuex’ 然后...mapActions(['addAsync'])   然后在方法中用this.addAsync()触发
getters用于store中的数据进行加工处理形成新的数据 getter里面定义一个函数有一个state值  第一种触发方式为this.$store.getter.方法名  
第二种触发方式是import  {mapgetters}  from vuex  然后...mapgetters(['方法'])   然后直接在值里面{{方法名}}

4.vue-Router路由拦截器
//注册一个全局前置守卫,确保要调用 next 方法，否则钩子就不会被 resolved
router.beforeEach((to, from, next) => {
  //路由切换时，如果没有就添加，有就跳过执行，添加固定参数
  if (!to.query.addressCode) {
      //准备一个跳转的query对象
      let query = to.query
      query.addressCode = tool.getAddressCode()；//是一个封装好的获取addressCode的方法
      alert.eduToast('没'+query.addressCode,6000);//调试代码
      next({
        path: to.path,
        query: query
      })
  } else {
      if (to.path !== window.location.pathname) {
        // 此处不可使用location.replace
        　　window.location.assign(to.fullPath)
        } else {
        　　next()
        }
      alert.eduToast('有',6000);//调试代码
  }
})

5.vue的nextclick
Vue 实现响应式并不是数据发生变化之后 DOM 立即变化，而是按一定的策略进行 DOM 的更新。
就是在vue生命周期created()创建初始，一定要把对dom的操作放在Vue.nextTick()中
因为vue在created阶段并没有任何对页面的渲染，这时候进行的操作没有任何作用，所以需要Vue.nextTick()方法等待vue的dom渲染完成之后渲染

6.封装axios
自己封装  哈哈哈

7.数据传递
vue中父组件向子组件传值是通过props传值
vue中子组件传父组件是通过$emit传值
vue兄弟之间传值是通过eventbus总线传值
1、兄弟之间传递数据需要借助于事件车，通过事件车的方式传递数据

2、创建一个Vue的实例，让各个兄弟共用同一个事件机制。

3、传递数据方，通过一个事件触发bus.$emit(方法名，传递的数据)。

4、接收数据方，通过mounted(){}触发bus.$on(方法名，function(接收数据的参数){用该组件的数据接收传递过来的数据})，此时函数中的this已经发生了改变，可以使用箭头函数。

8.jsoup
解决跨域
 $.ajax({
            url: "http://localhost:9090/student",
            type: "GET",
            dataType: "jsonp", //指定服务器返回的数据类型
            success: function (data) {           
               var result = JSON.stringify(data); //json对象转成字符串
                        $("#text").val(result);
                    }
        });

9.http和https
http:是互联网上应用最为广泛的一种网络协议，是一个客户端和服务器端请求和应答的标准（TCP），用于从WWW服务器传输超文本到本地浏览器的传输协议，它可以使浏览器更加高效，使网络传输减少。
https:是以安全为目标的HTTP通道，简单讲是HTTP的安全版，即HTTP下加入SSL层，HTTPS的安全基础是SSL，因此加密的详细内容就需要SSL。
区别为:
1、https协议需要到ca申请证书，一般免费证书较少，因而需要一定费用。

2、http是超文本传输协议，信息是明文传输，https则是具有安全性的ssl加密传输协议。

3、http和https使用的是完全不同的连接方式，用的端口也不一样，前者是80，后者是443。

4、http的连接很简单，是无状态的；HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议，比http协议安全。

10.组件工程化
高内聚，低耦合，组件抽离，公共组件，页面组件，代码模块化

11.vue脚手架2.x和3.x的区别
部分命令发生了变化：
下载安装  npm install -g vue@cli
删除了vue list
创建项目   vue create
启动项目   npm run serve

默认项目目录结构也发生了变化：
移除了配置文件目录，config 和 build 文件夹
移除了 static 文件夹，新增 public 文件夹，并且 index.html 移动到 public 中
在 src 文件夹中新增了 views 文件夹，用于分类 视图组件 和 公共组件

配置
配置信息在根目录下 vue.config.js

12.数组常用方法（concat,splice，push）
concat：把两个或多个数组拼接，产生一个新的数组
slice:（从该位开始截取，截取到该位），不改变原数组，所以要返回该值。
join:传入一个字符串类型的数据，然后依次将数组每个数据连接起来(参数：separator 可选。指定要使用的分隔符。如果省略该参数，则使用逗号作为分隔符。)
toString:主要用于Array、Boolean、Date、Error、Function、Number等对象。转换成为字符串
pop(): 删除 arrayObject 的最后一个元素，把数组长度减 1，并且返回它删除的元素的值。如果数组已经为空，则 pop() 不改变数组，并返回 undefined 值。
push(): 可以接收任意数量的参数，把它们逐个添加到数组末尾，并返回修改后数组的长度。
reverse():用于颠倒数组中元素的顺序。
shift(): 数组的第一个元素从其中删除，并返回第一个元素的值,如果数组是空的，那么 shift() 方法将不进行任何操作.
unshift:将参数添加到原数组开头，并返回数组的长度
sort(): 默认为升序排列，如果想按照其他标准进行排序，sort()方法是可以传入一个函数，函数通过返回一个值来决定
splice(): splice() 方法向/从数组中添加/删除项目，然后返回被删除的项目。该方法会改变原始数组。
indexOf()：接收两个参数：要查找的项和（可选的）表示查找起点位置的索引。其中， 从数组的开头（位置 0）开始向后查找。(返回元素)
lastIndexOf：接收两个参数：要查找的项和（可选的）表示查找起点位置的索引。其中， 从数组的末尾开始向前查找（返回下标）

13.js字符串 (string)
1、slice（start,end）;
var test = ‘hello world’
test.slice(3,6)   
'lo '
2、substr（start，length）；
第一个参数为字符串开始的位置，第二个为截取的长度
var test = ‘hello world’
test.substr(3,6)   
'lo wor'
3、substring（start，end）
var test = ‘hello world’
test.slice(3,6)   
'lo '

14.浅拷贝和深拷贝的区别
浅拷贝只复制指向某个对象的指针, 而不是复制对象本身, 新旧对象还是共享同一块内存;
深拷贝会另外创造一个一摸一样的对象,新对象跟原对象不共享内存,修改新对象不会改到原对象 

15.基本数据类型和引用数据类型
基本数据类型是存储在栈中,引用数据类型存储在堆中
在函数中是按值传递，访问的话可以按值访问也可以按引用访问

16.原型和原型链
每一个构造函数的原型都是实例原型
构造函数实例化的原型等于构造函数的原型（实例原型）
每一个原型都有一个constructor指向构造函数

18.闭包以及应用场景
闭包:定义在一个函数内部的函数,并返回出这个函数
**闭包的最大用处有两个，一个是可以读取函数内部的变量，另一个就是让这些变量始终保持在内存中，**
**即闭包可以使得它诞生环境一直存在;**

19.垃圾回收机制
1.标记清除法
2.引用计数法

20.http状态码
200 - 请求成功
301 - 资源（网页等）被永久转移到其它URL
404 - 请求的资源（网页等）不存在
500 - 内部服务器错误

21,递归
函数内部自己调用自己  **递归必须要有判断条件，不加判断会死；**
function sum(n){
    if(n>1){
        return n + sum(n-1);
    }else{
        return 1; 
    }
}
var jieguo = sum(5);
console.log(jieguo);

22.结构赋值
let sth = {
    orderId: '123456',
    address: { city: 'HZ', street: 'XIHU' },
    prices: [10, 20, 30]
}

let {
    address: { street },
    prices: [, prices]
} = sth;
console.log(street, prices);

23.箭头函数
箭头函数完全修复了this的指向，this总是指向词法作用域，也就是外层调用者Person

24.promise方法
异步操作
var myFirstPromise = new Promise(function(resolve, reject){}
    //当异步代码执行成功时，我们才会调用resolve(...), 当异步代码失败时就会调用reject(...)

25.async和await
async放在函数前面表示是一个异步函数,返回为一个promise对象，可以使用then方法添加回调函数。当函数执行的时候，一旦遇到await就会先返回，等到异步操作完成，再接着执行函数体内后面的语句。
await的含义为等待。意思就是代码需要等待await后面的函数运行完并且有了返回结果之后，才继续执行下面的代码。这正是同步的效果。

理解async是一个异步函数，不会阻塞同进程函数执行，而在async函数中放置await表示    在执行async这个异步函数时,碰到await，他就先等一等  等到这个后面的promise对象执行完毕，得到resolve结果并返回，它才继续往下执行。

26.let const var的区别
let:let声明的变量只在当前的代码块中生效（块级作用域）,let没有变量提升,let块级变量解决i丢失的问题
const:const常量，在当前代码块中不能被更改
var:var在块级作用域中生效，但是大块级作用域不能访问小块

27.call  apply bind
call():函数名称.call(obj,arg1,arg2...argN);
apply():函数名称.apply(obj,[arg1,arg2...,argN]);
bind():`bind`方法用于将创建一个新的函数，且将新函数中的`this`绑定到具体的某个对象上,需要自己调用

28.vue.js两个核心
数据驱动,组件化系统