Vue数据双向绑定（Object.defineProperty()）

hello 大家好，我是一只前端小白，大佬请留言指导。

今天，本小白就用刚学来的知识来装装逼，一方面加深一下对知识的理解，另一方面为同为小白的各位小伙伴做个小白视角的讲解。
对于vue或者angular，我印象最深刻的一个装逼利器就是我在input框中输入内容，下方会同步跟着我输出相同的内容，虽然暂时不清楚这在深一层会有什么大用途，但是我就是很喜欢这样装逼的东西。

效果展示

就是这种装逼的神器，其实上述功能并不是用vue实现的，而是我自己实现的，接下来，我们用两种方法来分析这种功能的实现。

1 分析需求, 用最简单的方式实现

如果认真想一下，其实这个功能也没有什么很高的技术含量，不就是1. 在输入框中输入内容，2. 获取到输入的内容并展示在下方的p(或者其他)标签中嘛。
根据分析，我们用代码实现一下

<!--html文件-->
<input type="text" id="ipt">
<p id="showText"></p>

// 获取两个标签
var itp = document.getElementById("ipt");
var showText = document.getElementById("showText");

// 给ipt输入框添加keyup事件
ipt.addEventListener('keyup',function(event){
//艾玛，其实我觉得用事件监听器绑定事件真是一种好用又装逼的方法（可以看出本小白是多么纯的小白），好处多多

//不知道event是什么？打印一下就知道了，里面去找target看看它是个什么东西

//将ipt的value赋值给showText的innerText
    showText.innerText = event.target.value;
})

没啥了，接下来去输入框写内容吧，已经达到效果了。艾玛，用经典方法实现了这个功能，心理有点小激动啊，更想往下看看还有什么更牛的装逼技术了。

2 通过Object.defineProperty()方法来实现(好像是vue的原理哦，仔细看哟)

先简单介绍一下Object.defineProperty();说实话吧，我知道的东西就刚够实现上面的功能，所以就不拓展了，有大神也讲过这个方法，说的比较全面，可惜当时一看就感觉懵，就放弃看了，一会再去巩固一下。
这个方法有三个参数Object.defineProperty(yourObjName,property,{get,set...}),那个点点点代表其他，我只略懂get，set。第一个参数就是我们定义的对象的名称了，第二个就是对象的属性，随便写吧，第三个参数是一个对象，里面的get和set方法接下来会仔细说明。

// 我们首先验证一下set和get有什么作用吧

// 首先随便定义一个对象
var obj = [];

// 使用Object.defineProperty()方法,属性名我就写个something，注意啦，set和get属性对应的都是匿名函数，并且set有个参数
Object.defineProperty(obj,'something',{
    get: function(){
        console.log('hello I am get');
    },
    set: function(val){
        console.log('hello 我是参数',val);
        console.log('hello I am set');
    }
})
// 代码写完了，接下来我们去浏览器窗口看看会发生什么吧

我只输入了第一行内容哦，快看发生什么事情啦，自动触发了set对应的函数（为什么会触发set呢，因为我们在set值啊 傻逼脸

）

再看看啦，我使用了一次obj的something属性，结果它自定触发了一个get属性对应的函数（艾玛，多么神奇啊）

是不是现在有些小伙伴就有想法了，既然触发了函数，我们可以在函数中做一些我们想做的事情啊，不光是实现上面的功能，我们还可以实现更多不可告人的功能

开心

但是，我们不要跑题啊，我们还是要实现上面的功能的

// come on baby,先把上面已知的东西拿过来
var itp = document.getElementById("ipt");
var showText = document.getElementById("showText");
var obj = [];
// 开始我们的表演

Object.defineProperty(obj,'something',{
    get: function(){
        console.log('hello I am get');
    },
    set: function(val){
        //将showText的内天替换为obj的something属性的值，只要something有改变就会执行
        showText.innerText = val;
        //同时将ipt的值也替换为val，有人肯定有疑惑，这里替换有什么必要吗，难道仅仅为了装逼，稍后就知道了
        ipt.value = val;
    }
})

// 按下键盘，将ipt的value值赋值给obj的something属性
ipt.addEventListener('keyup',function(event){
    obj.something = event.target.value;
})

实现了

成功完成装逼任务，接下来解决那个疑惑

我在控制台给something赋了个值，看看我们的HTML吧，也出现值了

是不是跟我们在vue中给了个data然后页面就出现了值很相似

好啦，至此，大家可以去大佬们的主页看看defineProperty的深层解读了。

希望大家多多支持，我是前端小白king，希望一起成长，向大神阵营迈进，最后一举成功，男的迎娶貌美程序媛，女的嫁给帅气程序猿