前端面试题（vue)

vue核心：数据驱动和组件化

MVVM

MVVM(modal-view-viewModel) 是一种设计思想。Model层代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑；view代表UI组件，它负责将数据模型转化为UI，viewModel是一个同步view和Model的对象。
在MVVM架构下，view和Model之间并没有直接的联系，而是通过view Model进行交互，model和viewModel之间的交互是双向的，因此view数据的变化会同步到Model中，而Model数据的变化也会立即反应到view上。
开发者只需关注业务逻辑，不需要手动操作DOM，不需要关注数据状态的同步问题。

Vue的生命周期

vue实例从创建到销毁的过程，就是生命周期，就是从开始创建，初始化数据，编译模板，挂载DOM->渲染、更新->渲染、卸载等一系列过程。
可以分为8个阶段：创建前/后，载入前/后，更新前/后，销毁前/后

• 创建前/后：在beforeCreate阶段，vue实例的挂载元素el和数据对象data都为undefined，还未初始化。在create阶段，vue实例的数据对象有data了，el还没有
• 载入前/后：在beforeMount阶段，vue实例的$el和data都初始化了，但还是挂载之前为虚拟的dom节点，data,message换未替换。mount阶段，vue实例挂载完成，data,message成功渲染。
• 更新前/后：当data变化时，会触发beforeUpdate和update方法
• 销毁前/后：在执行destroy方法后，对data的改变不再触发周期函数，说明此时vue实例已经解除了事件监听以及和dom的绑定，但dom结结构依然存在。
  （1）第一次页面加载触发哪几个钩子？
  beforeCreate,created,beforeMount,mounted
  (2)Dom渲染在哪个周期中就已经完成
  mounted中
  （3）简单描述每个周期适合场景
  beforeCreate:可以加个loading事件，加载实例时触发。
  create：初始化完成时的事件写在这里
  mounted：挂载元素，获取DOM节点
  updated:对数据统一处理，写相应函数
  beforeDestory:做一个确认停止事件的确认框
  nextTick：更新数据后立即操作Dom

组件通信

父子组件通信

prop/ $ emit
父组件通过prop的方式向子组件传递数据，通过$emit，子组件可以向父组件通信。
父组件----->子组件：prop
子组件----->父组件：$ on/ $ emit

• props只可以从上一级组件传递到下一级组件，即所谓的单向数据流。而且props只读，不可被修改。
• $ emit绑定一个自定义事件，当这个语句被执行时，就会将参数arg传递给父组件，父组件通过v-on监听并接受参数。

$ children/ $ parent
获取组件实例：$ children / $ parent, $ refs.xxx,获取到实例后直接获取属性数据或调用组件方法。
当需要父组件直接访问子组件，子组件直接访问父组件，或子组件访问根组件，可以使用$children / $parent

父---->子$children或 $refs

• $children可以访问该父组件的所有子组件，返回的是一个数组类型，包含所有子组件对象，因此可以进一步访问子组件的属性、方法。
• $ refs可以获取一个特定的子组件，$refs和ref指令通常是一起使用的。首先给某个子组件设置ref属性绑定一个特定的ID，通过this. $refs.ID就可以访问到该子组件。
  子---->父：$ parent返回一个对象

父子组件：props、 $ emit / $ on 、$ parent / $ children 、ref 、$ attr / $ listeners

兄弟组件通信

Event Bus:每一个Vue实例都是一个Event Bus，都支持$ on/$ emit,可以为兄弟组件的实例之间new一个Vue实例，作为Event Bus进行通信。
Vuex：将状态和方法提取到vuex，完成共享。

跨层组件通信

provide/inject、Event Bus、Vuex

vue响应式原理

1、什么是响应式？
“响应式”就是能够使数据变化可以被检测到并对这种变化做出响应的机制。
2、为什么vue需要响应式？
vue是一个MVVM框架，MVVM最核心的就是数据驱动视图。通俗一点，用户不直接操作DOM，而是通过操作数据，当数据改变时，vue内部监听数据变化然后更新视图。而响应式，则是实现数据驱动视图的第一步，即监听数据的变化，使用户在设置数据时，可以通知vue内部进行视图更新。
3、vue的响应式是怎么实现的？

<