面试题:你能写一个 Vue 的双向数据绑定吗

在目前的前端面试中,vue的双向数据绑定已经成为了一个非常容易考到的点,即使不能当场写出来,至少也要能说出原理。本篇文章中我将会仿照vue写一个双向数据绑定的实例,名字就叫myVue吧。结合注释,希望能让大家有所收获。

1、原理

Vue的双向数据绑定的原理相信大家也都十分了解了,主要是通过 Object对象的defineProperty属性,重写data的set和get函数来实现的,这里对原理不做过多描述,主要还是来实现一个实例。为了使代码更加的清晰,这里只会实现最基本的内容,主要实现v-model,v-bind 和v-click三个命令,其他命令也可以自行补充。

添加网上的一张图4024157692-5acc18cfb55d8

2、实现

页面结构很简单,如下

包含:

我们最后会通过类似于vue的方式来使用我们的双向数据绑定,结合我们的数据结构添加注释

首先我们需要定义一个myVue构造函数:

为了初始化这个构造函数,给它添加一 个_init属性

接下来实现_obverse函数,对data进行处理,重写data的set和get函数

并改造_init函数

接下来我们写一个指令类Watcher,用来绑定更新函数,实现对DOM元素的更新

更新_init函数以及_obverse函数

那么如何将view与model进行绑定呢?接下来我们定义一个_compile函数,用来解析我们的指令(v-bind,v-model,v-clickde)等,并在这个过程中对view与model进行绑定。

至此,我们已经实现了一个简单vue的双向绑定功能,包括v-bind, v-model, v-click三个指令。效果如下图007

附上全部代码,不到150行

如果喜欢请关注我的Github,给个Star吧,我会定期分享一些JS中的知识,^_^

1 3 收藏 评论

相关文章

可能感兴趣的话题



直接登录
跳到底部
返回顶部