vue最新面试题

1、vue的生命周期以及页面初次加载会触发哪些钩子

根组件实例：8个 (beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed)
组件实例：8个 (beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed)
全局路由钩子：2个 (beforeEach、afterEach)
组件路由钩子：3个 (beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave)
指令的周期： 5个 (bind、inserted、update、componentUpdated、unbind)
beforeRouteEnter的next所对应的周期
nextTick所对应的周期

如果有子组建

父beforeCreate --> 父created --> 父beforeMount --> 子beforeCreate --> 子created --> 子beforeMount --> 子mounted --> 父mounted

2、vue中data为什么必须是一个函数

防止组件在重复使用时，数据互相干扰，使用函数将产生新作用域，所以同一个组件在不同位置被使用时，不适用同一份数据

3、v-for里面key的作用

key的作用是为了在diff算法执行时更快的找到对应的节点，提高diff速度，具有唯一性
原理: 在数据发生变化，vue是先根据真实DOM生成一颗 virtual DOM ，当 virtual DOM 某个节点的数据改变后会生成一个新的 Vnode ，然后 Vnode 和 oldVnode 作对比，发现有不一样的地方就直接修改在真实的DOM上，然后使 oldVnode 的值为 Vnode ，来实现更新节点。
（1）先去同级比较，然后再去比较子节点
（2）先去判断一方有子节点一方没有子节点的情况
（3）比较都有子节点的情况
（4）递归比较子节点

4、vue实现数据双向绑定的原理

采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty（）来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应监听回调。即数据和视图同步，数据发生变化，视图跟着变化，视图变化，数据也随之发生改变

5、vue-router有几种模式

hash模式 地址栏URL中的#符号，不会被包含在HTTP请求中，对后端完全没有影响，因此改变hash不会重新加载页面。

history模式 利用了HTML5 History Interface 中新增的pushState() 和replaceState() 方法，这两个方法应用于浏览器的历史记录站，在当前已有的back、forward、go 的基础之上，它们提供了对历史记录进行修改的功能。只是当它们执行修改是，虽然改变了当前的URL，但你浏览器不会立即向后端发送请求。history模式，会出现404 的情况，需要后台配置。

6、route和router的区别 及router生命周期

r o u t e r 是 V u e R o u t e r 的 实 例 ， 在 s c r i p t 标 签 中 想 要 导 航 到 不 同 的 U R L , 使 用 r o u t e r . p u s h 方 法 。 返 回 上 一 个 历 史 h i s t o r y 用 router是VueRouter的实例，在script标签中想要导航到不同的URL,使用router.push方法。返回上一个历史history用 router是VueRouter的实例，在script标签中想要导航到不同的URL,使用router.push方法。返回上一个历史history用router.to(-1)
$route为当前router跳转对象。里面可以获取当前路由的name,path,query,parmas等。

router生命周期
router异步解析执行，此时router在 resolve 完之前一直处于 等待中。
三个参数：
to: Route: 即将要进入的目标 路由对象
from: Route: 当前导航正要离开的路由
next: Function: 一定要调用该方法来 resolve 这个钩子

7、Keep-live 生命周期钩子

在被keep-alive包含的组件/路由中，会多出两个生命周期的钩子:activated 与 deactivated
activated在组件第一次渲染时会被调用，之后在每次缓存组件被激活时调用
deactivated：组件被停用(离开路由)时调用

8、vue组件通信的方法

