了解MVVM框架吗？
- Vue.js
- React.js
- Angular.js
谈谈你对MVVM的认识？
MVVM的定义
M：Model（服务器上的业务逻辑操作）
V：View（页面）
VM：ViewModel（Model与View之间核心枢纽，比如Vue.js）
微信图片_20181130154445.png
Model与ViewModel之间的双向关系
Model通过Ajax通信，发送数据给ViewModel。
ViewModel也可以通过Ajax通信，发送请求给Model。ViewModel与View之间的双向关系
ViewModel中的数据改变，可以同时改变View上的显示内容。
View上的内容改变(比如输入框中的内容)，也可以同时改变ViewModel中对应的数据。
MVC的定义，MVC与MVVM的区别
好文链接：MVC与MVVM的区别
双向绑定是什么意思？
微信图片_20181202104626.png
双向是指ViewModel中的data部分和View之间的双向关系。
正向：数据驱动页面
反向：页面更新数据
绑定是指自动化处理，data改变了view随之改变，反之也是。
不用像传统方式那样，通过onChange事件获取用户输入，然后再通过改变innerHtml修改显示。
双向绑定是什么原理，可以写出来吗？
微信图片_20181202141158.png
双向绑定都是依赖ES5中一个重要的API，Object.defineProperty。
- 正向
Object.defineProperty的作用是监听data的变化，再监听到变化之后会触发一个回调函数。
所以，我们要在Object.defineProperty的回调函数中写明data与View的关联就可以了，后续中data有变化就会自动根据你写的关联处理修改View的显示内容。 - 反向
当用户在View中输入内容时，使用input事件(比如onChange)，修改data的值。
有些框架已经为我们自动做了这个事情，不需要我们再关心。
比如，在Vue框架中，可以使用V-Model方便的关联view和data。
Object.defineProperty()
定义：
Object.defineProperty() 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性， 并返回这个对象。
语法：
Object.defineProperty(obj, prop, descriptor)
参数：
obj：要在其上定义属性的对象。
prop：要定义或修改的属性的名称。
descriptor：将被定义或修改的属性描述符。
返回值：
被传递给函数的对象。
// 这个例子中，把obj对象和input绑定了。
// 当obj的值发生变化时，input框的内容也会自动发生变化
// 当然，input框中的内容发生改变时，只要帮点onChange事件就能改变obj了，不再做演示
<input type="text" id="userInput">
<script>
// 数据双向绑定
const obj = {};
Object.defineProperty(obj, "a", {
value: 12,
writable: true,
enumerable: true,
configurable: true
});
let bValue = 88;
Object.defineProperty(obj, "b", {
enumrable: true,
configurable: true,
get: function () {
return bValue;
},
set: function (value) {
bValue = value;
// 绑定输入框
const userInput = document.getElementById("userInput");
userInput.value = value;
}
});
</script>
object.defineProperty()与reflect.defineProperty()的区别
- object.defineProperty()返回的是修改后的新对象
- reflect.defineProperty()返回的是一个布尔值
使用了什么设计模式？
微信图片_20181203103556.png
- Observer：监听者
监听Data的变化，一旦监听到变化，就通知Dep(观察者列表) - Dep：观察者列表
一旦收到来自Observer的通知，就会回调所有的观察者(Watcher)，做相应的更新处理。 - Watcher：观察者
观察者这里存放的就是相应的更新处理，会更新View的显示内容。
另外，观察者可以通过订阅的方式，加入到Dep(观察者列表中)
生命周期是什么？
-
Vue的生命周期
lifecycle.png -
React的生命周期
lifecycle-react.png
有看过源码吗？
。。。
