Vue 理解 10

1 响应式原理

1 响应式的原理是什么: 数据和更新视图, 之间存在影响关系 💦

2 响应式的发生过程: 在Data中, 触发Watcher事件, 组件生成虚拟DOM树 🔶
-----------------------------------------------------------------------------------
1 俩种触发情况: 
  1 Data 中的数据, 发生改变的时, Data内部隐式的 set, 就会去触发 Watcher事件  //修改数据
  2 Data 中得到新数据时, Data内部隐式的 get, 就会去触发 Watcher 事件  //初始化页面

2 Watcher 事件的作用: 更新组件视图

3 整个详细过程:  //可不看, 就是用于解释的
  1 数据  //新数据
  2 Data  //获取新数据 get - 修改就数据 set
  3 Watcher  //更新视图
  4 组件  //视图更新, 组件会生成虚拟DOM树
-----------------------------------------------------------------------------------

3 响应式业务逻辑: 🔶
-----------------------------------------------------------------------------------
1 把一个 JS对象, 作为 data选项

2 遍历该对象所有属性, 且用 defineProperty()方法, 劫持所有属性, 放在当前的 Vue组件实例上

3 相关解释: 
  1 defineProperty()  [读音: 低饭破若破题]
    1 用于定义对象的
    2 它定义的对象里面, 就有 get/set 这俩个回调函数  //通过观察者模式, 监听数据
    3 属性被修改的时候, 就会触发 set   //某个属性的属性值, 改变的时候, 就会触发set
    4 当属性值被访问的时候, 就会触发 get  //HTML结构, 或方法中, 会用到, 就会发生访问

  2 劫持的解释: 
    1 
    2 
    3 

  3 业务逻辑: 
    1 遍历 Data对象, 用取到得属性和属性值, 通过 defineProperty()方法, 定义新得对象
    2 而这个新的对象, 由于 defineProperty()方法的特点, 新对象有了改变数据, 就去触发 Watcher 的能力
-----------------------------------------------------------------------------------

2 MVVM

1 简单介绍: 
--------------------------------------------------------------------------------------------
1 MVVM (Model-View-ViewModel): 也可以说是 MVC (Model-View-Controller) 的改进版 (MVC: 模型--视图--控制器)

2 MVVM 存在的价值: 
  1 极大了提高了开发效率
  2 提高了项目的, 可维护性和扩展性

3 MVVM 框架的详细解读: 
  1 Vue 是一个 MVVM 框架
  2 MVVM 框架的核心是 == 模型, 视图, 视图模型  (他们的核心原理就是) == 数据双向绑定 (也就是响应式原理)
  3 响应式原理 == defineProperty() 方法的劫持 + 观察者模式 (也就是发布订阅模式)
  4 Vue -> MVVM (数据双向绑定) -> 响应式原理 -> defineProperty() + 观察者模式
--------------------------------------------------------------------------------------------

2 MVVM 所指代的内容是: 模型--视图--视图模型 🔶
--------------------------------------------------------------------------------------------
  1 模型 Model: 指的是后端传递的数据
  2 视图 View: 指的是所看到的页面
  3 视图模型 ViewModel: MVVM 模式的核心  //是连接view和model的桥梁
--------------------------------------------------------------------------------------------

3 相关解释: 🔶
--------------------------------------------------------------------------------------------
  1 视图模型的作用: //同时实现下面俩个作用的情况, 我们就称之为, 数据双向绑定
    1 将--模型--转化成--视图  //就是将后端传递的数据转化成所看到的页面, 实现方式是 -> 数据绑定
    2 将--视图--转化成--模型  //就是将所看到的页面转化成后端的数据, 实现方式是 -> DOM 事件监听
    
  2 视图模型作用的具体实现: 
    1 它可以在, 取出 Model 数据的同时, 帮忙处理 View中, 的展示内容, 所涉及到的业务逻辑
--------------------------------------------------------------------------------------------

4 深入理解: 🔶
  1 在 MVVM的框架下, 视图--模型, 是通过 ViewModel来通信的
  2 ViewModel 通常要实现一个 observer观察者  //也就是它把, 视图和模型联系起来的, 它和俩者都有联系
  3 当数据发生变化, ViewModel 能够监听到数据的这种变化, 然后通知到对应的视图做自动更新
  4 当用户操作视图, ViewModel 也能够监听到视图数据的变化, 然后通知数据做改动
    //用户把 View 数据改变的时候, Model 中的数据也同步更新了
    //Model 中的数据发生改变时, View 展示的数据也会同步更新
  5 如此便实现了数据的双向绑定
-------------------------------------------------------------------------------------------

3 原理

呵呵呵