全局安装vue_前端基础:Vue3.0保留选项的写法,由构造函数Vue.xx到实例app.xx

以前(Vue2.x)

import Vue from 'vue'import App from './App.vue'Vue.config.ignoredElements = [/^app-/]Vue.use(/* ... */)Vue.mixin(/* ... */)Vue.component(/* ... */)Vue.directive(/* ... */)new Vue({ render: h => h(App)}).$mount('#app')
d2c1b544fec4c5f25118ee8831938378.png

当前(Vue3.0)

import { createApp } from 'vue'import App from './App.vue'const app = createApp(App)app.config.ignoredElements = [/^app-/]app.use(/* ... */)app.mixin(/* ... */)app.component(/* ... */)app.directive(/* ... */)app.mount('#app')
2697c8f2e2ad13e83666bec2bba8c839.png

新全局API

import { createApp } from 'vue'import App from './App.vue'const app = createApp(App)
1480fa3e6072f93123e6e8c75190a1a3.png

全局映射API

1.全局配置

Vue.config -> app.config

2.注册类型API

Vue.component -> app.componentVue.directive -> app.directiveVue.filter -> app.filter

3.扩展类型API

Vue.mixin -> app.mixinVue.use -> app.use

手动挂载

const rootInstance = app.mount('#app')rootInstance instanceof Vue // true

也可以接受第二参数props

app.mount('#app', { // props to be passed to root component})

依赖注册

// in the entryapp.provide({ [ThemeSymbol]: theme})// in a child componentexport default { inject: { theme: { from: ThemeSymbol } }, template: `
820d27295c1b1b396d2018addc3646e8.png

缺陷

Vue2.x中,许多库和插件在UMD构建的时候是自动安装的,如路由vue-router:

自动安装的时候会调用Vue.use(),在上述“扩展类型API”已表明,Vue.use()修正为实例app.use(),Vue.use已不再使用,当然会提供预警信息。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值