「这是我参与2022首次更文挑战的第15天，活动详情查看：2022首次更文挑战」。
Vue 是什么？
- Vue.js 是一门 MVVM 框架，框架的思路是数据映射视图；是数据驱动的，有别于我们过往的 DOM 操作开发思想；
MVC 和 MVVM
MVC 和 MVVM 都是设计模式，是框架的开发理念；
- MVC: M model 是数据层 V view 视图层 C controller 控制器层，控制器层是连接 model 和视图的；一般是单向数据流，通过 Controller 把数据绑定到 view 中
- MVVM: M model 数据层 V view 视图层 VM view-model 视图模型层 通过视图模型把数据层和视图层练习起来，可以双向数据绑定，可以单向数据绑定
此外，Vue 是响应式的框架；所谓响应式不是 css 的响应式，而是通过修改数据，视图自动发生变化。当视图发生变化时，数据也会随着改变；这就是双向数据绑定；
双向数据绑定
什么是双向数据绑定？
- 双向数据绑定：通过 Vue 模板语法，把 Vue 中 data 里面的数据绑定到页面中；如果我们修改这个数据，页面中绑定这个数据的地方的值都会跟着自动更新；
双向数据绑定的原理：
vue 利用的 Object.defineProperty 这个方法遍历 data 中所有的属性，给每个属性增加了一个 setter 和 getter 方法，当数据发生变化的时候，会触发 setter 方法，当获取数据时，会触发 getter 方法；Object.defineProperty 在 IE8 及以下不兼容，所以 vue 只能在 IE9 以上使用；
let obj = {
_name: 1
}
let input = document.getElementById('input');
let app = document.getElementById('app');
// defineProperty 是一个函数，用来定义对象属性的特性；是 Object 的静态方法
Object.defineProperty(obj, 'name', {
get() {
return this._name;
},
set(val) {
this._name = val;
app.innerHTML = this._name;
// vue 使用的是发布订阅模式，vue 会收集页面中所有绑定数据的元素，这些相当于订阅了 data 里面的数据变更的事件，当数据发生变更时，会触发 set 方法，在 set 方法中会把所有的使用这个属性的元素的值更新成最新的值（发布事件）；
}
});
// v-model 的原理也是利用了 DOM 事件，当表单元素的值发生变化时，设置对象的属性，然后设置对象的属性的时候，会触发 set 方法，在 set 方法中，会去修改所有依赖这些值的地方
input.oninput = function () {
obj.name = this.value
};
