原生 js 实现 vue 的某些功能

一、数据双向绑定：https://www.cnblogs.com/yuqing-o605/p/6790709.html?utm_source=itdadao&utm_medium=referral 或 https://blog.csdn.net/lgysjfs/article/details/85251865（推荐这个，这里还包含了 虚拟dom的实现）

<input type="text" id="aa"/>
<span id="bb"></span>

    var obj = {};
    Object.defineProperty(obj,'hello',{
        set:function(val){
            document.getElementById('bb').innerHTML = val;
            document.getElementById('aa').value = val;
        }
    });
    document.getElementById('aa').onkeyup = function(e){
        obj.hello = e.target.value;
    };

演示地址：https://kevin3623.github.io/demo/%E6%95%B0%E6%8D%AE%E5%8F%8C%E5%90%91%E7%BB%91%E5%AE%9A.html

另外：由于 defineProperty 有缺陷，因此 vue3 开始使用 Proxy 实现数据双向绑定了。http://www.javashuo.com/article/p-gfvzjduv-be.html

二、

 

 

 

 

 

 

 

---

设计es6的概念：

一、 Object.defineProperty 的做用：http://www.javashuo.com/article/p-emtttvuy-ep.html 或 http://www.javashuo.com/article/p-rnifukhv-dy.html （推荐这个）或  http://www.javashuo.com/article/p-qpgkyhbt-hh.html

关键点：Object.defineProperty 设置的 对象的属性，一旦这个属性值发送变化，就会执行 set 里面的函数（数据劫持）。

注意：当使用了getter或setter方法，不容许使用writable和value这两个属性

Object.defineProperty的局限性 ：https://blog.csdn.net/weixin_43196700/article/details/84033055

二、document.createDocumentFragment() ：https://developer.mozilla.org/zh-CN/docs/Web/API/Document/createDocumentFragment

 　做用：建立一个新的空白的文档片断( DocumentFragment)。

三、