共计 6424 个字符，预计需要花费 17 分钟才能阅读完成。
Vue
观察者模式对咱们来说应该不生疏，对 vue 原理略微有点理解的都晓得通过 Object.defineProperty 拦挡数据的 get/set，在 set 中收集依赖 Watcher，在 get 中触发更新 Watcher.notify()，这里就是观察者模式的利用
1. 纯熟应用 Vue 的 API、生命周期、钩子函数
v-for、v-if、v-bind、v-on、v-show、v-else
v-bind 绑定数据和元素属性 v-on 就是用于绑定事件的
Vue 实例从创立到销毁的过程，就是生命周期。从开始创立、初始化数据、编译模板、挂载 Dom→渲染、更新→渲染、销毁等一系列过程，称之为 Vue 的生命周期。
它的生命周期中有多个事件钩子，让咱们在管制整个 Vue 实例的过程时更容易造成好的逻辑。它能够总共分为 8 个阶段：创立前 / 后, 载入前 / 后, 更新前 / 后, 销毁前 / 销毁后。
第一次页面加载会触发哪几个钩子？
会触发 上面这几个 beforeCreate, created, beforeMount, mounted。
DOM 渲染在 mounted 中就曾经实现了。
2.MVVM 框架设计理念
MVVM 是 Model-View-ViewModel 的缩写。
Model 代表数据模型，也能够在 Model 中定义数据批改和操作的业务逻辑。
View 代表 UI 组件，它负责将数据模型转化成 UI 展示进去。
ViewModel 监听模型数据的扭转和管制视图行为、解决用户交互，简略了解就是一个同步 View 和 Model 的对象，连贯 Model 和 View。
在 MVVM 架构下，View 和 Model 之间并没有间接的分割，而是通过 ViewModel 进行交互，Model 和 ViewModel 之间的交互是双向的，因而 View 数据的变动会同步到 Model 中，而 Model 数据的变动也会立刻反馈到 View 上。
ViewModel 通过双向数据绑定把 View 层和 Model 层连贯了起来，而 View 和 Model 之间的同步工作齐全是主动的，无需人为干预，因而开发者只需关注业务逻辑，不须要手动操作 DOM, 不须要关注数据状态的同步问题，简单的数据状态保护齐全由 MVVM 来对立治理。
3.Vue 双向绑定实现原理、Diff 算法的外部实现
Object.defineProperty(obj, prop, desc)
Object.defineProperty() 的作用就是间接在一个对象上定义一个新属性，或者批改一个曾经存在的属性
Vue 实现数据双向绑定的原理：Object.defineProperty（）
vue 实现数据双向绑定次要是：采纳数据劫持联合发布者 - 订阅者模式的形式，通过 Object.defineProperty（）来劫持各个属性的 setter，getter，在数据变动时公布音讯给订阅者，触发相应监听回调。当把一个一般 Javascript 对象传给 Vue 实例来作为它的 data 选项时，Vue 将遍历它的属性，用 Object.defineProperty 将它们转为 getter/setter。用户看不到 getter/setter，然而在外部它们让 Vue 追踪依赖，在属性被拜访和批改时告诉变动。
vue 的数据双向绑定 将 MVVM 作为数据绑定的入口，整合 Observer，Compile 和 Watcher 三者，通过 Observer 来监听本人的 model 的数据变动，通过 Compile 来解析编译模板指令（vue 中是用来解析 {{}}），最终利用 watcher 搭起 observer 和 Compile 之间的通信桥梁，达到数据变动 —> 视图更新；视图交互变动（input）—> 数据 model 变更双向绑定成果。
4.Vue 的事件机制
5. 从 template 转换成实在 DOM 的实现机制
vuex 常见面试题
1.vuex 是什么？怎么应用？哪种性能场景应用它？
答：vue 框架中状态治理。在 main.js 引入 store，注入。
新建了一个目录 store.js，….. export。
场景有：单页利用中，组件之间的状态。音乐播放、登录状态、退出购物车
2.vuex 有哪几种属性？
答：有五种，别离是 State、Getter、Mutation、Action、Module
state => 根本数据 (数据源寄存地)
getters => 从根本数据派生进去的数据
mutations => 提交更改数据的办法，同步！
actions => 像一个装璜器，包裹 mutations，使之能够异步。
modules => 模块化 Vuex
3.Vue.js 中 ajax 申请代码应该写在组件的 methods 中还是 vuex 的 actions 中？
答：如果申请来的数据是不是要被其余组件专用，仅仅在申请的组件内应用，就不须要放入 vuex 的 state 里。
如果被其余中央复用，这个很大几率上是须要的，如果须要，请将申请放入 action 里，不便复用
四、Vue 组件间的参数传递 1. 父组件与子组件传值 父组件传给子组件：子组件通过 props 办法承受数据; 子组件传给父组件：$emit 办法传递参数 2. 非父子组件间的数据传递，兄弟组件传值 eventBus，就是创立一个事件核心，相当于中转站，能够用它来传递事件和接管事件。我的项目比拟小时，用这个比拟适合。（尽管也有不少人举荐间接用 VUEX，具体来说看需要咯。技术只是伎俩，目标达到才是王道。）
五、Vue 的路由实现：hash 模式 和 history 模式
hash 模式：在浏览器中符号“#”，# 以及 #前面的字符称之为 hash，用 window.location.hash 读取；
特点：hash 尽管在 URL 中，但不被包含在 HTTP 申请中；用来领导浏览器动作，对服务端平安无用，hash 不会重加载页面。
hash 模式下，仅 hash 符号之前的内容会被蕴含在申请中，如 http://www.xxx.com，因而对于 … 404 谬误。
history 模式：history 采纳 HTML5 的新个性；且提供了两个新办法：pushState（），replaceState（）能够对浏览器历史记录栈进行批改，以及 popState 事件的监听到状态变更。
history 模式下，前端的 URL 必须和理论向后端发动申请的 URL 统一，如 http://www.xxx.com/items/id。… /items/id 的路由解决，将返回 404 谬误。Vue-Router 官网里如此形容：“不过这种模式要玩好，还须要后盾配置反对……所以呢，你要在服务端减少一个笼罩所有状况的候选资源：如果 URL 匹配不到任何动态资源，则应该返回同一个 index.html 页面，这个页面就是你 app 依赖的页面。”
六、Vue 与 Angular 以及 React 的区别？
（版本在不断更新，以下的区别有可能不是很正确。我工作中只用到 vue，对 angular 和 react 不怎么熟）
1. 与 AngularJS 的区别
相同点：
都反对指令：内置指令和自定义指令；都反对过滤器：内置过滤器和自定义过滤器；都反对双向数据绑定；都不反对低端浏览器。
不同点：
AngularJS 的学习老本高，比方减少了 Dependency Injection 个性，而 Vue.js 自身提供的 API 都比较简单、直观；在性能上，AngularJS 依赖对数据做脏查看，所以 Watcher 越多越慢；Vue.js 应用基于依赖追踪的察看并且应用异步队列更新，所有的数据都是独立触发的。
2. 与 React 的区别
相同点：
React 采纳非凡的 JSX 语法，Vue.js 在组件开发中也推崇编写.vue 非凡文件格式，对文件内容都有一些约定，两者都须要编译后应用；中心思想雷同：一切都是组件，组件实例之间能够嵌套；都提供正当的钩子函数，能够让开发者定制化地去解决需要；都不内置列数 AJAX，Route 等性能到外围包，而是以插件的形式加载；在组件开发中都反对 mixins 的个性。
不同点：
React 采纳的 Virtual DOM 会对渲染进去的后果做脏查看；Vue.js 在模板中提供了指令，过滤器等，能够十分不便，快捷地操作 Virtual DOM。
七、vue 路由的钩子函数
首页能够管制导航跳转，beforeEach，afterEach 等，个别用于页面 title 的批改。一些须要登录能力调整页面的重定向性能。
beforeEach 次要有 3 个参数 to，from，next：
to：route 行将进入的指标路由对象，
from：route 以后导航正要来到的路由
next：function 肯定要调用该办法 resolve 这个钩子。执行成果依赖 next 办法的调用参数。能够管制网页的跳转。
八、vuex 是什么？怎么应用？哪种性能场景应用它？
只用来读取的状态集中放在 store 中；扭转状态的形式是提交 mutations，这是个同步的事物；异步逻辑应该封装在 action 中。
在 main.js 引入 store，注入。新建了一个目录 store，…… export。
场景有：单页利用中，组件之间的状态、音乐播放、登录状态、退出购物车
图片形容
state
Vuex 应用繁多状态树, 即每个利用将仅仅蕴含一个 store 实例，但繁多状态树和模块化并不抵触。寄存的数据状态，不能够间接批改外面的数据。
mutations
mutations 定义的办法动静批改 Vuex 的 store 中的状态或数据。
getters
相似 vue 的计算属性，次要用来过滤一些数据。
action
actions 能够了解为通过将 mutations 外面处里数据的办法变成可异步的解决数据的办法，简略的说就是异步操作数据。view 层通过 store.dispath 来散发 action。
const store = new Vuex.Store({//store 实例
state: {
count: 0
},
mutations: {
increment (state) {
state.count++
}
},
actions: {
increment (context) {
context.commit(‘increment’)
}
}
})
modules
我的项目特地简单的时候，能够让每一个模块领有本人的 state、mutation、action、getters, 使得构造十分清晰，方便管理。
const moduleA = {
state: {…},
mutations: {…},
actions: {…},
getters: {…}
}
const moduleB = {
state: {…},
mutations: {…},
actions: {…}
}
const store = new Vuex.Store({
modules: {
a: moduleA,
b: moduleB
})
九、vue-cli 如何新增自定义指令？
1. 创立部分指令
var app = new Vue({
el:‘#app’,
data: {
},
// 创立指令(能够多个)
directives: {
// 指令名称
dir1: {
inserted(el) {
// 指令中第一个参数是以后应用指令的 DOM
console.log(el);
console.log(arguments);
// 对 DOM 进行操作
el.style.width =‘200px’;
el.style.height =‘200px’;
el.style.background =‘#000’;
}
}
}
})
2. 全局指令
Vue.directive(‘dir2’, {
inserted(el) {
console.log(el);
}
})
3. 指令的应用
十、vue 如何自定义一个过滤器？html 代码：
{{msg| capitalize}}
JS 代码：
var vm=new Vue({
el:”#app”,
data:{
msg:’’
},
filters: {
capitalize: function (value) {
if (!value) return‘’
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
}
}
})
全局定义过滤器
Vue.filter(‘capitalize’, function (value) {
if (!value) return‘’
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
})
过滤器接管表达式的值 (msg) 作为第一个参数。capitalize 过滤器将会收到 msg 的值作为第一个参数。
十一、对 keep-alive 的理解？
keep-alive 是 Vue 内置的一个组件，能够使被蕴含的组件保留状态，或防止从新渲染。
在 vue 2.1.0 版本之后，keep-alive 新退出了两个属性: include(蕴含的组件缓存) 与 exclude(排除的组件不缓存，优先级大于 include)。
应用办法
参数解释 include – 字符串或正则表达式，只有名称匹配的组件会被缓存 exclude – 字符串或正则表达式，任何名称匹配的组件都不会被缓存 include 和 exclude 的属性容许组件有条件地缓存。二者都能够用“，”分隔字符串、正则表达式、数组。当应用正则或者是数组时，要记得应用 v -bind。
应用示例
十二、一句话就能答复的面试题 1.css 只在以后组件起作用 答：在 style 标签中写入 scoped 即可 例如：
2.v-if 和 v-show 区别
答：v-if 依照条件是否渲染，v-show 是 display 的 block 或 none；
3.route 和 router 的区别
答：route 是“路由信息对象”，包含 path，params，hash，query，fullPath，matched，name 等路由信息参数。而 router 是“路由实例”对象包含了路由的跳转办法，钩子函数等。
4.vue.js 的两个外围是什么？
答：数据驱动、组件零碎
5.vue 几种罕用的指令
答：v-for、v-if、v-bind、v-on、v-show、v-else
6.vue 罕用的修饰符？
答：.prevent: 提交事件不再重载页面；.stop: 阻止单击事件冒泡；.self: 当事件产生在该元素自身而不是子元素的时候会触发；.capture: 事件侦听，事件产生的时候会调用
7.v-on 能够绑定多个办法吗？
答：能够
8.vue 中 key 值的作用？
答：当 Vue.js 用 v-for 正在更新已渲染过的元素列表时，它默认用“就地复用”策略。如果数据项的程序被扭转，Vue 将不会挪动 DOM 元素来匹配数据项的程序，而是简略复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。key 的作用次要是为了高效的更新虚构 DOM。
9. 什么是 vue 的计算属性？
答：在模板中放入太多的逻辑会让模板过重且难以保护，在须要对数据进行简单解决，且可能屡次应用的状况下，尽量采取计算属性的形式。益处：①使得数据处理构造清晰；②依赖于数据，数据更新，处理结果自动更新；③计算属性外部 this 指向 vm 实例；④在 template 调用时，间接写计算属性名即可；⑤罕用的是 getter 办法，获取数据，也能够应用 set 办法扭转数据；⑥相较于 methods，不论依赖的数据变不变，methods 都会从新计算，然而依赖数据不变的时候 computed 从缓存中获取，不会从新计算。
10.vue 等单页面利用及其优缺点
答：长处：Vue 的指标是通过尽可能简略的 API 实现响应的数据绑定和组合的视图组件，外围是一个响应的数据绑定零碎。MVVM、数据驱动、组件化、轻量、简洁、高效、疾速、模块敌对。
毛病：不反对低版本的浏览器，最低只反对到 IE9；不利于 SEO 的优化（如果要反对 SEO，倡议通过服务端来进行渲染组件）；第一次加载首页耗时绝对长一些；不能够应用浏览器的导航按钮须要自行实现后退、后退。
11. 怎么定义 vue-router 的动静路由? 怎么获取传过来的值
答：在 router 目录下的 index.js 文件中，对 path 属性加上 /:id，应用 router 对象的 params.id 获取
