VUE-高频面试题，mvc、mvvm，双向绑定的原理，生命周期，v-if和v-show，v-for绑定key？组件中的data为什么定义成函数

一，什么是mvc，mvvm 模型

MVC：m(模型 : 数据) ; v(视图 : 页面) ; c(控制器 : 在这里写js业务逻辑，把数据M 渲染到 视图 V )

MVVM: m(模型 : 数据) ; v(视图 : 页面) ; vm(视图模型) 通过 数据双向绑定让数据自动地双向同步 不再需要操作DOM

V （修改视图） -> M（数据自动同步）

M（修改数据） -> V （视图自动同步）

数据改变会影响视图，视图改变会影响数据

二，VUE双向数据绑定原理

vue.js数据劫持是结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter、getter，在数据变动时发布消息给订阅者，触发相应的监听回调。

三，生命周期

Vue 实例从创建到销毁的过程，就是生命周期。也就是从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程，我们称这是 Vue 的生命周期。

1.创建 前/后

在beforCreate生命周期函数执行的时候，data 和 method 还没有初始化

在created生命周期函数执行的时候，data 和 method 还没有初始化

 2.渲染 前/后

在beforMount生命周期函数执行的时候，已经编译好了模板字符串、但还没有真正渲染到页面中去

在mounted生命周期函数执行的时候，已经渲染完，可以看到页面

3.数据更新 前/后

在beforUpdate生命周期函数执行的时候，已经可以拿到最新的数据，但还没有渲染到视图中去

在updated生命周期函数执行的时候，已经把更新后的数据渲染到视图中去了

4.销毁 前/后

在beforDestroy生命周期函数执行的时候，实例进入准备销毁的阶段、此时data、methods、指令等还是可用状态

在destroyed生命周期函数执行的时候，实例已经完成销、此时data、methods、指令等不可用了