当前位置：网站首页 > IT知识 > 正文

浅谈vue3.0和vue2.0的区别

liuian 2024-12-31 12:57 39 浏览

进入2020年，离vue3.0正式版发布的时间越来越近了。今天，借助尤雨溪大大提前发布的vue3.0源码，老K为大家整理一下vue3.0和vue2.0的区别。

vue3的变化可以总结为以下几点：

更小
更快
加强typescript支持
Api一致性
提高可维护能力
开放更多底层功能

其中前三点是最主要的变化。

更小：

vue2采用面向对象编程的思想，vue3则采用函数式编程的思想。

vue2源码中代码是这样组织的：

function vue(){...} 
vue.prototype.init = ...

vue3源码中是这样组织的：

//监听方法：
function watch(){...} 
//渲染方法：
function render(){...}

原因：充分利用函数式编程组合大于继承的优势，采用函数式编程更利于逻辑功能的复用，webpack打包时更有利于tree-shaking，更利于代码的压缩，更利于返回值类型校验，压缩后的文件体积更小。

更快：

vue3修改了虚拟dom的算法（即diff算法 - 比对虚拟dom有没有变化）

vue2需要diff所有的虚拟dom节点，而vue3参考了SVELTE框架的思想，先分层次-然后找不变化的层-针对变化的层进行diff，更新速度不会再受template大小的影响，而是仅由可变的内容决定。经过尤雨溪自己的测试，大概有6倍的速度提升。

加强typescript支持：

vue3的源码开始采用了ts进行编写，给开发者也提供了支持ts的开发模式。

Api一致性

vue3最开始的版本可以完美兼容vue2的api。

提高可维护能力

从源码的层面上提供了更多的可维护能力。

开放更多底层功能

把更多的底层功能开放出来，比如render、依赖收集功能，我们可以更好的进行自定义化开发，可以写更多的高阶组件。

最后我们再谈谈两者在数据双向绑定方面的区别。

数据双向绑定：

关于数据双向绑定的实现，vue2 采用了defineProperty，而vue3则采用了proxy。

优点：

使用proxy不污染源对象，会返回一个新对象，defineProperty是注入型的，会破坏源对象
使用proxy只需要监听整个源对象的属性，不需要循环使用Object.defineProperty监听对象的属性
使用proxy可以获取到对象属性的更多参数，使用defineProperty只能获取到监听属性的新值newvalue

/* vue2.0*/
var a = { b:123, c:444};
Object.defineProperty(a,'b',{ 
    set: function(newvalue){ 
      console.log('i am be set') 
    }
}) //只能获取到newvalue这个参数

/* vue3.0 */
var a={ b:123, c:444};
var newa = new Proxy(a,{ 
    set:function(target,key,newvalue){ 
        console.log(target,key,newvalue) 
    }
}) //可以获取到target,key,newvalue三个参数

希望整理的这些内容对大家有所帮助。最后老K提前祝大家春节快乐！！！

本文为原创内容，若转载请注明出处，转发感激不尽。

vue console.log

上一篇：Vue生产环境调试的方法
下一篇：Electron+Vue3.2+TypeScript+Vite开发桌面端

浅谈vue3.0和vue2.0的区别

相关推荐

C++ std::vector 简介

飞牛OS入门安装遇到问题，如何解决?

系统C盘清理:微信PC端文件清理，扩大C盘可用空间步骤

如何在 iPhone 和 Android 上恢复已删除的抖音消息

大模型手册: 保姆级用CherryStudio知识库

Boost高性能并发无锁队列指南:boost::lockfree::queue

西门子博途中如何输入读取和编辑date and time变量

我的Excel打开后是一堆乱码，如何解决?

用什么工具在Win中查看8G大的log文件?

威联通NAS安装阿里云盘WebDAV服务并添加到Infuse