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

//执行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里面获取到数据更新到对应的节点上，并且添加观察者

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

{{first}}-{{second}}

{{second}}

computed:

ha:

test

未编译前是这个样子的：

编译完成后

成功的将data、computed 包含方法都映射到页面上了，测试一下，在文本框输入内容看什么效果：

因为文本框绑定的是data的first，可以通过文本修改来修改数据，同时再次更新到页面上，页面上多次绑定了first的都自动更新了，这就是我们想要的双向绑定。

然后点击test按钮，效果如下，说明了什么？

1.点击事件已经实现

2.可以看到绑定的函数 test里面执行了一句话    this.second=(Math.random()*1000).toFixed(0);就是设置随机3位数给second，页面绑定second的也自动更新了（这里就是观察者的体现）

至此已经通过代码来实现mvvm的雏形了，所谓万事开头难，有了开头，我们就可以一步步的完善了。

接下来要完善的是哪些需求呢

1.对象的观察，目前对于对象的观察还未处理（data里面的数据是对象）

2.列表的处理 m-for指令

3.虚拟dom（包含 虚拟语法树、diff算法、局部更新）

4.事件的带参数调用，以及支持多个绑定（还包括 @click方式的处理**）**

5.表达式计算属性的处理   {{a+b+c}}

6.组件的支持

7.过滤器的处理（全局，局部过滤器）

8.http的处理

9.动画的支持

10.属性的绑定 （m-bind以及简易模式  :bind 、:class 、:disabled 等）

11.if、elseif、else等条件语法支持

12.show、hide的支持

13.自定义属性的处理

14.事件修饰符、按键修饰符
目前就先考虑以上的处理吧，与君共勉！！
完整代码 点这里下载！！

大家回复一波呗！

ES6

• 列举常用的ES6特性：

• 箭头函数需要注意哪些地方？

• let、const、var

• 拓展：var方式定义的变量有什么样的bug？

• Set数据结构

• 拓展：数组去重的方法

• 箭头函数this的指向。

• 手写ES6 class继承。

微信小程序

• 简单描述一下微信小程序的相关文件类型?

• 你是怎么封装微信小程序的数据请求？

• 有哪些参数传值的方法？

• 你使用过哪些方法，来提高微信小程序的应用速度？

• 小程序和原生App哪个好？

• 简述微信小程序原理？

• 分析微信小程序的优劣势

• 怎么解决小程序的异步请求问题？