使用Vue如何写一个双向数据绑定(面试常见)

1、原理

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

添加网上的一张图

2、实现

页面结构很简单，如下

包含：

1. 一个input，使用v-model指令 2. 一个button，使用v-click指令 3. 一个h3，使用v-bind指令。

我们最后会通过类似于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-click三个指令。效果如下图

附上全部代码，不到150行

总结

以上所述是小编给大家介绍的使用Vue如何写一个双向数据绑定(面试常见)。编程之家 52php.cn 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可分享给好友！感谢支持。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!