vue3.0实现双向数据绑定proxy，虚拟dom和diff算法

1 propxy实现vue3.0的双向数据绑定

var obj = {
     
    a: 1,
    b: 2
}
//1 不需要借助第三个属性
//2 不会污染原来的对象，只是对原来对象的一个代理，这一点在2.0上是需要修改原来的对象的，
//3 对全部对象的监听
//4 省去for...in的循环
//5 可以监听数组，不需要对数组做单独的配置
new Proxy(obj, {
     
    //target就是对象名
    //key属性
    get(target, key, receiver) {
     
        console.log(target, key, receiver);
        return target[key]
    },
    //value就是传入的新值
    set(target, key, value, receiver) {
     
        return target[key] = value
    }
})

2 proxy还可以实现数据的校验

// 类型的验证
// 创建一个人，名字必须为中文，年龄必须为英文
// 策略模式：指对象有某个行为，但是在不同的场景中，该行为有不同的实现算法。
var validtor = {
     
    name(value){
     
        var reg = /^[\u4E00-\u9FA5] + $/
        if(typeof value === 'string' && reg.test(value)){
     
            return true
        }
        return false
    },
    age(value){
     
        if(typeof value === 'number' && value>18){
     
            return true
        }
        return false
    }
}
function person(name, age) {
     
    this.name = name
    this.age = age
    return new Proxy(this, {
     
        get(target,key){
     
            return target[key]
        },
        set(target,key,value){
     
            if(validtor[key].value){
     
                return Reflect.set(target,key,value)
            }else{
     
                return new Error(key + '是错误的')
            }
        }
    })
}

3 vue-router使用为什么只能用this.$router进行调用接口下面这个图片截取自vue-router源码，首先这个$router只有get方法，没有set方法，这样就是写死的，我们只能使用，不能更改。
这个里面的思想就是网络安全

4 模板转换为虚拟dom
提供的模板

<template>
    <div id='box'>
        <p><span>11</span></p>
        <p>22</p>
        <p>33</p>
    </div>
</template>

转换为的虚拟dom

var vartiDom = {
     
    dom: 'div',
    props: {
     
        id: 'box'
    },
    children: [
        {
     
            dom: 'p',
            children: [
                {
     
                    dom: 'sapn'
                }
            ]
        },
        {
     
            dom: 'p'
        },
        {
     
            dom: 'p'
        }
    ]
}

5 diff算法

// diff算法
patchVnode(oldVnode, Vnode){
     
    //el 真实dom
    //oldCh老的元素
    //ch新的元素
    const el = Vnode.el = oldVnode.el;
    let i, oldCh = oldVnode.children, ch = Vnode.children;
    if(oldVnode===Vnode) return;
    //text文字节点,判断老的节点文字和新的节点文字都不为空，并且老的节点文字不等于新的节点文字
    //只有文字节点，删除节点，增加节点，子元素的变动
    if(oldVnode.text !== null && Vnode.text !== null && oldVnode!==Vnode){
     
        api.setTextContext(el,Vnode.text)
    }else{
     
        updataEle();
        if(oldCh && ch && oldCh!==ch){
     
            updataChildren()
        }
        //只有新的元素子节点发生变化
        else if(ch){
     
            createEl(Vnode)
        }
        //只有老节点发生变化
        else if(oldCh){
     
            api.removeChild(el)
        }
    }
}