(Vue)MVVM的响应式原理

MVVM简介
  MVVM 是Model-View-ViewModel 的缩写，它是一种基于前端开发的架构模式，其核心是提供对View 和 ViewModel 的双向数据绑定，这使得ViewModel 的状态改变可以自动传递给 View，即所谓的数据双向绑定。        

        Vue.js 是一个提供了 MVVM 风格的双向数据绑定的 Javascript 库，专注于View 层。它的核心是 MVVM 中的 VM，也就是 ViewModel。 ViewModel负责连接 View 和 Model，保证视图和数据的一致性，这种轻量级的架构让前端开发更加高效、便捷。

        MVVM拆开来即为Model-View-ViewModel，有View，ViewModel，Model三部分组成。View层代表的是视图、模版，负责将数据模型转化为UI展现出来。Model层代表的是模型、数据，可以在Model层中定义数据修改和操作的业务逻辑。ViewModel层连接Model和View。
  在MVVM的架构下，View层和Model层并没有直接联系，而是通过ViewModel层进行交互。ViewModel层通过双向数据绑定将View层和Model层连接了起来，使得View层和Model层的同步工作完全是自动的。因此开发者只需关注业务逻辑，无需手动操作DOM，复杂的数据状态维护交给MVVM统一来管理

         Vue.js的实现方式，对数据（Model）进行劫持，当数据变动时，数据会出发劫持时绑定的方法，对视图进行更新。

 

         以上内容借鉴下面的博客
Vue学习--MVVM模型_Ahuiyo的博客-CSDN博客_mvvm模型MVVM模型MVVM简介  MVVM 是Model-View-ViewModel 的缩写，它是一种基于前端开发的架构模式，其核心是提供对View 和 ViewModel 的双向数据绑定，这使得ViewModel 的状态改变可以自动传递给 View，即所谓的数据双向绑定。  Vue.js 是一个提供了 MVVM 风格的双向数据绑定的 Javascript 库，专注于View 层。它的核心是 M...https://blog.csdn.net/qq_41761591/article/details/87621440?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522162598236916780269813355%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fall.%2522%257D&request_id=162598236916780269813355&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~first_rank_v2~rank_v29-3-87621440.pc_search_result_cache&utm_term=Vue+MVVM&spm=1018.2226.3001.4187

         

        上面是对MVVM的一些概念上的介绍,了解了大概的理念那么在vue中mvvm的响应式原理是什么呢?

        在使用vue.js时我们知道当数据发生改变时页面也会随之改变

         响应式原理需要解决的俩个问题:

        1.vue是怎么监听数据的变化的  2.数据发生改变时vue要通知谁发生页面的改变

         侦听数据发生改变主要是使用Object的defineProperty方法里面的get和set。当数据发生改变的时候就会调用set方法,当使用数据的时候就会使用get方法

        每个数据都会定义一个发布者的类,里面有存放订阅者的数组,往数组中添加订阅者的函数，还有一个是遍历每个订阅者并且调用update函数,update函数存放的就是修改dom里面数据的方法

         订阅者里面主要存放的就是更新dom数据的方法

         vue中每个data数据都有一个dep,然后当在获取数据的时候在get方法中创建一个新的订阅者,并将订阅者存放到发布者中。当数据发生改变的时候在set方法中调用dep.notice方法,对dep中所有的订阅者执行update函数

 

         创建wather的过程其实是compile解析el里面的数据,当数据变化时就创建watcher,然后将watcher添加到Dep中，compile也会初始化view中的数据,一但数据发生改变时就会调用订阅者中的 updata方法更新数据