vue3.0源码分析，

1 分析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 vue3.0的虚拟和diff算法

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

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

// 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)
        }
    }
}