vue实现数据驱动视图原理

Posted 2020-10-28 古兰精

一、什么是数据驱动

　　数据驱动是vuejs最大的特点。在vuejs中，所谓的数据驱动就是当数据发生变化的时候，用户界面发生相应的变化，开发者不需要手动的去修改dom。

　　比如说我们点击一个button，需要元素的文本进行是和否的切换。在jquery刀耕火种的年代中，对于页面的修改我们一般是这样的一个流程，我们对button绑定事件，然后获取文案对应的元素dom对象，然后根据切换修改该dom对象的文案值。而对于vuejs实现这个功能的流程，只需要在button元素上指明事件，同时声明对应文案的属性，点击事件的时候改变属性的值，对应元素的文本就能够自动的进行切换，我们不需要像以前那样手动的操作dom。

　　简而言之，就是vuejs帮我们封装了数据和dom对象操作的映射，我们只需要关心数据的逻辑处理，数据的变化就能够自然的通知页面进行页面的重新渲染。

　　这样做的确实给我们带来的好处，我们不需要再在代码中频繁地去操作dom了，在实际项目中，我们有很大部分代码都是在数据修改以后，手动操作重新渲染页面元素，当页面越来越复杂的时候，页面代码组织会越来难以维护。同时，js对dom的频繁操作，会使得页面代码的出错概率高，页面的视图展示会融合在js代码中，对于页面视图显示的升级也不友好。

　　那么vuejs是如何实现这种数据驱动的呢？

二、MVVM框架

　　Vuejs的数据驱动是通过MVVM这种框架来实现的。MVVM框架主要包含3个部分:model、view和 viewmodel。

　　Model：指的是数据部分，对应到前端就是javascript对象

　　View：指的是视图部分，对应前端就是dom

　　Viewmodel：就是连接视图与数据的中间件

　　数据(Model)和视图(View)是不能直接通讯的，而是需要通过ViewModel来实现双方的通讯。当数据变化的时候，viewModel能够监听到这种变化，并及时的通知view做出修改。同样的，当页面有事件触发时，viewModel也能够监听到事件，并通知model进行响应。

　　Viewmodel就相当于一个观察者，监控着双方的动作，并及时通知对方进行相应的操作。

三、Vuejs的数据驱动实现

　　对于数据驱动的实现，我们可以简单的通过定时器来实现这个功能，定时器定时监控对象数据，定时器监控数据变化，确定是否更新界面

var 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会对比前后两个的数值是否发生变化，然后确定是否通知视图进行重新渲染。

　　这样就实现了所谓的数据对于视图的驱动。通俗地讲，它意味着我们在普通 HTML 模板中使用特殊的语法将 DOM “绑定”到底层数据。一旦创建了绑定，DOM 将与数据保持同步。每当修改了数据，DOM 便相应地更新。这样我们应用中的逻辑就几乎都是直接修改数据了，不必与 DOM 更新搅在一起。这让我们的代码更容易撰写、理解与维护。

　　对getter/setter的理解

　　当打印出Vue实例下的data对象里的属性，它的每个属性都有两个相对应的get和set方法。正常情况下，我们取值和赋值是用obj.prop的方式，但是这样做有一个问题，我如何知道对象的值改变了？所以就轮到set登场了。

　　你可以把get和set理解为function，当我们调用对象的属性时，我们会进入到get.属性(){...}中，先判断对象是否有这个属性，如果没有，那么就添加一个name属性，并给它赋值；如果有name属性，那就返回name属性。你可以把get看成一个取值的函数，函数的返回值就是它拿到的值。

　　感觉比较重要的是set属性，当给实例赋值：此时，会进入set name(val){...}；形参val就是我赋给name属性的值，在这个函数里，就可以做很多事了，比如双向绑定！因为这个值的每次改变都必须经过set，其他方式是改变不了它的，相当于一个万能的监听器。ES5的对象原型有两个新的属性__defineGetter__和__defineSetter__，专门用来给对象绑定get和set。建议使用下面这种方式，因为是在原型上书写，所以可以继承和重用。