浅谈vue双向绑定

hello！大家早上好
想必大家都用过vue甚至有的还深入了解过vue的实现原理等等！！！今天咱们就谈一下vue双向绑定不多说直接上代码

代码：

效果图：

是不是看起来跟vue的使用方式差不多？接下来就来从原理到咱们原生js的实现，所以只是简单实现下原理，并没有考虑太多情况和设计，如果大家有什么建议，欢迎提出来。

本文主要介绍两大内容：

1. vue数据双向绑定的原理。
2. 原生js实现双向绑定（原生js和jquery）

vue数据双向绑定原理

vue数据双向绑定是通过数据劫持结合发布者-订阅者模式的方式来实现的，那么vue是如果进行数据劫持的，我们可以先来看一下通过控制台输出一个定义在vue初始化数据上的对象是个什么东西。

	var vm = new Vue({
	    data: {
	        obj: {
	            a: 1
	        }
	    },
	    created: function () {
	        console.log(this.obj);
	    }
	});

接下来咱们看控制台

我们可以看到属性a有两个相对应的get和set方法，为什么会多出这两个方法呢？因为vue是通过Object.defineProperty()来实现数据劫持的。
Object.defineProperty( )是用来做什么的？它可以来控制一个对象属性的一些特有操作，比如读写权、是否可以枚举，这里我们主要先来研究下它对应的两个描述属性get和set。

在平常，我们很容易就可以打印出一个对象的属性数据：

		var Book = {
		  name: 'vue权威指南'
		};
		console.log(Book.name);  // vue权威指南

如果想要在执行console.log(book.name)的同时，直接给书名加个书名号，那要怎么处理呢？或者说要通过什么监听对象 Book 的属性值。这时候Object.defineProperty( )就派上用场了，代码如下：

  var Book = {}
	var name = '';
	Object.defineProperty(Book, 'name', {
	  set: function (value) {
	    name = value;
	    console.log('书的名字' + value);
	  },
	  get: function () {
	    return '《' + name + '》'
	  }
	})
	 
	Book.name = 'vue权威指南'  // 定义了一个内容
	console.log(Book.name);  // vue权威指南

我们通过Object.defineProperty( )设置了对象Book的name属性，对其get和set进行重写操作，顾名思义，get就是在读取name属性这个值触发的函数，set就是在设置name属性这个值触发的函数，所以当执行 Book.name = ‘打篮球’ 这个语句时，控制台会打印出 “你取了一个书名叫做vue权威指南”，紧接着，当读取这个属性时，就会输出 “打篮球”，因为我们在get函数里面对该值做了加工了。如果这个时候我们执行下下面的语句，控制台会输出什么？

说明vue确实是通过这种方法来进行数据劫持的！！！！

接下来我们看下原生js的写法（只是简单的实现）

咱们先把简单的HTML写出来：

  <input type="text" name="" id="" class="inp">
    <span class="spans"></span>

这时候咱们想一想如果要实现双向绑定，那么咱们肯定是要给input绑定事件的，说到这块咱们要用什么事件呢？onkeyup？？？onkeydown？？？NO NO 别咱们经常或略的oninput 接下来直接上代码

   var inp = document.getElementsByClassName('inp')[0];
    var spans = document.getElementsByClassName('spans')[0];
    inp.oninput = function(e){
           spans.innerHTML = e.target.value;
    }

在这里咱们就不写jquery实现了原理是一样的只是写法不一样而已，我会把原生实现的源码放到 https://github.com/Liingot/v-model-javascript-

今天就到这里 谢谢大家 溜了溜了