Vue3 全局 Api 与 v-model 的使用

Vue2 中的 Global Api 在 Vue3 中 改为 应用程序实例调用，如自定义组件

// Vue2 使用 Vue.component 方式
import Vue from "vue";
import App from "./App.vue";

Vue.component('App', App);

// Vue3 使用 createApp().component 方式
import { createApp, h } from "vue";
import App from "./App.vue";

createApp(App)
  .component("Comp", { render: () => h("div", "全局自定义组件") });

• 注：同时移除了 Vue.config.productionTip 和 Vue.filter

同时部分 Api 改为了可摇数优化，打包时使用 webpack 的 tree-shaking 排除多余的 dead code （无效代码）。

// Vue2
import Vue from "vue";

Vue.nextTick(() => {});

// Vue3
import { nextTick } from "vue";

nextTick(() => {});

在 Vue3 中 移除了 .sync 修饰符，v-model 实现组件双向数据绑定 的用法如下：

<template>
  <!-- v-model 的使用 -->
  <VmodelTest v-model:counter="counter" />
  <!-- 与 v-model 等效 -->
  <VmodelTest :counter="counter" @update:counter="counter = $event" />
</template>

<script>
import VmodelTest from "./VmodelTest.vue";

export default {
  data() {
    return {
      counter: 1,
    };
  },
  components: {
    VmodelTest,
  },
}
</script>

<!-- VmodelTest 组件 -->
<template>
  <div @click="$emit('update:counter', counter + 1)">
    counter: {{ counter }}
  </div>
</template>

export default {
  props: {
    counter: {
      type: Number,
      default: 0,
    },
  },
};
</script>