03.07 JavaScript如何实现一个简单的Vue?

菰單莪的亼


我是一名前端,先前用了很久的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,大家可以自己试着玩一玩!

喜欢我的回答就关注我吧,有问题可以发表评论,我们一起学习,共同成长!


分享到:


相關文章: