ViewModel 的结构

最新推荐文章于 2022-03-21 15:38:31 发布

hxa12345

最新推荐文章于 2022-03-21 15:38:31 发布

阅读量300

点赞数

文章标签： javascript vue.js 开发语言

本文链接：https://blog.csdn.net/hxa12345/article/details/122549683

版权

1、ViewModel：

抽象类，主要有 clear 方法，它是 final 级，不可修改，clear 方法中包含 onClear 钩子，开发者可重写 onClear 方法来自定义数据的清空

2、ViewModelStore：

内部维护一个 HashMap 以管理 ViewModel

3、ViewModelStoreOwner：

接口，ViewModelStore 的作用域，实现类为 ComponentActivity 和 Fragment，此外还有 FragmentActivity.HostCallbacks

4、ViewModelProvider：

用于创建 ViewModel，其构造方法有两个参数：

第一个参数传入 ViewModelStoreOwner ，确定了 ViewModelStore 的作用域；

第二个参数为 ViewModelProvider.Factory，用于初始化 ViewModel 对象，默认为 getDefaultViewModelProviderFactory() 方法获取的 factory。

5、几种实现双向绑定的做法

目前几种主流的mvc(vm)框架都实现了单向数据绑定，而我所理解的双向数据绑定无非就是在单向绑定的基础上给可输入元素（input、textare等）添加了change(input)事件，来动态修改model和 view，并没有多高深。所以无需太过介怀是实现的单向或双向绑定。

实现数据绑定的做法有大致如下几种：

发布者-订阅者模式（backbone.js）
脏值检查（angular.js）

数据劫持（vue.js）

发布者-订阅者模式: 一般通过sub, pub的方式实现数据和视图的绑定监听，更新数据方式通常做法是 vm.set('property', value)，不太熟悉去问一下度娘

这种方式现在毕竟太low了，我们更希望通过 vm.property = value这种方式更新数据，同时自动更新视图，于是有了下面两种方式

脏值检查: angular.js 是通过脏值检测的方式比对数据是否有变更，来决定是否更新视图，最简单的方式就是通过 setInterval() 定时轮询检测数据变动，当然Google不会这么low，angular只有在指定的事件触发时进入脏值检测，大致如下：

DOM事件，譬如用户输入文本，点击按钮等。( ng-click )
XHR响应事件 ( $http )
浏览器Location变更事件 ( $location )
Timer事件( $timeout , $interval )
执行 $digest() 或 $apply()

数据劫持: vue.js 则是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。

思路整理

已经了解到vue是通过数据劫持的方式来做数据绑定的，其中最核心的方法便是通过Object.defineProperty()来实现对属性的劫持，达到监听数据变动的目的，无疑这个方法是本文中最重要、最基础的内容之一，如果不熟悉defineProperty，猛戳这里整理了一下，要实现mvvm的双向绑定，就必须要实现以下几点：