https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2019/8/19/16ca75871f729d89~tplv-t2oaga2asx-watermark.awebp

MVVM

Vue的双向绑定是建立在MVVM(Model-View-ViewModel)模型上的。MVVM分为三部分,数据层, 视图层,业务逻辑层.

  1. 数据层Model主要用于存放数据，一般是指后端的相关数据操作
  2. 视图层View是最接近用户的一层，用户肉眼可看到的页面效果交互都是属于这层
  3. 业务逻辑层，就是视图模型层，这层主要是起到沟通数据层与逻辑层的作用，关联View和Model

双向就是 数据变化更新视图，视图变化更新数据

双向数据绑定

这里主要包含两部分

  1. 监听器Observer,这部分用来劫持并监听所有的属性
  2. 解析器Compile,这部分用来对每个元素节点指令进行扫描和解析，根据指令替换数据，并绑定对应的更新函数

https://jonny-wei.github.io/blog/images/vue/vue响应式原理1.png

具体实现原理

初始

new Vue()执行初始化会遍历递归data，在Observer中通过Object.defineProperty的get,set对数据进行响应化处理。

视图变化更新数据

在对模板进行编译时，Compiler会对v-开头的指令进行解析，找到动态绑定的数据，从data中获取数据并初始化视图。如果遇到v-model,会根据不同的元素使用不同的属性并抛出不同的事件，处理完成后更新data中的数据。

  1. text和textarea，会使用value属性和input事件
  2. checkbox和radio使用checked和change事件