我们一直都在问vue双向数据绑定的原理，今天简单手写一个双向数据绑定，也深入理解一下其中原理。
因为目前vue技术也在不断更新，现在已经更新到3.0，内部方法逻辑也改了很多，那么作为开发的我们，其实掌握其中原理，能自己写出简单的双向数据绑定代码，就可以了，更深层次的学习那毕竟是更好的，如果自己确实有充足的时间，可以去扒源码。
文章我们分部分来写，本文代码并非源码，但可以通过其原理自己实现相同的功能。
今天我们的目的：先抛去vue的监听（watcher）方法。枚举遍历vue中的data数据，通过Object.defineProperty方法，利用其中的get和set重新定义属性值，也就是对vue中数据进行劫持和更改，从而达到目的。
在此之前，我们先要熟悉我们今天的思路原理：
js中我们定义class类，类中有不同的方法，首先我们会拿到vue中所有的data数据，对data数据进行递归遍历，我们对每个数据加入Object.defineProperty方法，利用get和set进行劫持更改，实现更改data中的数据源。
开始：
建立两个文件夹：
一个是vue.js（写vue方法）;
一个是index.html（引入vue进行使用）。
以下为了讲解方便，我会直接放入我本人写完的代码，讲解也在代码的注释中，很详细，认真看就好。
先说index.html文件:
这个文件就是个简单的html结构，引入我们写的vue.js文件，然后和vue官网的引入书写方式是一样的，直接用。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<!-- 引入稍后写的vue.js文件 -->
<script src="./vue.js"></script>
<script>
// 实例化vue ，书写方式与我们正常引入的vue使用方式一样
var vue = new Vue({
// 定义data数据，定义两个变量，一个message，一个list对象
data: {
message: 'Hello Vue!',
list: {
name: 'xiaoming'
}
}
})
// 本次没有重定向this，所以先用 vue.$data 拿到vue中data的数据（等同于 this. ），然后进行赋值更改
// 这个操作稍后我们会写，会对this进行操作。目前我们先使用 $data 代替this
vue.$data.message = "你好" // 将 message 更改成 你好
vue.$data.list.name = "小明" // 将 name 更改成 小明
console.log(vue.$data.message) // 打印出来，如果data中的数据更改成功，说明我们实现了这个功能
console.log(vue.$data.list.name)
</script>
</body>
</html> 再看下比较重要的vue.js文件，有一些js知识点需要大家提前会用：
1. js中类的概念（class）
2. constructor构造函数
3. Object.keys()枚举方法
4. forEach()方法
5. 递归
6. Object.defineProperty（obj, prop, desc）三个参数分别是：需要定义属性的当前对象、当前需要定义的属性名、描述符（get和set）
// vue.js文件
// 定义vue类，当被引入时，可直接使用
class Vue {
// 构造函数constructor，在html中，new Vue（）中的所有，都会传进来。
constructor(opa) {
this.$opa = opa // 赋值到$opa
this.$data = opa.data // 将opa中的 data 赋值
this.obsever(opa.data) // 得到data后，传入 obsever函数进行 枚举每条数据，然后进行遍历
}
obsever(value) {
// 先判断传进来的是否是对象，如果为空 或非对象，则不向下进行。
if (!value || typeof value !== 'object') {
return
}
// Object.keys() 枚举方法，返回每条对象的key值，返回的对象是数组,本例中返回：['message','list']
// forEach 遍历每个key值，将每条数据放入 defineReactive（）函数中，通过Object.defineProperty进行处理
Object.keys(value).forEach(key => {
this.defineReactive(value, key, value[key]) // 第一个参数是 value对象，第二个参数是枚举出来的key，第三个参数是key对应的value值
})
}
defineReactive(value, key, val) {
// 如果传入来的val依然是个object对象，则需要重新递归执行obsever（）方法，如本次案例中，html文件的data中有两个参数：message和list
// 我们通过forEach遍历data后，得到的一个是message 键值对，一个是list对象。我们的目的是需要得到每一个键值对，对其中的值进行更改
// 如果遍历后又是对象，需要再次将这个对象拆开，得到键值对，所以需要递归再次进行遍历，直到拆到都是键值对为止。
this.obsever(val) // 递归操作
// Object.defineProperty（）第三个参数是比较重要的，可以决定数据能否被读取，被遍历等。
Object.defineProperty(value, key, {
get() { // 进行读取数据
return val
},
set(i) { // 进行改数据
// 如果传入进来的数据val，等于修改的i，则返回
if (i === val) {
return
}
// 闭包
val = i
console.log(key + "赋值成功" + '=' + val) // 修改成功，控制台打印
}
})
}
}运行index.html，打开控制台，运行成功
空闲时，会继续更新源码知识，我们共同学习。如有错误请指出，核实后会在第一时间更改。