vue2.x 与 vue3.X区别

vue2.x 与 vue3.X区别?

1、当前最小化并被压缩的 Vue 运行时大小约为 20kB（2.6.10 版为 22.8kB）。
Vue 3.0捆绑包的大小大约会减少一半，即只有10kB！

 在 Vue2.x 中，在 Vue.prototype 定义了全局 API，导致 Vue 库的整体体积较大，部署生产时即使未用到的 API ，也会被打包。
 在 Vue3.x 中，实行按需加载vue的函数API

2、由Option API 变为 Compostion API 结构，提高界面代码的易读性，减少耦合性

3、增强 TypeScript 语法，大大的简化了代码

4、允许组件有从多个根结点，允许在DOM的其它位置进行渲染，可以使用更多底层方法。如：h() 函数等

5、观察者机制的变化：
将vue2中 Object.defineProperty 换成了es6的 Proxy代理器，在目标对象前加了层拦截，将原本对对象属性的操作变为对整个对象的操作，减小data监听密度。

Object.defineProperty缺点：

• 无法监听数组的变化
• 需要深度遍历、浪费内存、性能开销大

Proxy可以用于更改方法的默认输出，比如get方法取不到值时不返回undefined，以及在set方法上加验证及数据绑定等。

Object.defineProperty原理解析：

function vue() {
    this.$data = {
        testData: 1
    }
    this.el = docunment.getElementById('app')
    this.virtualDom = ''
    this.observer(this.$data)
    this.render()
}
vue.prototype.observer = function(data) {
    let self = this;
    let backup = null;
    for(let key in data) { // 对data循环遍历
        backup = data[key] // 先备份数据
        if (typeof backup === 'object') {
            this.observer(backup)  // 如果当前key的类型是对象,需递归深度遍历
        } else {
            Object.defineProperty(data, key, {  // 对目标key进行读取/更新处理
                get: function() {
                    // 依赖收集
                    return backup // 一定要return出去才可以
                },
                set: function(newVal) {
                    backup = newVal
                    self.render() // 刷新视图
                }
            })
        }
    }
}
vue.prototype.render = functin() {
    this.virtualDom = 'a test vue' + this.$data.testData
    this.el.innerHtml = this.virtualDom
}

基于对象代理Proxy 原理解析：

function vue() {
    this.$data = {
        testData: 1
    }
    this.el = docunment.getElementById('app')
    this.virtualDom = ''
    this.observer(this.$data)
    this.render()
}
vue.prototype.observer = function(data) {
    let self = this;
    this.$data = new Proxy(this.data, {  // 无需循环，对整个data进行代理拦截
        get: function(target, key, vceiver) {  // 对目标key进行读取/更新/验证拦截处理
            return target[key]
        },
        set: function(target, key, value, vceiver) {
            target[key] = value
            slef.render()
        }
    })
}
vue.prototype.render = functin() {
    this.virtualDom = 'a test vue' + this.$data.testData
    this.el.innerHtml = this.virtualDom
}