vue3.0新特性

前言

一、对比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>

二、新增特性

1. Composition (组合) API

2. setup

2.1 ref

2.2 reactive

2.3 toRef(obj,key) 、 toRefs(obj)

2.4 isRef 、unref 、 isReactive 、isProxy 、isReadonly

2.5 computed、watch、watchEffect

2.6 生命周期

2.7 $refs

2.8 自定义hook函数

3. 其他新特性

3.1 全局API

3.2 v-if 与 v-for 的优先级对比

3.3 v-for 中的 Ref 数组

3.4 v-bind合并行为

3.5 v-model

3.6 emits选项

3.7 事件 API（eventBus）

3.8 data选项

三、新组件

1. setup语法糖

2. Fragment(片断)

3. Teleport(瞬移)

4. Suspense(实验)

四、废除属性

1. $children

2. 过滤器filter

3. $listeners

---

觉得本文写的不错的，希望点赞、收藏、加关注，每月不定期更新干货哦，谢谢您嘞！

你可能感兴趣的文章：

• vue中组件间通讯的8种方法