vue3.0和2.0的区别

1.1 Vue 3.0的新特性以及原理

1.1.1 观察机制

      简述：更完备、更精准、更高效，可以对响应式跟踪进行调试，新增了一个创建可观察对象（observable）的 API。
      
        3.0 版本里将有一个基于 Proxy 的观察者，它会提供全语言覆盖的响应式跟踪。相比于 2.x 版本里基于 Object.defineProperty 的观察者，新的实现更加强大：
                              
                              可以检测属性的新增和删除
                              可以检测数组索引的变化和 length 的变化
                              支持 Map、Set、WeakMap 和 WeakSet
                              
       上面正文中提到的Proxy算是这次Vue 3.0 最大的亮点,它不仅取代了Vue 2.0 的 Object.defineProperty 方法并且组建生成增快 100%还有就是快一倍 / 减少一般的内存使用

     下面看一个最简单的Proxy实现方法:

        let obj = {
    	a : 1
}
let proxyObj = new Proxy(obj,{
    get : function (target,prop) {
        return prop in target ? target[prop] : 0
    },
    set : function (target,prop,value) {
        target[prop] = 888;
    }
})
    
console.log(proxyObj.a);        // 1
console.log(proxyObj.b);        // 0

proxyObj.a = 666;
console.log(proxyObj.a)         // 888

作者：大湿兄
链接：https://juejin.im/post/5d3bc7e7f265da1bc85470db
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

上述例子中，我们事先定义了一个对象 obj , 通过 Proxy 构造器生成了一个 proxyObj 对象，并对其的 set(写入) 和 get (读取) 行为重新做了修改。
        当我们访问对象内原本存在的属性时，会返回原有属性内对应的值，如果试图访问一个不存在的属性时，会返回0 ，即我们访问 proxyObj.a 时，原本对象中有 a 属性，因此会返回 1 ，当我们试图访问对象中不存在的 b 属性时，不会再返回 undefined ，而是返回了 0 ，当我们试图去设置新的属性值的时候，总是会返回 888 ，因此，即便我们对 proxyObj.a 赋值为 666 ，但是并不会生效，依旧会返回 888!
        想要了解更多Proxy就去这里看看阮一峰大大的ECMAScript 6 入门: es6.ruanyifeng.com/#docs/proxy
新的观察者还有以下特点：
提供了一个创建可观察对象的 API。对于中小型应用来说，这个 API 能提供一个轻量、简单的跨组件状态管理方案。
不可变的可观察对象（Immutable observable）。我们可以给一个值创建多个不可变的版本，以防有人修改其属性，必须要在系统在内部临时将其解锁时才能修改其属性。这个机制能够用于冻结传给子组件的属性或者冻结 Vuex 状态树之外的状态变更。
更强大的 debug 能力。我们使用新的 renderTracked 和 renderTriggered 钩子来精确地查明一个组件的 render 是在什么时候由谁触发的。
很容易知道为什么一个组件会重新渲染


**1.1.2  其他的运行时增强**


        简述：体积更小、速度更快，支持 tree-shaking，支持 fragment 和 portal，支持自定义 render。
        体积更小。新的代码库在设计的时候就考虑了 tree-shaking。内置的组件（如  ）和内置的指令（v-model）是按需引入的，支持 tree-shaking。新的运行时最小体积将低于 10kb（gzip之后）。除此之外，由于很多特性是支持 tree-shaking 的，所以我们可以提供更多的内置特性，如果你不想用这些特性，你的代码体积完全不会增加。另外在这里说一嘴,Vue 2.0 体积是Vue 3.0 的一倍
        速度更快，包括虚拟 DOM 的挂载和更新、组件实例的初始化和观察者的创建。3.0 版本将让你的应用启动时间减少一半。
        支持 fragment 和 portal。虽然体积变小了，但是 3.0 版本还是带来了新功能，那就是支持 Fragment（一个组件包含多个根节点）和 Portal（在 DOM 中渲染一个 subtree，而不需要在一个组件中）。
        插槽机制增强。所有由编译产生的插槽现在都是函数，这些函数会在子组件的 render 调用时被调用。这样一来，插槽中的依赖会被认为是子组件的依赖而不是父组件的依赖。这意味着：1、当插槽内容变化时，只有子组件重新渲染；2、当父组件重新渲染时，如果插槽内容没有变化，子组件就不需要重新渲染。这个特性提供了更精确的组件树层面上的变更检测，所以会减少很多无用的渲染。
        自定义 render。我们会提供一个 API 用来创建自定义的 render，因此你不需要为了自定义一些功能而 fork Vue 的代码。这个特性给 Weex 和 NativeScript Vue 这样的项目提供了很多便利。


**>1.1.3  编译器增强**



        简述：编译出的内容对 tree-shaking 友好，更多 AOT 优化，更好的错误提示，对 source map 的支持更好。
        为了输出对 tree-shaking 友好的代码，模板中如果用到了一些可选特性，那么生成的代码中将使用 ES 模块语法来 import 这些特性。因此没有用到的可选特性就不会出现在最终代码中。
        由于对虚拟 DOM 进行了优化，所以有了更高效的编译时优化，比如静态树提升、静态属性提升、为运行时添加编译提示信息以减少子节点正常化（children normalization），VNode 创建的快速路径等。
        重写解析器（parser），以在模板编译错误提示中添加位置信息。这也会使得 Vue 支持模板的 source map。新的解析器可以提供给第三方工具使用，比如 eslint-plugin-vue 和 IDE。


**1.2  Vue 3.0和Vue 2.0 的对比**


        1. 默认进行懒观察（lazy observation）。在 2.x 版本里，不过数据多大，都会在一开始就为其创建观察者。当数据很大时，这可能会在页面载入时造成明显的性能压力。3.x 版本，只会对「被用于渲染初始可见部分的数据」创建观察者，而且 3.x 的观察者更高效。
        2. 更精准的变更通知。比例来说：2.x 版本中，你使用 Vue.set 来给对象新增一个属性时，这个对象的所有 watcher 都会重新运行；3.x 版本中，只有依赖那个属性的 watcher 才会重新运行。
        暂时来讲,Vue 3.0 和 Vue 2.0 中间虽然api没有什么特别大的变化,但是相对于原理而言Vue 3.0 使用了TypeScript进行重构之后各方面的性能提升都有了一个重大突破(相对于2.0来说),另外这个工作已近从2.6版本渐渐开始了,虽然提升效果不是很明显,但是我相信Vue3.0能给我们带来更大的惊喜.