原生 js 实现 vue 的某些功能

1、数据双向绑定：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 实现数据双向绑定了。https://www.cnblogs.com/tugenhua0707/p/10306793.html

2、

 

 

 

 

 

 

 

---

设计es6的概念：

1、 Object.defineProperty 的作用：https://www.cnblogs.com/gaoning/p/8335748.html 或 https://www.cnblogs.com/weiqu/p/5860945.html （推荐这个）或  https://www.cnblogs.com/tugenhua0707/p/10261170.html

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

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

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

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

 　作用：创建一个新的空白的文档片段( DocumentFragment)。

3、