前端面试题

1.组件为什么是一个函数

组件中的data写成一个函数，数据以函数返回值形式定义，这样每复用一次组件，就会返回一份新的data，类似于给每个组件实例创建一个私有的数据空间，让各个组件实例维护各自的数据。而单纯的写成对象形式，就使得所有组件实例共用了一份data，就会造成一个变了全都会变的结果。

2.v-if和v-for的优先级

当v-if与v-for一起使用时，v-for具有比v-if更高的优先级

3.基本数据类型和引用数据类型

基本数据类型null,undefind,String,Number,Boolean和引用数据类型Object
Symbol属于基本数据类型
基本数据类型存储在栈中，引用数据类型存储在堆中；复制变量时不同

4.v-router和location.href的区别

vue-router使用pushState进行路由更新，静态跳转，页面不会重新加载；
location.href会触发浏览器，页面重新加载一次

5.http状态码

1xx: 通知/信息提示
1XX系列响应代码仅在与HTTP服务器沟通时使用。

2XX: 成功
2XX系列响应代码表明操作成功了

3XX: 重定向
3XX系列响应代码表明：客户端需要做些额外工作才能得到所需要的资源。

4XX: 客户端错误
这些响应代码表明客户端出现错误

5XX: 服务端错误
这些响应代码表明服务器端出现错误。

6.跨域

概念：
当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域

为什么会出现跨域问题：
出于浏览器的同源策略限制。同源策略（Sameoriginpolicy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。

7.call，apply，bind

1.都是用来改变函数的this对象的指向的。
2.第一个参数都是this要指向的对象。
3、都可以利用后续参数传参

call,apply调用会直接运行，bind会返回一个函数方法
apply第二个参数是数组

8.如何理解css盒模型

内容content+内边距padding+边框border+外边距margin
ie盒子模型和w3c标准盒子模型的区别：
IE盒模型的content包括border、padding、content
w3c标准盒子模型的content只包含content

9.class类

class Student extends Teacher{
    constructor(x,y,a){        
        super(x,y)  //继承，调用父类的constructor
        this.a=a;
    }
}

10.watch和computed

watch:
1.不支持缓存;当数据变化时，直接会触发相应的操作；
2,watch支持异步；
3.当一个属性发生变化时，需要执行对应的操作;是观察的动作
computed:
1.支持缓存，只有依赖数据发生改变，才会重新进行计算
2.computed不支持异步
3.computed受多个数据的影响;是计算值，

11.vue中的路由传参

<router-link to="/login?id=10">登录</router-link>
<router-link to="/login/10/zs">登录</router-link>
this.$router.push({
    path:"/login",
    params:{
        id:1
    }
})//路由跳转
this.$route.params.id //接收值

this.$router.push({
    path:"/login",
    query:{
        id:1
    }
})
this.$route.query.id

12.display:flex

容器属性
flex-deriction 
flex-wrap
flex-flow
justify-content
align-item
align-content
项目属性
order 数值越小排越前
flex-grow 放大比例 默认为0
flex-shrink 缩小比例 默认为1

13.生命周期

beforeCreate()
在实例初始化之后，数据观测和事件配置之前被调用，此时组件的选项对象还未创建，el 和 data 并未初始化，
因此无法访问methods， data， computed等上的方法和数据。

created()

beforeMount()
编译模板，把data里面的数据和模板生成html，完成了el和data 初始化，注意此时还没有挂在html到页面上。

mounted()
挂在完成，也就是模板中的HTML渲染到HTML页面中

beforeUpdate()
在数据更新之前被调用，发生在虚拟DOM重新渲染和打补丁之前，可以在该钩子中进一步地更改状态，不会触发附加地重渲染过程

updated()
在由于数据更改导致地虚拟DOM重新渲染和打补丁只会调用，调用时，组件DOM已经更新，所以可以执行依赖于DOM的操作

beforeDestroy()
在实例销毁之前调用，实例仍然完全可用，
1.这一步还可以用this来获取实例，
2.一般在这一步做一些重置的操作，比如清除掉组件中的定时器 和 监听的dom事件

destroyed()
在实例销毁之后调用，调用后，所以的事件监听器会被移出，所有的子实例也会被销毁，该钩子在服务器端渲染期间不被调用

14.seesionStorage,Cookie,locaStorage

	Cookie	sessionStorage	localSrorage
