关于面试:前端面试宝典vue核心知识篇

想零碎学习前端面试题，强烈推荐浏览在线电子书（反对手机版，不断更新）。

本书特点：零碎全面（涵盖前端核心技术点），简洁，针对性强（针对面试场景设计）。

欢送在 github 上留言反馈

Vuex 是一个专为 Vue.js 利用程序开发的状态管理模式。每一个 Vuex 利用的外围就是 store（仓库）。“store”基本上就是一个容器，它蕴含着你的利用中大部分的状态 (state)。

（1）Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地失去高效更新。

（2）扭转 store 中的状态的惟一路径就是显式地提交 (commit) mutation。这样使得咱们能够不便地跟踪每一个状态的变动。

次要包含以下几个模块：

State：定义了利用状态的数据结构，能够在这里设置默认的初始状态。
Getter：容许组件从 Store 中获取数据，mapGetters 辅助函数仅仅是将 store 中的 getter 映射到部分计算属性。
Mutation：是惟一更改 store 中状态的办法，且必须是同步函数。
Action：用于提交 mutation，而不是间接变更状态，能够蕴含任意异步操作。
Module：容许将繁多的 Store 拆分为多个 store 且同时保留在繁多的状态树中。

Vue 组件间通信是面试常考的知识点之一，这题有点相似于凋谢题，你答复出越多办法当然越加分，表明你对 Vue 把握的越纯熟。Vue 组件间通信只有指以下 3 类通信：父子组件通信、隔代组件通信、兄弟组件通信，上面咱们别离介绍每种通信形式且会阐明此种办法可实用于哪类组件间通信。

（1）props / $emit 实用父子组件通信

这种办法是 Vue 组件的根底，置信大部分同学耳闻能详，所以此处就不举例开展介绍。

（2）ref 与 $parent / $children 实用父子组件通信

ref：如果在一般的 DOM 元素上应用，援用指向的就是 DOM 元素；如果用在子组件上，援用就指向组件实例
$parent / $children：拜访父 / 子实例

（3）EventBus（$emit / $on）实用于父子、隔代、兄弟组件通信

这种办法通过一个空的 Vue 实例作为地方事件总线（事件核心），用它来触发事件和监听事件，从而实现任何组件间的通信，包含父子、隔代、兄弟组件。

（4）$attrs/$listeners 实用于隔代组件通信

$attrs：蕴含了父作用域中不被 prop 所辨认 (且获取) 的个性绑定 (class 和 style 除外)。当一个组件没有申明任何 prop 时，这里会蕴含所有父作用域的绑定 (class 和 style 除外)，并且能够通过 v-bind="$attrs" 传入外部组件。通常配合 inheritAttrs 选项一起应用。
$listeners：蕴含了父作用域中的 (不含 .native 润饰器的) v-on 事件监听器。它能够通过 v-on="$listeners" 传入外部组件

（5）provide / inject 实用于隔代组件通信

先人组件中通过 provider 来提供变量，而后在子孙组件中通过 inject 来注入变量。provide / inject API 次要解决了跨级组件间的通信问题，不过它的应用场景，次要是子组件获取下级组件的状态，跨级组件间建设了一种被动提供与依赖注入的关系。

（6）Vuex 实用于父子、隔代、兄弟组件通信

Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地失去高效更新。
扭转 store 中的状态的惟一路径就是显式地提交 (commit) mutation。这样使得咱们能够不便地跟踪每一个状态的变动。

keep-alive 是 Vue 内置的一个组件，能够使被蕴含的组件保留状态，防止从新渲染，其有以下个性：

个别联合路由和动静组件一起应用，用于缓存组件；
提供 include 和 exclude 属性，两者都反对字符串或正则表达式，include 示意只有名称匹配的组件会被缓存，exclude 示意任何名称匹配的组件都不会被缓存，其中 exclude 的优先级比 include 高；
对应两个钩子函数 activated 和 deactivated，当组件被激活时，触发钩子函数 activated，当组件被移除时，触发钩子函数 deactivated。

