语法

# 语法

# createApp

// vue2.x
const app = new Vue({
  /*options*/
});
Vue.use(/*...*/);
Vue.mixin(/*...*/);
Vue.component(/*...*/);
Vue.directive(/*...*/);

// vue3
const app = Vue.createApp({
  /*options*/
});
app.use(/*...*/);
app.mixin(/*...*/);
app.component(/*...*/);
app.directive(/*...*/);

# emits

需要在子组件的 emits 中添加发射的事件

// children component
export default {
  name: "Children",
  emits: ["onSayHello"],
  setup(props, { emit }) {
    emit("onSayHello", "vue3");
  },
};

// parent component
<template>
  <div id="parent" @onSayHello="sayHello">
    parent
  </div>
</template>

export default {
  name: "parent",
  methods: {
    sayHello(info) {
      console.log("hello", info)
    }
  }
}

# 多事件处理

<button @click="one($event), two($event)">
  Submit
</button>

# Fragment

// 没有要求再用一个节点包裹
<template>
  <h3>{{ title }}</h3>
  <div v-html="content"></div>
</template>

# 移除.sync

<MyComponent v-bind:title.sync="title" />

<MyComponent v-model:title="title" />

# 异步组件

// vue2.x
new Vue({
  components: {
    "my-component": () => import("./my-async-component.vue"),
  },
});

// vue3
import { createApp, defineAsyncComponent } from "vue";

createApp({
  /// ...
  components: {
    AsyncComponent: defineAsyncComponent(() =>
      import("./components/AsyncComponent.vue")
    ),
  },
});

# 移除 filter

// 在双花括号中
{{ message | capitalize }}

// 在v-bind中
<div v-bind:id="rawId | formatId"></div>

# Teleport

把一个组件放在外面去

<button @click="modalOpen=true">
  Open full screen modal
</button>

<teleport to="body">
  <div v-if="modalOpen" class="modal">
    <div>
      telePort 弹窗 (父元素是body)
      <button @click="modalOpen=false">Close</button>
    </div>
  </div>
</template>

# Suspense

<Suspense>
  <template>
    <Test1/> <!-- 是一个异步组件 -->
  </template>

  <!-- #fallback就是一个具名插槽
    即Suspense组件内部,有两个slot,
    其中一个具名为fallback -->
  <template #fallback>
    Loading...
  </template>
</Suspense>

# Composition API

  1. this 是不存在的,Option API(即 Vue2.x)有;

  2. 使用 getCurrentInstance 获取当前实例;

# 优化

# PatchFlag

# HoistStatic

  1. 将静态节点的定义,提升到父作用域,缓存起来;

  2. 多个相邻的静态节点,会被合并起来;

  3. 典型的拿空间换时间的优化策略;

# CacheHandler

  1. 缓存事件;

# SSR 优化

  1. 静态节点直接输出,绕过了 vdom;

  2. 动态节点还是需要动态渲染;

# tree shaking

  1. 编译时,根据不同的情况,引入不同的 API;