您的位置:首页 > 科技 > IT业 > Vue3相比于Vue2进行了哪些更新

Vue3相比于Vue2进行了哪些更新

2024/11/16 17:19:33 来源:https://blog.csdn.net/qq_43692768/article/details/140610333  浏览:    关键词:Vue3相比于Vue2进行了哪些更新

1、响应式原理

vue2

  vue2中采用 defineProperty 来劫持整个对象,然后进行深度遍历所有属性,给每个属性添加gettersetter,结合发布订阅模式实现响应式。

存在的问题:

  • 检测不到对象属性的添加和删除
  • 数组API方法无法监听到
  • 需要对每个属性进行遍历监听,如果嵌套对象,需要深层监听,造成性能问题

Vue3

  vue3采用proxy重写了响应式系统,proxy的监听是针对一个对象的,那么对这个对象的所有操作会进入监听操作。
  proxy可以直接监听数组的变化。

2、语法API

vue2

  Options API,即选项API。以vue为后缀的文件,通过定义methodscomputedwatchdata等属性与方法,共同处理页面逻辑。
  然而,当组件变得复杂,导致对应属性的列表也会增长,这可能会导致组件难以阅读和理解。

Vue3

  Composition API,即组合式API。组件根据逻辑功能来组织的,一个功能所定义的所有 API 会放在一起(更加的高内聚,低耦合)。
  即使项目很大,功能很多,我们都能快速的定位到这个功能所用到的所有 API。

3、Vue3支持多个根节点

  Vue2中,组件只能有一个根节点
  Vue3中,组件可设置多个根节点

4、生命周期

  Vue 3 新增了 setup() 函数,替代了 Vue 2 的 beforeCreatecreated 钩子函数。在 setup() 函数中,我们可以直接访问组件的实例属性方法,以及通过 next() 函数来访问父组件中的属性和方法。
在这里插入图片描述

5、Tree Shaking

  tree shaking 是一种通过清除多余代码方式来优化项目打包体积的技术。主要是借助ES6模块的静态编译思想,在编译时就能确定模块的依赖关系,以及输入和输出的变量。
  Vue3源码引入tree shaking特性,将全局 API 进行分块。如果您不使用某些功能,它们将不会包含在您的基础包中。

6、Diff算法优化

Vue2

  当数据发生变化,它就会新生成一个DOM树,并和之前的DOM树进行比较,找到不同的节点然后更新。但这比较的过程是全量的比较,也就是每个节点都会彼此比较。但其中很显然的是,有些节点中的内容是不会发生改变的,那我们对其进行比较就肯定消耗了时间。

Vue3

  在创建虚拟DOM树的时候,会根据DOM中的内容会不会发生变化,添加一个静态标记。那么之后在与上次虚拟节点进行对比的时候,就只会对比这些带有静态标记的节点。

7、静态提升

  Vue2中无论元素是否参与更新,每次都会重新创建,然后再渲染。
  Vue3中对不参与更新的元素,会做静态提升,只会被创建一次,在渲染时直接复用。这样就免去了重复的创建节点,大型应用会受益于这个改动,免去了重复的创建操作,优化了运行时候的内存占用。
  例子:

<span>你好</span>
<div>{{ message }}</div>

  没有做静态提升之前

export function render(_ctx, _cache, $props, $setup, $data, $options) {return (_openBlock(), _createBlock(_Fragment, null, [_createVNode("span", null, "你好"),_createVNode("div", null, _toDisplayString(_ctx.message), 1 /* TEXT */)], 64 /* STABLE_FRAGMENT */))
}

  做了静态提升之后

const _hoisted_1 = /*#__PURE__*/_createVNode("span", null, "你好", -1 /* HOISTED */)export function render(_ctx, _cache, $props, $setup, $data, $options) {return (_openBlock(), _createBlock(_Fragment, null, [_hoisted_1,_createVNode("div", null, _toDisplayString(_ctx.message), 1 /* TEXT */)], 64 /* STABLE_FRAGMENT */))
}// Check the console for the AST

  静态内容_hoisted_1被放置在render 函数外,每次渲染的时候只要取 _hoisted_1 即可。
  同时 _hoisted_1 被打上了 PatchFlag ,静态标记值为 -1 ,特殊标志是负整数表示永远不会用于 Diff。

8、事件监听缓存

  默认情况下绑定事件行为会被视为动态绑定,所以每次都会去追踪它的变化。但是因为是同一个函数,所以没必要去追踪它的变化。开启事件侦听器缓存后,没有了静态标记,下次diff算法的时候直接使用提升性能。

9、TypeScript

  Vue3是基于typeScript编写的,提供了更好的类型检查,能支持复杂的类型推导。

以上就是个人的一些见解,如有不足或补充,欢迎一起探讨!!!

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com