MVVM框架理解及其原理实现

时间 2019-11-09

标签 mvvm 框架理解及其原理实现繁體版

原文原文链接

小白一枚，一直使用的是React，想要多了解一些其它的框架，正好最近Vue愈来愈火热，Github上的Star数已经超过了React。而其背后蕴含的MVVM框架思想也一直跟React的组件化开发思想并驾齐驱，在这里也是本着兼收并蓄的思想，多了解一种开发模式。所以经过一些学习资料，写一些本身对MVVM开发思想的理解。html

废话很少说，我们进入正题。前端

MVVM框架理解

提及这个MVVM模型，就不得不说MVC框架。vue

将整个前端页面分红View，Controller，Modal，视图上发生变化，经过Controller（控件）将响应传入到Model（数据源），由数据源改变View上面的数据。node

整个过程看起来是行云流水，业务逻辑放在Model当中，页面渲染逻辑放在View当中，但在实际运用上却存在一个问题：那就是MVC框架容许View和Model直接进行通讯！！算法

换句话说，View和Model之间随着业务量的不断庞大，会出现蜘蛛网同样难以处理的依赖关系，彻底背离了开发所应该遵循的“开放封闭原则”。express

面对这个问题，MVVM框架就出现了，它与MVC框架的主要区别有两点：
一、实现数据与视图的分离
二、经过数据来驱动视图，开发者只须要关心数据变化，DOM操做被封装了。数组

能够看到MVVM分别指View，Model，View-Model，View经过View-Model的DOM Listeners将事件绑定到Model上，而Model则经过Data Bindings来管理View中的数据，View-Model从中起到一个链接桥的做用。app

MVVM的实现原理：

MVVM的实现主要是三个核心点：框架

响应式：vue如何监听data的属性变化
模板解析：vue的模板是如何被解析的
渲染：vue模板是如何被渲染成HTML的

响应式：

对于MVVM来讲，data通常是放在一个对象当中，就好比这样：dom

var obj = {
             name: 'zhangsan',
             age: 25
         }

当咱们访问或修改obj的属性的时候，好比：

console.log（obj.name）  //访问
         obj.age = 22            //修改

可是这样的操做vue自己是没有办法感知到的，那么应该如何让vue知道咱们进行了访问或是修改的操做呢？
那就要使用Object.defineProperty

var vm = {}
        var data = {
            name: 'zhangsan',
            age: 20
        }

        var key, value
        for (key in data) {
            (function (key) {
                Object.defineProperty(vm, key, {
                    get: function () {
                        console.log('get', data[key]) // 监听
                        return data[key]
                    },
                    set: function (newVal) {
                        console.log('set', newVal) // 监听
                        data[key] = newVal
                    }
                })
            })(key)
        }

经过Object.defineProperty将data里的每个属性的访问与修改都变成了一个函数，在函数get和set中咱们便可监听到data的属性发生了改变。

模板解析：

首先模板是什么？

模板本质上是一串字符串，它看起来和html的格式很相像，实际上有很大的区别，由于模板自己还带有逻辑运算，好比v-if，v-for等等，但它最后仍是要转换为html来显示。

<div id="app">
        <div>
            <input v-model="title">
            <button v-on:click="add">submit</button>
        </div>
        <div>
            <ul>
                <li v-for="item in list">{{item}}</li>
            </ul>
        </div>
    </div>

模板在vue中必须转换为JS代码，缘由在于：在前端环境下，只有JS才是一个图灵完备语言，才能实现逻辑运算，以及渲染为html页面。

这里就引出了vue中一个特别重要的函数——render

render函数中的核心就是with函数。

with函数将某个对象添加到做用域链的顶部，若是在 statement中有某个未使用命名空间的变量，跟做用域链中的某个属性同名，则这个变量将指向这个属性值。

举个例子：

var obj = {
            name: 'zhangsan',
            age: 20,
            getAddress: function () {
                alert('beijing')
            }
        }
        function fn1() {
            with(obj) {
                alert(age)
                alert(name)
                getAddress()
            }
        }
        fn1()

with将obj这个对象放在了本身函数的做用域链的顶部，当执行下列函数时，就会自动到obj这个对象去寻找同名的属性。

而在render函数中，with的用法是这样：

<div id="app">
        <div>
            <input v-model="title">
            <button v-on:click="add">submit</button>
        </div>
        <div>
            <ul>
                <li v-for="item in list">{{item}}</li>
            </ul>
        </div>
    </div>

// 对应的js文件
        var data = {
            title: '',
            list: []
        }
        // 初始化 Vue 实例
        var vm = new Vue({
            el: '#app',
            data: data,
            methods: {
                add: function () {
                    this.list.push(this.title)
                    this.title = ''
                }
            }
        })

        
        with(this){  // this 就是 vm
            return _c(
                'div',
                {
                    attrs:{"id":"app"}
                },
                [
                    _c(
                        'div',
                        [
                            _c(
                                'input',
                                {
                                    directives:[
                                        {
                                            name:"model",
                                            rawName:"v-model",
                                            value:(title),
                                            expression:"title"
                                        }
                                    ],
                                    domProps:{
                                        "value":(title)
                                    },
                                    on:{
                                        "input":function($event){
                                            if($event.target.composing)return;
                                            title=$event.target.value
                                        }
                                    }
                                }
                            ),
                            _v(" "),
                            _c(
                                'button',
                                {
                                    on:{
                                        "click":add
                                    }
                                },
                                [_v("submit")]
                            )
                        ]
                    ),
                    _v(" "),
                    _c('div',
                        [
                            _c(
                                'ul',
                                _l((list),function(item){return _c('li',[_v(_s(item))])})
                            )
                        ]
                    )
                ]
            )
        }

在一开始，由于new操做符，因此this指向了vm，经过with咱们将vm这个对象放在做用域链的顶部，由于在函数内部咱们会屡次调用vm内部的属性，因此使用with能够缩短变量长度，提供系统运行效率。

其中的_c函数表示的是建立一个新的html元素，其基本用法为：

_c(element,{attrs},[children...])

其中的element表示所要建立的html元素类型，attrs表示所要建立的元素的属性，children表示该html元素的子元素。

_v函数表示建立一个文本节点，_l函数表示建立一个数组。

最终render函数返回的是一个虚拟DOM。

如何将模板渲染为html

模板渲染为html分为两种状况，第一种是初次渲染的时候，第二种是渲染以后数据发生改变的时候，它们都须要调用updateComponent,其形式以下：

vm._update(vnode){
  const prevVnode = vm._vnode
  vm._vnode = vnode
  if (!prevVnode){
    vm.$el = vm.__patch__(vm.$el,vnode)
  } else {
    vm.$el = vm.__patch__(prevVnode,vnode)
  }
}

function updateComponent(){
  vm._update(vm._render())
}

首先读取当前的虚拟DOM——vm._vnode,判断其是否为空，若为空，则为初次渲染，将虚拟DOM所有渲染到所对应的容器当中（vm.$el），若不为空，则是数据发生了修改，经过响应式咱们能够监听到这一状况，使用diff算法完成新旧对比并修改。