fj1247565817
fj1247565817

前端面试准备-------Vue

本文是根据知乎 爱前端不爱恋爱提供的目录整理供大家学习，后将持续更新
1、vue解决了什么问题
2、MVVM的理解
3、如何实现一个自定义组件，不同组件之间如何通信的？
4、nextTick
5、生命周期
6、虚拟dom的原理
7、双向绑定的原理？数据劫持？
8、组件通信
父->子
子->父
9、Proxy 相比于 defineProperty 的优势
10、watch computed区别
11、vue-router(hash， HTML5 新增的 pushState）
12、单页应用，如何实现其路由功能—路由原理
13、vue-router如何做用户登录权限等
14、你在项目中怎么实现路由的嵌套
15、vuex的理解

一、vue解决了什么问题

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。
Vue 被设计为可以自底向上逐层应用。
Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。创建可维护性和可测试性更强的代码库。

二、MVVM的理解

MVVM是Model-View-ViewModel的简写。它本质上就是MVC 的改进版。

MVVM 就是将其中的View 的状态和行为抽象化，让我们将视图 UI 和业务逻辑分开。当然这些事 ViewModel 已经帮我们做了，它可以取出 Model 的数据同时帮忙处理 View 中由于需要展示内容而涉及的业务逻辑。

Model（模型）是指代表真实状态内容的领域模型（面向对象），或指代表内容的数据访问层（以数据为中心）。

View（视图）是用户在屏幕上看到的结构、布局和外观（UI）。

ViewModel（视图模型）是暴露公共属性和命令的视图的抽象。MVVM没有MVC模式的控制器，也没有MVP模式的presenter，有的是一个绑定器。在视图模型中，绑定器在视图和数据绑定器之间进行通信。

绑定器声明性数据和命令绑定隐含在MVVM模式中。在Microsoft解决方案堆中，绑定器是一种名为XAML的标记语言。绑定器使开发人员免于被迫编写样板式逻辑来同步视图模型和视图。在微软的堆之外实现时，声明性数据绑定技术的出现是实现该模式的一个关键因素。

三、如何实现一个自定义组件，不同组件之间如何通信的？

vue-cli项目创建一个Loading效果的组件
定义一个组件

不同组件之间通信

首先在Vue实例对象添加自定义bus属性，然后将content的值保存到data中。

通过给组件添加点击事件，this.bus.$emit('change', this.selfcontent)向其它组件发送自定义事件并传值。

最后组件通过生命周期函数mounted来获取自定义事件传来的消息 this.bus.$on（'change'，(msg)=>{this.selfcontent++})）来改变数据。

四、nextTick

Vue 在更新 DOM 时是异步执行的。只要侦听到数据变化，Vue 将开启一个队列，并缓冲在同一事件循环中发生的所有数据变更。

用法：

在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。

Vue.nextTick( [callback, context] )用于延迟执行一段代码，它接受2个参数（回调函数和执行回调函数的上下文环境），如果没有提供回调且在支持 Promise 的环境中，则返回一个 Promise。请注意 Vue 不自带 Promise 的 polyfill，所以如果你的目标浏览器不原生支持 Promise (IE：你们都看我干嘛)，你得自己提供 polyfill。



	
		
		
		
	
	
		
{{message}}

五、生命周期

每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。

所有的生命周期钩子自动绑定 this 上下文到实例中，因此你可以访问数据，对属性和方法进行运算。这意味着你不能使用箭头函数来定义一个生命周期方法 (例如 created: () => this.fetchTodos())。这是因为箭头函数绑定了父上下文，因此 this 与你期待的 Vue 实例不同，this.fetchTodos 的行为未定义。



	
		
		Vue生命周期
		
	
	
		
{{content}}

beforeCreate在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。

created在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。

beforeMount在挂载开始之前被调用：相关的 render 函数首次被调用。

mounted 当 el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$el 也在文档内。

注意 mounted 不会承诺所有的子组件也都一起被挂载。如果你希望等到整个视图都渲染完毕，可以用 vm.$nextTick 替换掉 mounted

beforeUpdate数据更新时调用，发生在虚拟 DOM 打补丁之前。这里适合在更新之前访问现有的 DOM，比如手动移除已添加的事件监听器。

updated由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。
当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下，你应该避免在此期间更改状态。如果要相应状态改变，通常最好使用计算属性或 watcher 取而代之。

注意 updated 不会承诺所有的子组件也都一起被重绘。如果你希望等到整个视图都重绘完毕，可以用 vm.$nextTick 替换掉 updated

beforeDestroy实例销毁之前调用。在这一步，实例仍然完全可用。

destroyed 当Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。

六、虚拟dom的原理

vue 虚拟dom实现原理
virtual-dom(后文简称vdom)的概念大规模的推广还是得益于react出现，virtual-dom也是react这个框架的非常重要的特性之一。相比于频繁的手动去操作dom而带来性能问题，vdom很好的将dom做了一层映射关系，进而将在我们本需要直接进行dom的一系列操作，映射到了操作vdom，而vdom上定义了关于真实dom的一些关键的信息，vdom完全是用js去实现，和宿主浏览器没有任何联系，此外得益于js的执行速度，将原本需要在真实dom进行的创建节点,删除节点,添加节点等一系列复杂的dom操作全部放到vdom中进行，这样就通过操作vdom来提高直接操作的dom的效率和性能。

七、双向绑定的原理？数据劫持？

双向绑定
你可以用 v-model 指令在表单 、