关于vue.js:前端面试题Vue前端爬坑

参考文章：前端面试题 -- 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 会造成渲染谬误