原生 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)。

三、