前端面试大全—VUE部分(1)

1，vue的生命周期

1, 创建期间的生命周期函数

beforeCreate：实例刚在内存中被创建出来，此时，还没有初始化好 data 和 methods 属性
created：实例已经在内存中创建OK，此时 data 和 methods 已经创建OK，此时还没有开始编译模板
beforeMount：此时已经完成了模板的编译，但是还没有挂载到页面中
mounted：此时，已经将编译好的模板，挂载到了页面指定的容器中显示

2, 运行期间的生命周期函数

beforeUpdate：状态更新之前执行此函数，此时 data 中的状态值是最新的，但是界面上显示的数据还是旧的，因为此时还没有开始重新渲染DOM节点
updated：实例更新完毕之后调用此函数，此时 data 中的状态值和界面上显示的数据，都已经完成了更新，界面已经被重新渲染好了！

3, 销毁期间的生命周期函数

beforeDestroy：实例销毁之前调用。在这一步，实例仍然完全可用。
destroyed：Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。

1，MVC、MVP、MVVM模式的区别

MVC、MVP和MVVM这些开发模式为了分离视图（View）和模型（Model）而提出来的，直白说就是为了前后端分离

1，MVC（Model View Controller）模式

MVC是比较直观的架构模式，即用户操作 → View（负责接收用户的输入操作）→ Controller（业务逻辑处理）→ Model（数据持久化）→ View（奖结果反馈给View）。
2，MVP（Model View Presenter）模式
MVP是把MVC中的 Controller 换成了 Presenter，目的是为了完全切断 View 跟 Model 之间的联系，由 Presenter 充当桥梁，做到 View-Model 之间通信的完全隔离。
1. 各部分之间的通信是双向的。
2. View与Model不发生联系，都通过Presenter传递。
3. View非常薄，不部署任何业务逻辑，称为“被动式图”（Passive View），即没有任何主动性，而Presenter非常厚，所有逻辑都部署在这里。
3，MVVM（Model View ViewModel）模式

Mvvm定义MVVM是Model-View-ViewModel的简写。即模型-视图-视图模型。

【模型】指的是后端传递的数据。【视图】指的是所看到的页面。【视图模型】mvvm模式的核心，它是连接view和model的桥梁。

一是将【模型】转化成【视图】，即将后端传递的数据转化成所看到的页面。实现的方式是：数据绑定。
二是将【视图】转化成【模型】，即将所看到的页面转化成后端的数据。实现的方式是：DOM 事件监听。这两个方向都实现的，我们称之为数据的双向绑定。

总结：在MVVM的框架下视图和模型是不能直接通信的。它们通过ViewModel来通信，ViewModel通常要实现一个observer观察者，当数据发生变化，ViewModel能够监听到数据的这种变化，然后通知到对应的视图做自动更新；
而当用户操作视图，ViewModel也能监听到视图的变化，然后通知数据做改动，这实际上就实现了数据的双向绑定。并且MVVM中的View 和 ViewModel可以互相通信

MVVM模式优点有以下几点：
视图层低耦合；各种代码写成控件后可重用；前后端分离明显；便于测试和部署

1，Vue与Angular以及React的区别？

1，Vue diff 算法

1，当数据发生变化时，vue是怎么更新节点的？
- 要知道渲染真实DOM的开销是很大的，修改了某个数据，如果直接渲染到真实dom上会引起整个dom树的重绘和重排，因此想要只更新修改的那一小块dom而不要更新整个dom呢？
- 我们先根据真实DOM生成一颗virtual DOM，当virtual DOM某个节点的数据改变后会生成一个新的Vnode，然后Vnode和oldVnode作对比，发现有不一样的地方就直接修改在真实的DOM上，然后使oldVnode的值为Vnode。
- diff的过程就是调用名为patch的函数，比较新旧节点，一边比较一边给真实的DOM打补丁。
2， virtual DOM和真实DOM的区别？

// dom是这样的：
<div>  <p>123</p>  </div>
// 对应的virtual DOM（伪代码）：--- VNode和oldVNode都是对象
//virtual DOM是将真实的DOM的数据抽取出来，以对象的形式模拟树形结构。
var Vnode = {
    tag: 'div',
    children: [{ tag: 'p', text: '123' }]
};

3，diff的比较方式

