vue的双向绑定原理

https://www.jianshu.com/p/23180880d3aa
https://www.cnblogs.com/chenjg/p/9541291.html
https://www.jianshu.com/p/4dff7c2cdaaa
简单实现：

    <body>
    <input type="text" id="inp" />
    <div id="box"></div>
        <script>
        let obj1={};
        let inp=document.getElementById('inp');
        let box=document.getElementById('box');

        Object.defineProperty(obj1,'name',{
            configurable: true,
            enumerable: true,
            get: function () {
                console.log(111)
                return val;
            },
            set:function (new1) {
                box.innerHTML=new1;
            }
        });

        inp.addEventListener('input',function(e){
            obj1.name=e.target.value;
        })

        obj1.name=111;
        </script>

    </body>

复杂实现：

<body>
        <div>name</div>
        <script>
    
        
        function observe(obj)
        {
            if(!obj||typeof obj !=='object')
            {
                return;
            }
            Object.keys(obj).forEach(function(key)
            {
                defineReactive(obj,key,obj[key]);
            })
        }
        
        
        function defineReactive(obj,key,value)
        {
             // 递归子属性
            observe(value);
            let dp=new Dep();
            Object.defineProperty(obj,key,{
                enumerable:true,
                configurable:true,
                get:function getter()
                {
                    console.log('get value');
                       // 将 Watcher 添加到订阅
                    if(Dep.target)
                    {
                        dp.addSub(Dep.target);
                    }
                    return value;
                },
                set:function setter(newval)
                {
                    console.log('set1 value');
                    value=newval;
                    console.log('set22 value');
                      // 执行 watcher 的 update 方法
                    dp.notify();
                    console.log('set33 value');
                }
            })
        }
        
        // 通过 Dep 解耦属性的依赖和更新操作
        class Dep {
          constructor() {
            this.subs = []
          }
          // 添加依赖
          addSub(sub) {
            this.subs.push(sub)
          }
          // 更新
          notify() {
            this.subs.forEach(sub => {
              sub.update()
            })
          }
        }
        // 全局属性，通过该属性配置 Watcher
        Dep.target = null
        
        class Watcher{
            constructor(obj,key,cb) {
                 // 将 Dep.target 指向自己
                // 然后触发属性的 getter 添加监听
                // 最后将 Dep.target 置空
                Dep.target=this;
                this.cb=cb;
                this.obj=obj;
                this.key=key;
                this.value=obj[key];
                Dep.target=null;
            }
            
            update()
            {
                // 获得新值
                this.value = this.obj[this.key]
                // 调用 update 方法更新 Dom
                this.cb(this.value)
            }
        }
        
        var data = { name: 'yck' }
        observe(data)
        function update(value) {
          document.querySelector('div').innerText = value
        }
        // 模拟解析到 `{{name}}` 触发的操作
        new Watcher(data, 'name', update)
        // update Dom innerText
        data.name = 'yyy' 
        </script>
    </body>

vue的虚拟dom原理

1. 什么是vdom

①虚拟dom
②用js模拟dom结构
③dom变化的对比，放在js层来做（为什么不放在html，css，因为只有js能实现逻辑）
④提高重绘性能，减少dom操作，dom操作十分消耗性能，而js语言的执行与dom操作相比是很快的。

2. 需求场景

3. 解决的问题

①dom操作非常昂贵
②将dom对比操作放在js层（通过一个对比算法，知道哪些节点能动，哪些节点不能动），提高效率

4.vdom-snabbdom核心API

该方法需要从github中搜索引用相关js
①h()函数
②patch()函数

介绍一下diff算法(了解即可，不用太抠细节）

什么是diff算法
化繁为简（知道核心流程，不关心细节，花费20%精力就行）
为什么vdom要用diff算法
这个“找出”虚拟dom差异的过程，就需要diff算法

最近积累的一些疑惑