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>