1.父组件向子组件传值 子组件通过props接收
2.子组件向父组件传值 子组件通过 e m i t 传 值 3. v u e x 4. l o c a l S t o r a g e 5. p r o v i d e / i n j e c t 主 要 解 决 了 跨 级 组 件 间 的 通 信 问 题 ， 不 过 它 的 使 用 场 景 ， 主 要 是 子 组 件 获 取 上 级 组 件 的 状 态 ， 跨 级 组 件 间 建 立 了 一 种 主 动 提 供 与 依 赖 注 入 的 关 系 。 p r o v i d e : / / 父 组 件 传 值 n a m e : ′ 数 据 ′ i n j e c t : [ ′ n a m e ′ ] / / 子 组 建 接 收 6. emit传值 3.vuex 4.localStorage 5.provide/inject 主要解决了跨级组件间的通信问题，不过它的使用场景，主要是子组件获取上级组件的状态，跨级组件间建立了一种主动提供与依赖注入的关系。 provide: { //父组件传值 name: '数据' } inject: ['name'] //子组建接收 6. emit传值3.vuex4.localStorage5.provide/inject主要解决了跨级组件间的通信问题，不过它的使用场景，主要是子组件获取上级组件的状态，跨级组件间建立了一种主动提供与依赖注入的关系。provide://父组件传值name:′数据′inject:[′name′]//子组建接收6.emit/ o n 通 过 一 个 空 的 V u e 实 例 作 为 中 央 事 件 总 线 （ 事 件 中 心 ） ， 用 它 来 触 发 事 件 和 监 听 事 件 , 巧 妙 而 轻 量 地 实 现 了 任 何 组 件 间 的 通 信 ， 包 括 父 子 、 兄 弟 、 跨 级 E v e n t . on通过一个空的Vue实例作为中央事件总线（事件中心），用它来触发事件和监听事件,巧妙而轻量地实现了任何组件间的通信，包括父子、兄弟、跨级 Event. on通过一个空的Vue实例作为中央事件总线（事件中心），用它来触发事件和监听事件,巧妙而轻量地实现了任何组件间的通信，包括父子、兄弟、跨级Event.emit(‘方法’, this.name) 传值
Event.$on(‘data-a’,name => {
this.name = name; //箭头函数内部不会产生新的this，这边如果不用=>,this指代Event
}) 取值

9、vue中如何自定义指令

全局注册注册主要是用过Vue.directive方法进行注册
Vue.directive第一个参数是指令的名字（不需要写上v-前缀），第二个参数可以是对象数据，也可以是一个指令函数

// 注册一个全局自定义指令 `v-focus`
Vue.directive('focus', {
  // 当被绑定的元素插入到 DOM 中时……
  inserted: function (el) {
    // 聚焦元素
    el.focus()  // 页面加载完成之后自动让输入框获取到焦点的小功能
  }
})
局部注册通过在组件options选项中设置directive属性
directives: {
  focus: {
    // 指令的定义
    inserted: function (el) {
      el.focus() // 页面加载完成之后自动让输入框获取到焦点的小功能
    }
  }
}

10、watch 和 computed 的区别

computed是监听多个值来改变一个值，而watch是一个值来影响一个值
computed具有缓存性
computed在computed中定义，watch的数据在data定义

wactch：
1.不支持缓存。数据变化直接触发 *** 作；
2.watch支持异步；
3.监听的函数接收两个参数（newValue, oldValue）
当一个属性发生变化时，需要执行对应的 *** 作；一对多；
监听数据必须是data中声明过或者父组件传递过来的props中的数据。
页面第一次渲染时候，watch函数是不会执行的，只有当数据变化时才会触发 *** 作。函数有两个参数，
deep 控制是否要看这个对象里面的属性变化，但是其无法监听到数组的变动和对象的新增
immediate 控制是否在第一次渲染是执行这个函数
举例场景：现在有父组件P，和他的2个子组件C1，C2。C1改变父组件P的data，并且需要把这个值传给C2，这时候发现C2组件的data值没有变换还是最初父组件P传的值，考虑在组件C2中用watch来解决
案例 ：异步 *** 作开销巨大的 *** 作，比如远程服务获取搜索列表。

computer：
1.支持缓存，只有依赖数据发生改变，才会重新进行计算
2.不支持异步，当computed内有异步 *** 作时无效，无法监听数据的变化
3.computed 属性值会默认走缓存，计算属性是基于它们的响应式依赖进行缓存的，也就是基于data中声明过或者父组件传递的props中的数据通过计算得到的值
如果一个属性是由其他属性计算而来的，这个属性依赖其他属性，是一个多对一或者一对一，一般用computed
5.如果computed属性属性值是函数，那么默认会走get方法；函数的返回值就是属性的属性值；在computed中的，属性都有一个get和一个set方法，当数据变化时，调用set方法。
比如： 购物车商场总数计算