因为 JavaScript 的限度，Vue 不能检测到以下数组的变动：

当你利用索引间接设置一个数组项时，例如：vm.items[indexOfItem] = newValue
当你批改数组的长度时，例如：vm.items.length = newLength

为了解决第一个问题，Vue 提供了以下操作方法：

// Vue.set
Vue.set(vm.items, indexOfItem, newValue)
// vm.$set，Vue.set 的一个别名
vm.$set(vm.items, indexOfItem, newValue)
// Array.prototype.splice
vm.items.splice(indexOfItem, 1, newValue)
复制代码

为了解决第二个问题，Vue 提供了以下操作方法：

// Array.prototype.splice
vm.items.splice(newLength)

如果被问到 Vue 怎么实现数据双向绑定，大家必定都会答复通过 Object.defineProperty() 对数据进行劫持，然而 Object.defineProperty() 只能对属性进行数据劫持，不能对整个对象进行劫持，同理无奈对数组进行劫持，然而咱们在应用 Vue 框架中都晓得，Vue 能检测到对象和数组（局部办法的操作）的变动，那它是怎么实现的呢？咱们查看相干代码如下：

  /**
   * Observe a list of Array items.
   */
  observeArray (items: Array<any>) {for (let i = 0, l = items.length; i < l; i++) {observe(items[i])  // observe 性能为监测数据的变动
    }
  }

  /**
   * 对属性进行递归遍历
   */
  let childOb = !shallow && observe(val) // observe 性能为监测数据的变动

复制代码

通过以上 Vue 源码局部查看，咱们就能晓得 Vue 框架是通过遍历数组和递归遍历对象，从而达到利用 Object.defineProperty() 也能对对象和数组（局部办法的操作）进行监听。

vue 双向数据绑定是通过【数据劫持】+【发布者 - 订阅者模式】形式来实现的；

vue 数据劫持通过：Object.defineProperty() 办法，它有两个形容属性 set（增加触发），get（调用触发）;

当对象在增加属性的时候会触发 set 办法，再读取的时候会触发 get 办法；

mvvm 蕴含两方面的内容：

view 到 model:

监听 input 框中的事件，把扭转后的值重置到 model 中；

model 到 view:

model 数据扭转的时候会触发 Object.defineProperty() 的 set 办法
再通过更新后的数据展现在 view 中就能够了；

实现过程：

实现一个监听器 Observer, 用来劫持监听所有的属性，如有变动告诉订阅者；
实现一个订阅者 Watcher, 收到属性变动的告诉执行相应的函数，从而更新视图
实现一个解析器 Compile, 能够扫描和解析每个节点的相干指令，

把 vuex 从根组件间接注入到 vue 的每个子组件中,Vue.use(vuex)
创立一个 vuex 的 store，并定义好其余的参数（state,getter,mutations,action）
导出 vuex 创立的对象 store;
把导出的 store 插入到创立的 vue 实例中
在.vue 模板的 computed 就能够间接过 this.$store.state.value; 来拜访 store 中的数据了；

获取 state:

间接获取：this.$store.state.value;

批量获取：

引入 store 页面中

let state=this.$store.state 能够间接获取 store 中 state 的值；

import Vue from “vue”

import Vuex from “vuex”

vue.use(Vuex); // 间接把 vuex 动作中 vue 中，所以在 vue 中间接

let store=new Vuex.Store{

state:{

getter:{

mutations:{

action:{

}

关于面试:前端面试宝典vue核心知识篇

前言：

vue

你应用过 Vuex 吗？

Vue 组件间通信有哪几种形式？

谈谈你对 keep-alive 的理解？

间接给一个数组项赋值，Vue 能检测到变动吗？

Vue 框架怎么实现对象和数组的监听？

vue 双向数据绑定原理？

vuex 如何应用？

vue 模板中如何拜访 vuex 中的 store(state,action)?