生命周期	可自己设置; 默认到浏览器关闭	浏览器关闭	除非自行删除或清除缓存，否则一直都存在
大小	4k	5MB	5Mb
与服务器通信	http头中	不参与服务器通信	仅在客户端
易用性	蹩脚的接口，一般自己去封装	接口可以直接使用	接口可以直接使用
作用域	有同源窗口中都是共享的	不在不同的浏览器窗口中共享，即使是同一个页面	有同源窗口中都是共享的

1.存储大小
cookie最大值为4k,sessionStorage和localStorage大小在5M
2.有效时间
cookie在设置的有效期内一直有效，sessionStorage在浏览器关闭后会自动清除，localStorage如果不手动删除则一直有效
3.数据与服务器的通信
cookie数据会自动传递到服务器端，服务器也可以写cookie到客户端,sessionStorage和localStorage不会自动把数据上传到服务器，仅在本地存储

15.vuex

成员列表
1.state存放状态

2.mutations state成员操作
mutations是操作state数据的方法的集合，比如对该数据的修改、增加、删除等等。
mutations方法都有默认的形参：state,payload(该方法在被调用时传递参数使用的)
Mutation传值:
this.$store.commit('edit',{age:15,sex:'男'})  //调用mutation下面的edit()
this.$store.commit({
    type:'edit',
    payload:{
        age:15,
        sex:'男'
    }
})
edit(state,payload){
    state.name = 'jack'
    console.log(payload) // 15或{age:15,sex:'男'}
}
对state对象中添加一个age成员
Vue.set(state,"age",15)
Vue.delete 删除成员
Vue.delete(state,'age')

3.getters 加工state成员给外界
默认的两个参数
state 当前VueX对象中的状态对象

getters 当前getters对象，用于将getters下的其他getter拿来用
getters:{
    nameInfo(state){
        return "姓名:"+state.name
    },
    fullInfo(state,getters){
        return getters.nameInfo+'年龄:'+state.age
    }  
}
组件中调用：
this.$store.getters.fullInfo

4.actions 异步操作
由于直接在mutation方法中进行异步操作，将会引起数据失效。所以提供了Actions来专门进行异步操作，最终提交mutation方法。
两个参数：
context 上下文(相当于箭头函数中的this)对象
payload 挂载参数
actions:{
   aEdit(context,payload){
        setTimeout(()=>{
            context.commit('edit',payload)
        },2000)
    }
}
组件中调用：
this.$store.dispatch('aEdit',{age:15})

5.modules 模块化状态管理
当项目庞大，状态非常多时，可以采用模块化管理模式
每个模块拥有自己的 state、mutation、action、getter

16.active-class

作用：
active-class是vue-router模块的router-link组件中的属性；用来做选中样式的切换
使用：
1.直接在路由js文件中配置linkActiveClass
new Router({
  linkActiveClass: 'active'
})
2.直接在router-link中写入active-class
 <router-link to="/home" class="menu-home" active-class="active">首页</router-link>
  //如果使用第二种方法添加active-class，跳转到页面后，两个router-link始终都会有选中样式
  //解决办法是在该标签内添加一个exact属性

17.vue-router有几种导航钩子

第一种：是全局导航钩子：router.beforeEach(to,from,next)，作用：跳转前进行判断拦截。
//挂载路由导航守卫
router.beforeEach((to, from, next) => {
  if (to.path === '/login') {
    //next()表示放行， next("path")表示强制跳转
    return next()
  }
  const tokenStr = window.sessionStorage.getItem('token')
  // console.log(tokenStr);
  if (!tokenStr) {
    return next('/login')
  }
  //放行
  next()
})
全局钩子有 beforeEach、beforeResolve(Vue2.5.0新增的)、 afterEach。

第二种：组件内的钩子
//和data、method平级的方法
beforeRouteLeave(to, from, next) {
    // ....
    next()
},
beforeRouteEnter(to, from, next) {
    // ....
    next()
},
beforeRouteUpdate(to, from, next) {
    // ....
    next()
},
第三种：路由独享钩子
const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      beforeEnter: (to, from, next) => {
        // ...
      },
      beforeLeave: (to, from, next) => {
        // ...
      }
    }
  ]
})
//to: Route: 即将要进入的目标 路由对象
//from: Route: 当前导航正要离开的路由

18.自定义指令钩子函数Vue.directive

bind：指令第一次绑定到元素时调用，只执行一次。在这里可以进行一次性的初始化设置。
当指令绑定在 HTML 元素上时触发

inserted：被绑定的元素，插入到父节点的 DOM 中时调用（仅保证父节点存在）。 
当指令绑定的元素插入到父节点中的时候触发

