什么是数据驱动?
数据驱动是 vuejs 最大的特点. 在 vuejs 中, 所谓的数据驱动就是当数据发生变化的时候, 用户界面发生相应的变化, 开发者不需要手动的去修改 dom.
比如说我们点击一个 button, 需要元素的文本进行是和否的切换. 在 jQuery 刀耕火种的年代中, 对于页面的修改我们一般是这样的一个流程, 我们对 button 绑定事件, 然后获取文案对应的元素 dom 对象, 然后根据切换修改该 dom 对象的文案值.
而对于 vuejs 实现这个功能的流程, 只需要在 button 元素上指明事件, 同时声明对应文案的属性, 点击事件的时候改变属性的值, 对应元素的文本就能够自动的进行切换, 我们不需要像以前那样手动的操作 dom.
简而言之, 就是 vuejs 帮我们封装了数据和 dom 对象操作的映射, 我们只需要关心数据的逻辑处理, 数据的变化就能够自然的通知页面进行页面的重新渲染.
这样做的确实给我们带来的好处, 我们不需要再在代码中频繁地去操作 dom 了, 在实际项目中, 我们有很大部分代码都是在数据修改以后, 手动操作重新渲染页面元素, 当页面越来越复杂的时候, 页面代码组织会越来难以维护. 同时, JS 对 dom 的频繁操作, 会使得页面代码的出错概率高, 页面的视图展示会融合在 JS 代码中, 对于页面视图显示的升级也不友好.
MVVM 框架
Vuejs 的数据驱动是通过 MVVM 这种框架来实现的. MVVM 框架主要包含 3 个部分: model,view 和 viewmodel.
Model: 指的是数据部分, 对应到前端就是 JavaScript 对象
View: 指的是视图部分, 对应前端就是 dom
Viewmodel: 就是连接视图与数据的中间件
数据 (Model) 和视图 (View) 是不能直接通讯的, 而是需要通过 ViewModel 来实现双方的通讯. 当数据变化的时候, viewModel 能够监听到这种变化, 并及时的通知 view 做出修改. 同样的, 当页面有事件触发时, viewMOdel 也能够监听到事件, 并通知 model 进行响应. Viewmodel 就相当于一个观察者, 监控着双方的动作, 并及时通知对方进行相应的操作.
Vuejs 的数据驱动实现
对于数据驱动的实现, 我们可以简单的通过定时器来实现这个功能, 定时器定时监控对象数据, 定时器监控数据变化, 确定是否更新界面
- a = 1;
- function renderDom(){
- document.getElementById('app').innerhtml = '数据是' + a;
- }
- function watcher(method){
- var b = a;
- method.apply();
- return setInterval(function(){
- if(b != a){
- method.apply();
- b = a;
- }
- }, 1000)
- }
- watcher(renderDom);
当然 vuejs 不可能是这样简单暴力的实现方式, vuejs 是通过在实现一个观察者来实现的数据驱动.
首先, vuejs 在实例化的过程中, 会对遍历传给实例化对象选项中的 data 选项, 遍历其所有属性并使用 Object.defineProperty 把这些属性全部转为 getter/setter.
同时每一个实例对象都有一个 watcher 实例对象, 他会在模板编译的过程中, 用 getter 去访问 data 的属性, watcher 此时就会把用到的 data 属性记为依赖, 这样就建立了视图与数据之间的联系. 当之后我们渲染视图的数据依赖发生改变 (即数据的 setter 被调用) 的时候, watcher 会对比前后两个的数值是否发生变化, 然后确定是否通知视图进行重新渲染.
这样就实现了所谓的数据对于视图的驱动.
更多前端开发 https://www.html.cn/ 知识, 请查阅 HTML 中文网 !!
来源: http://www.css88.com/qa/vue-js/17150.html