共计 3525 个字符，预计需要花费 9 分钟才能阅读完成。
参考文章：前端面试题 — Vue – 作者：游荡 de 蝌蚪
1. 说一下 Vue 的双向绑定数据的原理
vue 实现双向数据绑定：通过数据劫持联合发布者 - 订阅者模式的形式，再通过 Object.defineProperty()来劫持各个属性的 setter 和 getter，在数据变动时通过公布音讯给订阅者，触发相应的监听回调。
理解更多请点击：发布者 - 订阅者模式简略实现
2. 解释单向数据流和双向数据绑定
单项数据流：数据流是单向的，流动繁多可追踪，排查问题的时候快捷不便。毛病是要更新 UI 时，需创立各种 action 来变更对应的 state
3. Vue 如何去除 url 中的 #
vue-router 的两种模式：hash 和 history。hash 模式是 vue-router 默认的，路由在加载的时候，我的项目中的 url 会主动带上 #；如果要去除#，能够应用 history 模式。
new Router({
mode: 'history',
routes: []})须要留神的是：当咱们启用
history模式的时候，因为咱们的我的项目是一个单页面利用，所以在路由跳转的时候，就会呈现拜访不到动态资源而呈现404的状况，这时候就须要服务端减少一个笼罩所有状况的候选资源：如果URL匹配不到任何动态资源，则应该返回同一个index.html页面
4. 对 MVC、MVVM 的了解
MVC
- Model：实例模型（数据保留）
- Controller：控制器（业务逻辑）
- View：视图（用户界面）
解决逻辑
- 用户通过 view 发送指令到 controller
- controller 接管指令，实现业务逻辑，告诉 model 扭转状态
- model 将新的数据渲染到 view 上，用户失去反馈
特点：所有的通信都是单向的
MVVM
- Model：模型（数据）
- View：视图（界面）
- ViewModel：视图模型是 mvvm 模式的外围，它是连贯 view 和 model 的桥梁
特点：
- 各局部之间的通信，都是双向的
- 采纳双向绑定：
View的变动，主动反映在ViewModel，反之亦然
详情请点击：由浅入深讲述 MVVM
两种模式的具体区别请移步：MVC，MVP 和 MVVM 的图示
5. 介绍虚构 DOM
虚构 DOM 介绍
DOM 基本操作相干知识点整顿
JavaScript 面试考点之常见 DOM 操作
6. vue 生命周期的了解
vue 实例有一个残缺的生命周期，生命周期也就是指一个实例从开始创立到销毁的这个过程
beforeCreate()在实例创立之间执行，数据未加载状态created()在实例创立、数据加载后，能初始化数据，dom渲染之前执行beforeMount()虚构dom已创立实现，在数据渲染前最初一次更改数据mounted()页面、数据渲染实现，实在dom挂载实现beforeUpadate()从新渲染之前触发updated()数据曾经更改实现，dom也从新re nder实现, 更改数据会陷入死循环beforeDestory()和destoryed()前者是销毁前执行（实例依然齐全可用），后者则是销毁后执行
7. 组件通信
父组件向子组件通信
子组件通过 props 属性，绑定父组件数据，实现单方通信
子组件向父组件通信
将父组件的事件在子组件中通过 $emit 触发
非父子组件、兄弟组件之间的数据传递
/* 新建一个 Vue 实例作为地方事件总嫌 */
let event = new Vue();
/* 监听事件 */
event.$on('eventName', (val) => {//......do something});
/* 触发事件 */
event.$emit('eventName', 'this is a message.')Vuex 数据管理
8. vue-router 路由实现
路由就是用来跟后端服务器进行交互的一种形式，通过不同的门路，来申请不同的资源，申请不同的页面是路由的其中一种性能
具体可参考：路由实现原理
9. v-if 和 v-show 区别
应用了
v-if的时候，如果值为false，那么页面将不会有这个html标签生成。v-show则是不论值为true还是false，html元素都会存在，只是CSS中的display显示或暗藏
10. $route 和 $router 的区别
$router为VueRouter实例，想要导航到不同URL，则应用$router.push办法$route为以后router跳转对象外面能够获取name、path、query、params等
11. NextTick 是做什么的
$nextTick` 是在下次 `DOM` 更新循环完结之后执行提早回调，在批改数据之后应用 `$nextTick`，则能够在回调中获取更新后的 `DOM
具体可参考官网文档：深刻响应式原理
12. Vue 组件 data 为什么必须是函数
因为 js 自身的个性带来的，如果
data是一个对象，那么因为对象自身属于援用类型，当咱们批改其中的一个属性时，会影响到所有 Vue 实例的数据。如果将data作为一个函数返回一个对象，那么每一个实例的data属性都是独立的，不会相互影响了
13. 计算属性 computed 和事件 methods 有什么区别
咱们能够将同一函数定义为一个 method 或者一个计算属性。对于最终的后果，两种形式是雷同的
不同点：
computed: 计算属性是基于它们的依赖进行缓存的, 只有在它的相干依赖产生扭转时才会从新求值对于
method，只有产生从新渲染，method调用总会执行该函数
14. 比照 jQuery，Vue 有什么不同
jQuery 专一视图层，通过操作 DOM 去实现页面的一些逻辑渲染；Vue 专一于数据层，通过数据的双向绑定，最终体现在 DOM 层面，缩小了 DOM 操作 Vue 应用了组件化思维，使得我的项目子集职责清晰，进步了开发效率，不便反复利用，便于协同开发
15. Vue 中怎么自定义指令
全局注册
// 注册一个全局自定义指令 `v-focus`
Vue.directive('focus', {
// 当被绑定的元素插入到 DOM 中时……
inserted: function (el) {
// 聚焦元素
el.focus()}
})部分注册
directives: {
focus: {
// 指令的定义
inserted: function (el) {el.focus()
}
}
}参考 官网文档 - 自定义指令
16. Vue 中怎么自定义过滤器
能够用全局办法
Vue.filter()注册一个自定义过滤器，它接管两个参数：过滤器ID和过滤器函数。过滤器函数以值为参数，返回转换后的值
Vue.filter('reverse', function (value) {return value.split('').reverse().join('')
})
<!-- 'abc' => 'cba' -->
<span v-text="message | reverse"></span>过滤器也同样承受全局注册和部分注册
17. 对 keep-alive 的理解
keep-alive是Vue内置的一个组件，能够使被蕴含的组件保留状态，或防止从新渲染
<keep-alive>
<component>
<!-- 该组件将被缓存！-->
</component>
</keep-alive>能够应用 API 提供的 props，实现组件的动静缓存
具体参考 官网 API
18. Vue 中 key 的作用
key的非凡属性次要用在Vue的虚构DOM算法，在新旧nodes比照时辨识VNodes。如果不应用key，Vue会应用一种最大限度缩小动静元素并且尽可能的尝试修复 / 再利用雷同类型元素的算法。应用key，它会基于key的变动重新排列元素程序，并且会移除key不存在的元素。有雷同父元素的子元素必须有独特的key。反复的key会造成渲染谬误
具体参考 官网 API
19. Vue 的外围是什么
数据驱动 组件零碎
20. vue 等单页面利用的优缺点
长处：
- 良好的交互体验
- 良好的前后端工作拆散模式
- 加重服务器压力
毛病：
- SEO 难度较高
- 后退、后退治理
- 首次加载耗时多
21. vue-router 应用 params 与 query 传参有什么区别
vue-router 能够通过 params 与 query 进行传参
// 传递
this.$router.push({path: './xxx', params: {xx:xxx}})
this.$router.push({path: './xxx', query: {xx:xxx}})
// 接管
this.$route.params
this.$route.queryparams是路由的一部分, 必须要有。query是拼接在url前面的参数，没有也没关系params不设置的时候，刷新页面或者返回参数会丢，query则不会有这个问题
后记
整顿的过程也是从新梳理知识点的过程，途中会发现很多本人了解不是很到位的货色，也算是一种播种吧
