Vue3学习笔记

Vue3.0六大亮点

1. Performance：性能比Vue 2.x快1.2~2倍
2. Tree shaking support：按需编译，体积比Vue 2.x更小
3. Composition API：组合API（类似React Hooks）
4. Better TypeScript support：更好的Ts支持
5. Custom Renderer API：暴露了自定义渲染API
6. Fragment,Teleport(Protal),Suspense:更先进的组件

Vue 3.0是如何变快的

diff方法优化：

• Vue2中的虚拟dom是进行全量的对比
• Vue3新增了静态标记（PatchFalg）
  在与上次虚拟节点进行对比时候，只对比带有patch flag的节点
  并且可以通过flag的信息得知当前节点要对面的具体内容

	<div>
   		<text>我是段落</text>
   		<text>{
  {msg}}</text>
   </div>

静态标记枚举类

hoistStatic静态提升

• Vue2中无论元素是否参与更新，每次都会重新创建
• Vue3中对于不参与更新的元素，只会被创建一次，之后会在每次渲染时候被不停的复用

<div>
  <p>Vue 3.0笔记</p>
  <p>Vue 3.0笔记</p>
  <p>{
  {meg}}</p>
</div>

静态提升后：

import {
    createVNode as _createVNode, toDisplayString as _toDisplayString, openBlock as _openBlock, createBlock as _createBlock } from "vue"

const _hoisted_1 = /*#__PURE__*/_createVNode("p", null, "Vue 3.0笔记", -1 /* HOISTED */)
const _hoisted_2 = /*#__PURE__*/_createVNode("p", null, "Vue 3.0笔记", -1 /* HOISTED */)

export function render(_ctx, _cache, $props, $setup, $data, $options) {
   
  return (_openBlock(), _createBlock("div", null, [
    _hoisted_1,
    _hoisted_2,
    _createVNode("p", null,