从零写一个类似Vue的Mvvm框架 01

最新推荐文章于 2024-01-01 01:44:45 发布

编程界小明哥

最新推荐文章于 2024-01-01 01:44:45 发布

阅读量770

点赞数 1

分类专栏： mvvm 文章标签： mvvm

本文链接：https://blog.youkuaiyun.com/dkm123456/article/details/110940277

版权

mvvm 专栏收录该内容

2 篇文章

订阅专栏

MVVM框架网上都能找到好多说明的，比如Vue是当下最火之一，俗话说没吃过猪肉还没见过猪跑吗？我今天非但要吃还要挑好的吃、吃到爽，嘿嘿！

于是乎我最近就花了不少时间来学习vue的源码，然后自己写来试试，说实话直接看源码比较难受，因为源码处理各种逻辑、涉及到各种情况，条条框框一大堆，我就抓住它的主线把代码先写出来，也算是半抄半写了，费了不少时间，但好歹是写了个雏形出来，也算安慰吧，放到网上大家一起交流！

至于mvvm的原理网上有一大堆，我也就不复制了，没劲！

这次主要完成了什么东西呢？向大家汇报一下（首先要肯定的是基本功能有了）

1.初始化各种变量（data、methods，computed等）

2.数据代理

3.数据劫持

4.用文档碎片编译模板（后面改成虚拟dom）

5.实现观察者模式

6.数据驱动页面更新

7.双向绑定

8.计算属性的处理

9.事件绑定（目前还没有处理参数以及绑定多个的情况）

10.mounted等前面几个生命周期钩子的处理

下面来看看是代码怎么写的：

我们看到 Vue是通过构造函数的方式来实例化的，我这个也是，然后通过调用Mvvm的原型方法_init来进入。

_init 方法做了一些什么事情呢?

1.给当前实例_uid，设置_isMvvm属性这个属性后面与组件作为区分的属性

2.初始化一些必要的参数 vm.initLifecycle();

3.调用beforeCreate、create、mounted等生命周期钩子函数

4.数据代理、数据劫持、处理data、methods ==> vm.initState()

5.编译模板 new Compile(vm);

    Mvvm.prototype={
    	_init:function (options) {
		      var vm = this;
		      //给mvvm设定一个id
		      vm._uid = uid$1++;
		      vm._isMvvm = true;
		      
		   	  vm.$options = options;
		      vm._self = vm;
		      //初始化生命周期
		      vm.initLifecycle();
		      //初始化事件
		      vm.initEvents();
		      //执行beforeCreate钩子
		      callHook(vm,'beforeCreate');
		      //数据代理、数据劫持、处理data、methods等
		      vm.initState();
		      //执行created钩子
		      callHook(vm,'created');
		      //编译
		      new Compile(vm);
		      //执行mounted钩子
			  callHook(vm,'mounted');//编译完成后的钩子
     	}

进入到 vm.initState()的initState函数里面，看它做的事情：

initState:function(){
     		var vm = this;
			var opts = vm.$options;
				
			//data的处理
		    opts.data = vm.initData(opts.data);
			   
			//将data代理到vm下
	   	  	vm.initProxy();
		      //数据劫持
		    vm.initInjections();
		     //处理props
		    if(opts.props){vm.initProps(opts.props)};
		     //处理methods
		    if(opts.methods){vm.initMethods(opts.methods)};
		     //处理计算属性computed
		    if(opts.computed){vm.initComputed(opts.computed)};
		     //处理filters（过滤器，暂不支持）
		    if(opts.filters){vm.initFilters(opts.filters)};
		}

1.数据代理、数据劫持主要用到了Object.defineProperty 也不多说了，要注意的3个地方如图：

2.处理计算属性computed

initComputed:function(computed){
			//处理计算属性
		 	var me=this;
		 	var computedKeys=[];
		 	var cObj;
		 	_.eachObj(computed,function(key,value){
				 cObj = value ;
				 var getter = _.isFunction(cObj)? cObj : (_.isObject(cObj)?cObj.get:function(){});
				 var setter = _.isFunction(cObj)? function(){} : (_.isObject(cObj)?cObj.set:function(){});
				 
				 Object.defineProperty(me, key, {
				 	enumerable: true,
	     			configurable: true,
				 	get:getter,
				 	set:setter
				 });
				 
				 me[key]= getter.bind(me);
				 
				 computedKeys.push(key);
			 })
		 	me.$computedKeys = computedKeys;
		}

3.处理methods，就是把方法代理到mvvm实例对象中。

找到 new Compile(vm) 进入编译，这里需要关注的两个事情：

1.将el对应dom元素的子节点全部插入到文档碎片当中，到编译完成、数据处理完成后在重新添加回来。

2.处理文档碎片（编译及数据处理等）

编译的过程就是循环每一个节点，处理节点里面的我们需要处理的属性，比如m-text文本属性、m-html，m-on:click事件属性等

当匹配到对应的属性就去compileUtil对象中寻找到处理逻辑，将从data里面获取到数据更新到对应的节点上，并且添加观察者

当全部编译完成，就会重新设置回页面当中，至此整个页面编译完成（下面这段模板可以看到编译前后的对比）：

  <div id="app">
        	<p>{{first}}-{{second}}</p>
        	<p m-text='first'>{{second}}</p>
        	<p m-text='second'></p>
       	 	computed:<p m-text='fullName'></p>
       	 	<p>ha:<input m-model='first'></input></p>
          
       	 	 <button m-on:click="test">test</button>
        </div>

未编译前是这个样子的：