update：组件更新时调用。
当指令绑定的元素状态/样式、内容(这里指元素绑定的 vue 数据) 发生改变时触发

componentUpdated：组件与子组件更新时调用
当 update() 执行完毕之后触发

unbind：指令与元素解绑时调用，只执行一次。
当指令绑定的元素从 dom 中删除时触发
//v-show 改变元素的样式的时候触发了 update 和componentUpdated 函数
//v-if 是删除或者重建 dom 元素，当指令绑定的元素被销毁时，会触发指令的 unbind 事件，新建显示仍是触发 bind 和inserted 。

参数:
el:被绑定了指令的那个 dom 元素
binding:指令对象
vnode：虚拟节点。
oldVnode：上一个虚拟节点;只有update 与 componentUpdated有

除 update 与 componentUpdated 钩子函数之外，每个钩子函数都含有 el、binding、vnode 这三个参数

19.双向绑定原理

Vue. js采用ES5提供的属性特性功能，结合发布者-订阅者模式，通过 Object.defineProperty()为各个属性定义get、set特性方法，在数据发生改变时给订阅者发布消息，触发相应的监听回调。

20.keep-alive

<keep-alive> 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 <transition> 相似，<keep-alive> 是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在组件的父组件链中。

主要用于保留组件状态或避免重新渲染。

如果你只想缓存部分组件的状态。那么可以使用keep-alive的include属性;exclude 不需要缓存的组件名称
例如，我们只想缓存newsList和imageList这2个列表组件的数据。
 <keep-alive include="newsList,imageList">
    <router-view></router-view>
