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