菰單莪的亼
我是一名前端，先前用了很久的react，最近用了三个月的vue，我来回答一下这个问题！
目前很多的公司都在使用vue来开发和维护自己的站点，我认为vue这么流行，主要有以下几点原因：
1、\t性能好（dom的基本操作都有框架完成，引入虚拟dom后性能更加卓越）
2、\t易学（能力强的前端2天即可上手干活）
用过vue的同学肯定知道一个vue文件主要包括两个部分（不算css）：
1、\tvue的模板
2、\tvue的生命周期逻辑
如果自己要手写一个vuejs，其实就是如何把vue生命周期中的js逻辑对应到模板中，并且实现双向绑定，能够实时的把数据展现在模板中，下面我们尝试着简单的实现一把！
看上面的图片，root节点相当于vue的模板，js部分相当于vue的data和method（其实就是配置）部分。
实现功能：div的宽度是100px，每点击一次加10px，宽度的数值还可以实时反映到p标签中。
实现思路如下：
1、\t首先我们将两个配置收集到vModel中，w就是div的初始化宽度，change函数很明显就是点击的回调函数
2、\t递归root节点，在div上我们发现两个属性v-css-width 和 v-click , 这样的属性由我们自己定义，当然要有含义！ 第一个属性的意思就是为此标签设置width，第二个属性的意思就是绑定点击事件，p标签就是将自己的内容替换成w的值。属性可以由正则去匹配对应的key 和 value。匹配完成后，将数据传入到具体的处理逻辑中执行。
3、\t做完上面两步，模板的初始化就已经完成了，下面我们还需要做双向绑定！此处需要双向绑定的是w！ 我们可以遍历vModel，通过Object.defineProperties为需要的属性绑定get/set方法，当我们重新给w赋值时，就会执行cb函数，可以在cb中再次调用handle函数和其他的处理逻辑。
综上，通过这三步基本可以实现一个微型的vue，大家可以自己试着玩一玩！
喜欢我的回答就关注我吧，有问题可以发表评论，我们一起学习，共同成长！
關鍵字: 先前 我来 JavaScript
