全网前端面试题汇总（5）Vue

1. MVC和MMVM
MVC Model-View-Controller 模型-视图-控制器

Model（模型）处理数据逻辑的部分；
View（视图）处理数据显示的部分；
Controller（控制器）处理用户交互的部分；
MVC的思想：Controller负责将Model的数据用View显示出来；
Input ——> Controller ——> Model --> View

MVVVM Model-View-ViewModel

ViewModel：实现数据的双向绑定
（1）数据绑定：将模型转化为视图
（2）DOM事件监听：将视图转化为模型
Input ——> View <——> ViewModel <——> Model
实现了View和Model的自动同步；（View和Model不能直接通信）
Vue没有完全遵循MVVM，通过$refs实现了Model操作View；（VM）

2. Vue生命周期

beforeCreate：实例初始化之后，数据观测（data）和event/watch事件配置之前；
created：事件配置完成之后，DOM挂载之前（没有$el，可以通过vm.$nextTick来访问DOM）；
beforeMount：DOM挂载之前；
mounted：DOM挂载之后，数据完成了双向绑定；
beforeUpdate：数据更新之前（DOM重新渲染之前）；
updated：数据更新之后（DOM重新渲染完成），此时不应更新数据，避免导致无限循环的更新；
beforeDestroy：实例销毁之前；
destroyed：实例销毁之后；
activated：keep-alive下，组件激活时；
deactivated：keep-alive下，组件销毁时；

异步请求可以在哪一步发起？

created、beforeMount、mounted

3. Vue的通讯方式有哪些

（1）props（父传子），$emit（子传父）；
（2）$refs获取组件实例；
（3）eventBus事件总线；
（4）$parent（获取当前组件父组件），$children（获取当前组件子组件）；
（5）利用Vuex

4. data为什么用函数的形式

每复用一次组件都能返回一份新的data

5. v-if、v-show区别

v-if：直接操作DOM的节点，false时删除；
v-show：控制元素的display属性，false时为none（频繁切换时使用）；

6. Vue指令
（1）v-if v-else v-else-if v-show （2）v-for 循环 （3）v-bind 绑定属性 v-on 监听DOM事件 v-model 处理input和value （4）v-text v-html （5）v-once 元素值渲染一次 （6）v-pre 跳过元素和子元素的编译过程 v-cloak 解决初始化慢到页面闪动的最佳实践
7. Vue单向数据流

数据总是由父元素传递到子元素，子组件无法修改父组件传递过来的数据（props）；

8. computed和watch

computed：计算属性，计算值发生变化时返回内容，可以设置getter和setter；
watch：监听到值发生变化时执行回调；

9. v-if和v-for

v-if和v-for不建议在同意标签中使用，v-for优先级高于v-if，解析时先解析v-for，先渲染在进行条件判断会导致性能上的浪费；

10. Vue数据双向绑定原理
数据劫持Object.defineProperty + 发布者-订阅者模式watcher

（1）通过Object.defineProperty方法劫持数据
  var obj = {};
  Object.defineProperty(obj,'name',{
    get:function(){},
    set:function(new){},
  })
  obj.name;//调用get方法
  obj.name = 1;//调用set方法
（2）set通知watcher派发更新

（Vue事件绑定也是发布-订阅者模式，$on订阅事件，emit发布）
11. Vue父子组件生命周期函数执行顺序

（1）加载 （父）beforCreate --> （父）created --> （父）beforMont --> （子）beforeCreated --> （子）created --> （子）beforeMount --> （子）mounted --> （父）mounted
（2）更新 （父）beforeUpdate --> （子）beforeUpdate --> （子）updated --> （父）updated
（3）销毁 （父）beforeDestroy --> （子）beforeDestroy -->（子）destroyed --> （父）destroyed

12. Vue虚拟DOM

Virtual DOM是对DOM的抽象，用VNode虚拟节点来描述DOM节点；
Vue将template模板编译成虚拟DOM渲染函数，结合Vue的响应系统，通过patch算法智能计算出重新渲染组件的最小代价，并渲染到DOM中；
优点：（1）保证性能（2）实现双向绑定（3）跨平台操作更方便
缺点：（1）首次渲染时慢（多一层DOM计算）（2）无法进行极致优化

13. Vue路由
两种路由模式> https://www.cnblogs.com/hasaki-wang/p/15606259.html