vue3.0新变化了解

不断学习的码农

已于 2023-01-19 11:25:20 修改

阅读量393

点赞数 1

分类专栏： Vue3.0技术（持续更新中...）文章标签：前端 javascript vue.js

于 2022-09-21 10:02:25 首次发布

本文链接：https://blog.csdn.net/weixin_44162077/article/details/126966843

版权

Vue3.0技术（持续更新中...）专栏收录该内容

18 篇文章 2 订阅 ¥9.90 ¥99.00

订阅专栏

超级会员免费看

Vue3.0引入了Proxy实现全面数据监听，优化了diff算法，支持多根节点的fragment，采用Composition API提高代码可维护性，并加强了对TypeScript的支持，同时通过静态提升提升渲染性能。

摘要由CSDN通过智能技术生成

一、diff算法性能优化

1.diff算法的优化
	vue2.0
		在vue2中使用的Object.definePropert(进行劫持，结合发布订阅模式的方式来实现的
	缺点很明显。只能监听某个属性，无法对新添加或删除的属性进行监听、无法监听数组的变化。
		
	vue3.0
	源码全部用TS重写。使用monorepo的方式来组织项目的结构，把独立的功能模块都提取到不同的包中
		用proxy也就是代理对象重写了响应式的代码，并且对编译器做了优化，重写了虚拟DOM,从而让渲染和update的性能都有了大幅度的提升，另外官方介绍 服务端渲染的性能也提升了2-3倍

二、数据监听双向绑定原理发生了变化

vue2.0 使用的是Object.definePropert()，缺点很明显。
1.defineProperty只能监听某个属性，不能对全对象监听
2.无法监听数组的变化，导致vue只能重写数组方法来监听数组

vue3.0升级使用的是es6新语法 Proxy
proxy优点：功能很强大
1 .可以直接监听整个对象，⽽⾮是对象的某个属性
2 .可以直接监听数组的变化
ref（）定义简单数据类型
reactive（）定义复杂数据类型

三、vue3.0可以存在多个根节点了
3.0引入了fragment概念，这是一个抽象的节点，如果发现组件是多根的会自动创建一个fragment节点，把多根节点视为自己的children。在patch时，如果发现这是一个fragment节点，则直接遍历children创建或更新