Vue 2实现响应式的基本原理？

Vue2实现响应式原理的关键是通过使用Object.defineProperty方法来劫持对象的属性，以便在属性值发生变化时能够触发相应的更新。具体而言，Vue2会对data对象中的每个属性进行劫持，并为每个属性创建一个依赖收集器（Dep）和一个观察者（Watcher）。

当属性被访问时，观察者会被添加到属性的依赖收集器中。当属性的值发生变化时，依赖收集器会通知所有相关的观察者进行更新。这样就实现了数据驱动视图的效果。

Vue2 MVVM的理解？

MVVM 分为 Model、View、ViewModel：

• Model 代表数据模型，数据和业务逻辑都在 Model 层中定义；
• View 代表 UI 视图，负责数据的展示；
• ViewModel 负责监听 Model 中数据的改变并且控制视图的更新，处理用户交互操作；

当你将一个普通的JavaScript对象传递给Vue实例的data选项时，Vue会将该对象转化为响应式的数据对象。这意味着当数据发生变化时，相关的视图会自动更新，而不需要手动操作DOM。ViewModel负责处理数据的双向绑定，将Model和View进行关联，当数据变化时更新视图，当视图变化时更新数据。这种数据驱动的方式使得开发者可以更简洁、高效地处理数据和用户界面的交互。

在Vue2中，可以通过以下代码示例来创建一个简单的ViewModel:

<div id="app">
  <!-- View层 -->
  <input type="text" v-model="mytext">
</div>
<script>
  Vue.config.productionTip = false;
  const vm = new Vue({
    // ViewModel层
    el: '#app',
    data: {
      // Model层
      mytext: ''
    }
  })
  console.log(vm);
</script>

在上述代码中，通过v-model指令将View中的输入框与ViewModel中的mytext属性进行绑定。当用户在输入框中输入数据时，ViewModel会自动将这些数据存储到mytext属性中，并将其同步到View上显示出来。