1、原理
Vue的双向数据绑定的原理相信大家也都十分了解了，主要是通过 Object对象的defineProperty属性，重写data的set和get函数来实现的,这里对原理不做过多描述，主要还是来实现一个实例。为了使代码更加的清晰，这里只会实现最基本的内容，主要实现v-model，v-bind 和v-click三个命令，其他命令也可以自行补充。
添加网上的一张图
2、实现
页面结构很简单，如下
Vue的双向数据绑定的原理相信大家也都十分了解了，主要是通过 Object对象的defineProperty属性，重写data的set和get函数来实现的,这里对原理不做过多描述，主要还是来实现一个实例。为了使代码更加的清晰，这里只会实现最基本的内容，主要实现v-model，v-bind 和v-click三个命令，其他命令也可以自行补充。
添加网上的一张图
页面结构很简单，如下
包含：
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如何写一个双向数据绑定(面试常见)。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可分享给好友！感谢支持。
