vue3.0新特性

最新推荐文章于 2024-04-27 03:17:07 发布

程序员良仔

最新推荐文章于 2024-04-27 03:17:07 发布

阅读量518

点赞数

分类专栏： vue基础知识与运用文章标签： 1024程序员节 vue javascript

本文链接：https://blog.csdn.net/weixin_44246717/article/details/125278063

版权

vue基础知识与运用专栏收录该内容

6 篇文章 7 订阅

订阅专栏

前言

一、对比vue2的变化

1. 优点

vue3支持vue2的大多数特性，实现对vue2的兼容
vue3对比vue2具有明显的性能提升
- 打包大小减少41%
- 初次渲染快55%，更新快133%
- 内存使用减少54%
更好的支持TypeScript
使用Proxy代替defineProperty实现响应式数据
新增组合API

2. 性能提升的原因

静态标记
- vue2从根节点开始对虚拟dom进行全量对比（每个节点不论写死的还是动态的都会一层一层比较）
- vue3新增了静态标记与上次虚拟dom对比的时候，只对比带有 patchFlags 的节点。跳过一些静态节点对比（下图编译结果中-1跟1就属于静态标记）

<div id='app'>
  <div>helloWorld</div>
  <div>{{msg}}</div>
</div>

<!--编译后-->
<script>
  const _hoisted_1 = { id: "app" }
  const _hoisted_2 = /*#__PURE__*/_createElementVNode("div", null, "helloWorld", -1 /* HOISTED */)

  export function render(...) {
    return (
      _openBlock(),
      _createBlock('div', _hoisted_1, [
        _hoisted_2,
        _createElementVNode('div',null,_toDisplayString(_ctx.msg),1 /* TEXT */),
      ])
    )
  }
</script>

3. 响应式数据的变化

hoistStatic 静态提升
- vue2里每当触发更新的时候，不管元素是否参与更新，每次都会重新创建
- vue3为了避免每次渲染的时候都要重新创建这些对象，会把不参与更新的元素保存起来，只创建一次，每次复用。比如上面_hoisted_1，_hoisted_2被提升到渲染函数render之外，
cacheHandlers 事件缓存
- vue2里绑定事件都要重新生成新的function去更新
- vue3会自动生成一个内联函数，同时生成一个静态节点。onclick时会读取缓存，如果缓存没有的话，就把传入的事件存到缓存里

<div @click="handleClick">点击</div>
 
<!--编译后-->
<script>
 export function render(...) {
   return (_openBlock()._createElementVNode('div',{onClick: _ctx.todo}, '点击'))
   )
 }
</script>
<script>
 export function render(...) {
   return (_openBlock()._createElementVNode('div',{
     onClick: _cache[0] || (_cache[0] = (...args) => (_ctx.todo(...args)))
   },'点击'))
 }
</script>