参考:vue2 升 3 指南
生命周期钩子
选项式的 API destroyed
改为 unmounted
,并新增 **errorCaptured、renderTracked、renderTriggered **等钩子,已经全新的对应 hook
选项式 API | Hook inside setup |
---|
beforeCreate | Not needed* |
created | Not needed* |
beforeMount | onBeforeMount |
mounted | onMounted |
beforeUpdate | onBeforeUpdate |
updated | onUpdated |
beforeUnmount | onBeforeUnmount |
unmounted | onUnmounted |
errorCaptured | onErrorCaptured |
renderTracked | onRenderTracked |
renderTriggered | onRenderTriggered |
activated | onActivated |
deactivated | onDeactivated |
创建实例
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17
| import Vue from "vue"; import App from "./App"; Vue.config.productionTip = false; App.mpType = "app"; const app = new Vue({ ...App, }); app.$mount();
import { createApp } from "vue"; import App from "./App.vue"; import router from "./router"; import store from "./store";
createApp(App).use(store).use(router).mount("#app");
|
全局属性
| Vue.prototype.$http = () => {};
const app = createApp({}); app.config.globalProperties.$http = () => {};
|
插件使用
| import store from "./store"; Vue.prototype.$store = store;
import store from "./store"; const app = createApp(App); app.use(store);
|
只能使用 ES6 模块规范
commonJS 需改为 ES6 模块规范
| var utils = require("../../../common/util.js");
import utils from "../../../common/util.js";
module.exports.X = X;
export default { X };
|
vuex 使用方式
| import Vue from "vue"; import Vuex from "vuex"; Vue.use(Vuex); const store = new Vuex.Store({ state: {}, }); export default store;
import { createStore } from "vuex"; const store = createStore({ state: {}, }); export default store;
|
事件的适配
Vue3 现在提供了一个emits选项,类似于现有props选项。此选项可用于定义组件可以向其父对象发出的事件, 更多(opens new window)
强烈建议使用**emits**记录每个组件发出的所有事件。
这一点特别重要,因为去除了.native修饰符。emits 现在在未使用声明的事件的所有侦听器都将包含在组件的中$attrs,默认情况下,该侦听器将绑定到组件的根节点。
| <template> <button @click="onClick">OK</button> </template> <script> export default { emits: ["boom"], methods: { onClick() { this.$emit("boom", "nmzl"); }, }, }; </script>
|
修改 modelValue
用于自定义组件时,Vue3 v-model prop 和事件默认名称已更改 props.value 修改为 props.modelValue ,event.value 修改为 update:modelValue
| export default { props: { modelValue: String, }, };
|
事件返回
将之前的 this.$emit(‘input’) 修改为 this.$emit(‘update:modelValue’) ,vue3 中将省略这一步骤
自定义组件上的 v-model 相当于传递了 modelValue prop 并接收抛出的 update:modelValue 事件:
| <ChildComponent v-model="pageTitle" />
<!-- 是以下的简写: -->
<ChildComponent :modelValue="pageTitle" @update:modelValue="pageTitle = $event" />
|
若需要更改 model 名称,作为组件内 model 选项的替代,现在我们可以将一个 argument(就是冒号后的 title) 传递给 <font style="color:rgb(44, 62, 80);">v-model:</font>
| <ChildComponent v-model:title="pageTitle" />
<!-- 是以下的简写: -->
<ChildComponent :title="pageTitle" @update:title="pageTitle = $event" />
|
插槽的适配
Vue3 将不支持 slot=”xxx” 的用法 ,请使用 v-slot:xxx 用法。更多
| <!-- Vue2 支持的用法 --> <uni-nav-bar> <view slot="left" class="city"> <!-- ... --> </view> </uni-nav-bar>
<!-- Vue3 支持的用法 --> <uni-nav-bar> <template v-slot:left> <view class="city"> <!-- ... --> </view> </template> </uni-nav-bar>
|
不再支持过滤器
从 Vue 3.0 开始,过滤器已删除,不再支持,建议用方法调用或计算属性替换它们。更多