当数据发生改变时，set方法会让调用Dep.notify通知所有订阅者Watcher，订阅者就会调用patch给真实的DOM打补丁，更新相应的视图。
diff算法就是进行虚拟节点对比，并返回一个patch对象，用来存储两个节点不同的地方，最后用patch记录的消息去局部更新Dom。

key的作用

key的作用主要是为了高效的更新虚拟DOM。vue中在使用相同标签名元素的过渡切换时，也会使用到key属性，其目的也是为了让vue可以区分它们，

利用key的唯一性生成map对象来获取对应节点，比遍历方式更快

在交叉对比中，当新节点跟旧节点头尾交叉对比没有结果时，会根据新节点的key去对比旧节点数组中的key，从而找到相应旧节点（这里对应的是一个key => index 的map映射）。如果没找到就认为是一个新增节点。而如果没有key，那么就会采用遍历查找的方式去找到对应的旧节点。相比而言。map映射的速度更快。

1，vue组件中的data为什么必须是一个函数？

如果不用函数的话，实例化的组件是共享同样的一个data对象，当你修改一个属性的时候，data也恢复阿生改变。

当data是一个函数的时候，每个实例的data属性都是独立的，不会相互影响

1，keep-alive 的作用

keep-alive 是 Vue 内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染。

include - 字符串或正则表达，只有匹配的组件会被缓存；
exclude - 字符串或正则表达式，任何匹配的组件都不会被缓存。

<keep-alive include="a">
  <component>
    <!-- name 为 a 的组件将被缓存！ -->
  </component> 
</keep-alive>

router-view 也是一个组件，如果直接被包在 keep-alive 里面，所有路径匹配到的视图组件都会被缓存，如果只想 router-view 里面某个组件被缓存，怎么办？-------------- 增加 router.meta 属性

// routes 配置
export default [ {
    path: "/",
    name: "home",
    component: Home,
    meta: {  keepAlive: true  }
  }];

<keep-alive>
    <router-view v-if="$route.meta.keepAlive">
        <!-- 这里是会被缓存的视图组件，比如 Home！ -->
    </router-view>
</keep-alive>

1，封装 vue 组件的过程

组件可以提升整个项目的开发效率。能够把页面抽象成多个相对独立的模块，解决了我们传统项目开发：效率低、难维护、复用性等问题。
使用Vue.extend方法创建一个组件，然后使用Vue.component方法注册组件。子组件需要数据，可以在props中接受定义。而子组件修改好数据后，想把数据传递给父组件。可以采用emit方法。

1，vue 中子组件调用父组件的方法

vue 中父组件调用子组件的方法

1，vue.cli中怎样使用自定义的组件？有遇到过哪些问题吗？

1，在components目录新建你的组件文件（smithButton.vue），script一定要export default {

2，在需要用的页面（组件）中导入：import smithButton from ‘…/components/smithButton.vue’

3，注入到vue的子组件的components属性上面,components:{smithButton}

4，在template视图view中使用，<smith-button>

问题有：smithButton命名，使用的时候则smith-button。

1，Vuex 状态管理机制

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。

把需要多个组件共享的变量全部存储在一个对象里面。然后将这个对象放在顶层的Vue实例中，让其他组件可以使用。那么多个组件就可以共享这个对象中的所有变量属性。

应用级的状态集中放在store中；改变状态的方式是提交mutations，这是个同步的事物；异步逻辑应该封装在action中。

在这里插入图片描述

1，Vue的响应式原理

当一个Vue实例创建时，vue会遍历data选项的属性，用 Object.defineProperty 将它们转为 getter/setter并且在内部追踪相关依赖，在属性被访问和修改时通知变化。

每个组件实例都有相应的 watcher 程序实例，它会在组件渲染的过程中把属性记录为依赖，之后当依赖项的 setter 被调用时，会通知 watcher 重新计算，从而致使它关联的组件得以更新。

1，MVC、MVP、MVVM模式的区别

1，单页面与多页面间的区别及优缺点

单页面应用
浏览器一开始要加载所有必须的 html, js, css。所有的页面内容都包含在这个所谓的主页面中。分开写（页面片段），然后在交互的时候由路由程序动态载入，单页面的页面跳转，仅刷新局部资源。片段之间的切换快，比较容易实现转场动画。多应用于pc端。
多页面应用
一个项目是由多个完整的html页面组成，页面跳转所有的资源都要重新加载，页面之间的切换会出现卡顿空白的问题，不容易实现切换动画等