</keep-alive>
必须在需要被缓存状态的组件的script部分，给组件添加一个name属性
export default {
    name: "newsList",  //如果使用了keep-alive缓存该组件状态，则此组件必须有这个属性。
    data(){
        return {}
    }
</script>

21.Vue.set()

在实例创建之后添加属性并且让它能够响应，可以使用$set实例方法
Vue.set() || this.$set()
用法：
Vue.set(target,propertyName/index,value) 

向响应式对象中添加一个 property，并确保这个新 property 同样是响应式的，且触发视图更新。它必须用于向响应式对象上添加新 property，因为 Vue 无法探测普通的新增 property (比如this.myObject.newProperty = 'hi')

22.Vue.js文件中的样式覆盖不生效的问题如何解决？

按照 Vue. js官方给出的说法， style加上 scoped可以让样式“私有化”（即只针对当前Vue.js文件（组件）中的代码有效，不会对别的文件（组件）中的代码造成影响）

很多时候，我们引入了第三方UI，在 Vue. js文件中进行样式覆盖不生效，多半问题是 style上的 scoped导致的。

解决方案是将需要覆盖样弌的这部分代码放到单独的CSS文件中，最后在 main.js文件中导入即可。

23.vue常见修饰符

.stop //阻止事件冒泡
.prevent //阻止默认行为；如a链接跳转
.capture //当发生冒泡行为时，先触发带有该修饰符的元素
.self //只触发自己范围内的事件；防止事件冒泡
.once //只会触发一次

24.vue常用指令

v-model
v-if
v-else
v-show
v-hide
v-for
v-on
v-bind
v-text
v-cloak
v-once 进入页面时 只渲染一次 不在进行渲染

25.组件传值的方式

1.父传子：
props[]
2.子传父
this.$emit("fnName","value");//父组件通过接收 fnName 事件方法来接收回调
3.vuex

26.vue-router路由的两种模式

vue-router中默认使用的是hash模式
//1.hash模式, 带#。如：http://localhost:8080/#/pageA。改变hash，浏览器本身不会有任何请求服务器动作的，但是页面状态和url已经关联起来了。
//2.history模式，不带#， 如：http://localhost:8080/ 正常的而路径，并没有#。基于HTML5的 pushState、replaceState实现

1.hash模式  通过监听`hashchange`事件得到hash值的变化，来实现更新页面部分内容的操作。
2.history模式 pushState() 和 replaceState()，向历史记录中添加或替换而无须重新加载页面。

27. $route和$router的区别

1.$route是“路由信息对象”，包括path，params，hash，query，fullPath，matched，name等路由信息参数。
2.$router是“路由实例”对象包括了路由的跳转方法，钩子函数等

28.this.$nextTick(fn)

理解：nextTick()，是将回调函数延迟在下一次dom更新数据后调用，简单的理解是：当数据更新了，在dom中渲染后，自动执行该函数
//将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新。它跟全局方法 Vue.nextTick 一样，不同的是回调的 this 自动绑定到调用它的实例上。

29.ie盒子模型

W3C的盒模型方式被称为“content-box”;添加padding和border，盒子会变大；height只包括content，不包括padding和border
IE的被称为“border-box”;添加padding和border，盒子大小不变；height包括content，padding和border

30.flex

flex-shrink:表示在父元素宽度不够的情况下是自动收缩不？0表示不自动收缩，1表示自动收缩；所以将子元素（图片）添加属性：flex-shrink:0;即可

31.布局方式

//前端的几种布局方式
1.静态布局(固定宽高)
2.弹性布局flex(常用)
3.圣杯布局
flex:flex-group,flex-shrink,flex-basis
A.flex-group:当父元素有剩余空间时，子元素占据剩余空间的量
B.flex-shrink:当父元素的空间不足以展示所有的子元素，父元素设置flex-wrap，子元素需要收缩的量
C.flex-basis:表示该子元素的初始宽度
4.自适应布局(为不同的屏幕分辨率定义的布局，@media媒体查询技术)
5.流试布局(宽高使用百分比，按屏幕分辨率调节，布局不发生变化)
6.响应式布局(使用meta标签,宽高随窗口调整自动适配，自适应布局和流试布局的综合方式)
7.栅格布局

32.h5新特性

1.语义化标签
HTML5提供语义化标签，如： 
<header><article><footer><nav><aside><section>等
2.增强型表单
多个新的表单 Input 输入类型，如： 
color,url,date等
新增表单元素
新增表单属性
required 属性
placehoder 属性
min 和 max 属性，设置元素最小值与最大值
autofocus 属性，是一个 boolean 属性。规定在页面加载时，域自动地获得焦点
3.新增视频 <video> 和音频 <audio> 标签
4.Canvas绘图 
5.SVG绘图 
6.地理定位 
7.拖放API
8.Web Worker 
9.Web Storage 
10.WebSocket

33.href与src的区别

简述一下src与href的区别
a. src用于替换当前元素
b. href用于在当前文档和引用资源之间确立联系
c. src是source的缩写，指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置
d. href是Hypertext Reference的缩写，指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接

34.css权重和优先级

1.行内样式 1000
2.id选择器 100
3.类选择器 10
4.元素选择器 1

35.盒子模型

margin,border，padding，content

36.position属性

1.static
static(没有定位)是position的默认值，元素处于正常的文档流中，会忽略left、top、right、bottom和z-index属性。

2.absolute

3.relative
4.fixed 固定定位
以浏览器的可视窗口为参照物移动元素
固定定位不占有原先位置

5.sticky 粘性定位
以浏览器可视窗口为参照物移动元素
粘性定位占有原先位置
必须添加top,left,right,bottom才生效
父元素及其祖先元素不能有overflow: hidden

37.http

1.什么是http报文
http报文是http协议在客户端和服务端之间传输的数据块

2.http报文由哪三部分组成
http报文由起始行(start line),头部(header),主体(body)三部分组成;起始行是对报文进行的描述，头部包含报文的一些属性，主体包含报文的数据

3.HTTP报文分为哪两类
请求报文和响应报文

4.常见的请求方法
get 从服务端获取指定信息
post 向服务端发送待处理数据
put 向服务端发送数据并替换服务端上指定的数据
delete 从服务端删除指定数据
head 从服务端获取信息的头部

5.请求的头部信息
Accept：浏览器能够处理的内容类型
Accept-Charset：浏览器能够显示的字符集
Accept-Encoding：浏览器能够处理的压缩编码
Accept-Language：浏览器当前设置的语言
Connection：浏览器与服务器之间连接的类型
Cookie：当前页面设置的任何Cookie
Host：发出请求的页面所在的域
Referer：发出请求的页面的URL
User-Agent：浏览器的用户代理字符串

6.响应的头部信息
Age：推算资源创建经过时间
Cache-Control：控制HTTP缓存
Connection：浏览器与服务器之间连接的类型
Content-Encoding：适用的编码方式
Content-Type：表示后面的文档属于什么MIME类型
Date：表示消息发送的时间，时间的描述格式由rfc822定义
ETag：资源的匹配信息
Expires：提供一个日期和时间，响应在该日期和时间后被认为失效
Last-Modified：资源的最后修改日期时间
server：服务器名字

38.跨域

为什么会出现跨域
出于浏览器的同源策略限制;同源策略（Sameoriginpolicy）是一种约定，它是浏览器最核心也最基本的安全功能，
同源策略会阻止一个域的javascript脚本和另外一个域的内容进行交互。所谓同源（即指在同一个域）就是两个页面具有相同的协议（protocol），主机（host）和端口号（port）
解决方案:
CORS:
普通跨域请求：只需服务器端设置Access-Control-Allow-Origin
带cookie跨域请求：前后端都需要进行设置
前端:
axios.defaults.withCredentials = true
后端:
'Access-Control-Allow-Origin': 'http://www.domain1.com',    // 允许访问的域（协议+域名+端口

39.数组方法

        let arr1=[1,2,3,4];
        let arr2=[5,6,7,8];
       //push()元素直接添加到末尾,可以添加多个元素
       //pop()删除数组末尾第一个元素
       //unshift()在数组开头插入值,可以添加多个元素
       //shift()在数组开头删除第一个值

       //splice()
       // arr.splice(1, 0, 3, 3, 2, 11);//从索引1开始插入元素，覆盖0个，分别插入3,3,2,11 如果是0，则默认没有结束索引值
       // arr.splice(1, 3)   //删除元素，从索引1开始，删除3个

       //slice(start,end) 返回截取后的数组;[start,end) 类似字符串中的subString

       //concat可以合并多个数组,也可以合并字符串
       //arr2=arr2.concat(arr1) //1-8,a

        let numbers = [1, 2, 4, 6];
        const isEven = x => x % 2;
        //使用every方法迭代，迭代每个元素，直到返回false;如果都为true，则返回true
        console.log(numbers.every(isEven));
        //使用some方法迭代，迭代每个元素，直到返回true;如果都为false，则返回false
        console.log(numbers.some(isEven));
        //使用foreach方法迭代输出每个数组的值 (value,index,arr)
        numbers.forEach(x => console.log(x));
        //使用map方法迭代，迭代每个元素，返回一个数组，存储每个元素的值
        console.log(numbers.map(isEven));
        //使用filter方法迭代,返回的数组值都由true元素组成
        console.log(numbers.filter(isEven));

        //使用reduce方法迭代，对一个数组中的所有元素求和
        console.log(numbers.reduce((previous, current) => previous + current));

        //使用form方法复制数组
        //Array.from() 方法从一个类似数组或可迭代对象创建一个新的，浅拷贝的数组实例。
        let arr2 = Array.from(numbers);

        //Array.of()方法 复制数组
        let arr3 = Array.of(3)

        //Array.fill() value用来填充数组元素的值。start起始索引 可选;end结束索引 可选
        //创建数组并初始化值的时候，fill方法非常好用，就像下面这样
        let arr4 = Array(6).fill(1);

        // copyWithin() 方法浅复制数组的一部分到同一数组中的另一个位置，并返回它，不会改变原数组的长度。'
        const array1 = ['a', 'b', 'c', 'd', 'e'];
        // copy to index 0 the element at index 3
        console.log(array1.copyWithin(0, 3, 4));
        // expected output: Array ["d", "b", "c", "d", "e"]

        // 查找
        function doSth(element) {
            return element % 2 == 0
        }
        console.log(numbers.find(doSth)); //返回值 2
        console.log(numbers.findIndex(doSth)); //返回索引 1
        console.log(numbers.includes(2));//1.要查询的值，2.startIndex 返回Boolean值

40.路由懒加载

component: () => import('@/views/mobile/schoolDetail')
component: () => resolve => require(['@/views/mobile/schoolDetail'],resolve) 

41.v-if和v-show的区别

手段:
v-show是通过display控制显示与隐藏
v-if是动态的向DOM树添加或删除DOM元素
性能消耗:
v-if有更高的切换消耗；v-show有更高的初始渲染消耗

42.v-for为什么要加key

1.快速找到节点，减少渲染次数，提高渲染性能
当个元素位置发生改变时vue不会对整个列表进行重新渲染，而只是更换一下dom的顺序，这样可以减少资源消耗。
2.唯一性

v-for中的key来给每个节点做一个唯一的标识，diff算法就可以正确的识别此节点，找到正确的位置区插入新的节点；key的主要作用是为了高效的更新虚拟dom。

43.浮动

浮动的概念:
给元素的样式设置float属性后，就可以让元素产生脱离文档流的效果，按照浮动的方向漂浮起来，直到遇到父元素边框或者其他浮动元素
清除浮动的方法
1.添加新元素，设置clear:both;
2.父元素设置overflow:hidden;
3.父元素的伪元素设置clear:b

44.生命周期

1.什么是生命周期
Vue实例从开始创建、初始化数据、编译模板、挂载DOM和渲染、更新和渲染、卸载等一系列过程，这就是Vue的生命周期

2.vue生命周期的作用是什么
他的生命周期中有很多个事件钩子，让我们在控制整个Vue实例的过程时更容易形成好的逻辑

3.第一次页面加载会触发哪几个钩子
第一次页面加载时会触发 beforeCreate, created, beforeMount, mounted 这几个钩子

4.DOM渲染在哪个周期中已经完成
mounted

5.简述每个周期具体适合哪些场景
beforecreate : 可以在这加个loading事件，在加载实例时触发;
created : 初始化完成时的事件写在这里，如在这结束loading事件，异步请求也适宜在这里调用
mounted : 挂载元素，获取到DOM节点
updated : 如果对数据统一处理，在这里写上相应函数
beforeDestroy : 可以做一个确认停止事件的确认框
nextTick : 更新数据后立即操作dom

6.created和mounted的区别
created:在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。
mounted:在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。

45.MVVM模型的定义

MVVM是Model-View-ViewModel的简写。即模型-视图-视图模型。
【模型】指的是后端传递的数据。【视图】指的是所看到的页面。【视图模型】mvvm模式的核心，它是连接view和model的桥梁。

它有两个方向：一是将【模型】转化成【视图】，即将后端传递的数据转化成所看到的页面。实现的方式是：数据绑定。
二是将【视图】转化成【模型】，即将所看到的页面转化成后端的数据。实现的方式是：DOM 事件监听。

这两个方向都实现的，我们称之为数据的双向绑定。
总结：在MVVM的框架下视图和模型是不能直接通信的。它们通过ViewModel来通信，ViewModel通常要实现一个observer观察者，当数据发生变化，ViewModel能够监听到数据的这种变化，然后通知到对应的视图做自动更新，而当用户操作视图，ViewModel也能监听到视图的变化，然后通知数据做改动，这实际上就实现了数据的双向绑定。并且MVVM中的View 和 ViewModel可以互相通信

46.v-router有哪些组件

v-router就是SPA（单页应用）的路径管理器;再通俗的说，vue-router就是WebApp的链接路径管理系统。
<router-link :to="" class='' active-class=''/>  ///路由声明式跳转 ，active-class是标签被点击时的样式
<router-view> //渲染路由的容器
 <keep-alive> //缓存组件

47.vue-router响应路由参数的变化

当使用路由参数时，例如从 /user/aside导航到 /user/foo，原来的组件实例会被复用。因为两个路由都渲染同个组件，比起销毁再创建，复用则更加高效。不过，这也意味着组件的生命周期钩子不会再被调用。
 注意:
（1）从同一个组件跳转到同一个组件。
（2）生命周期钩子created和mounted都不会调用。
1.可以使用router的组件内钩子函数
beforeRouterUpdate(to,form,next){
    to表示将要跳转的路由对象，from表示从哪个路由跳转过来，next多数就是需要调用
}
2.添加watch监听

watch: {
 // 方法1 //监听路由是否变化
  '$route' (to, from) {
   if(to.query.id !== from.query.id){
            this.id = to.query.id;
            this.init();//重新加载数据
        }
  }
}

48.怎么定义vue-router的动态路由?怎么获取传过来的动态参数?

可以通过query ,param两种方式
区别: query通过url传参，刷新页面还在    params刷新页面不在了
params跳转方法
// 方法1：
<router-link :to="{ name: 'users', params: { uname: wade }}">按钮</router-link>
// 方法2：
<router-link :to="'/user/'+userId">用户</router-link>   
// 方法3：
this.$router.push({name:'users',params:{uname:wade}})
// 方法4：
this.$router.push('/user/' + wade)

49.Vue的优点

两大特点：渐进式编程，组件化
vue的优势：轻量级框架、简单易学、双向数据绑定、组件化、数据和结构的分离、虚拟DOM、运行速度快。
vue是单页面应用，使页面局部刷新，不用每次跳转页面都要请求所有数据和dom，这样大大加快了访问速度和提升用户体验。

50.delete和Vue.delete删除数组的区别

delete只是被删除的元素变成了 empty/undefined 其他的元素的键值还是不变。
var a=[1,2,3,4]
var b=[1,2,3,4]
delete a[1]
console.log(a)[1,empty,3,4]
this.$delete(b,1)
console.log(b)[1,3,4]