Skip to content

Commit 7eb78c2

Browse files
authored
mode details on mounting behavior + replacement for Vue.prototype (#117)
1 parent 0aa608f commit 7eb78c2

File tree

1 file changed

+32
-1
lines changed

1 file changed

+32
-1
lines changed

active-rfcs/0009-global-api-change.md

Lines changed: 32 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,8 @@ Vue.mixin(/* ... */)
2525
Vue.component(/* ... */)
2626
Vue.directive(/* ... */)
2727

28+
Vue.prototype.customProperty = () => {}
29+
2830
new Vue({
2931
render: h => h(App)
3032
}).$mount('#app')
@@ -44,7 +46,9 @@ app.mixin(/* ... */)
4446
app.component(/* ... */)
4547
app.directive(/* ... */)
4648

47-
app.mount('#app')
49+
app.config.globalProperties.customProperty = () => {}
50+
51+
app.mount(App, '#app')
4852
```
4953

5054
# Motivation
@@ -129,6 +133,18 @@ app.mount(App, '#app', {
129133
})
130134
```
131135

136+
### Mounting Behavior Difference from 2.x
137+
138+
When using the compiler-included build and mounting a root component with no template of its own, Vue will attempt to use the mount target element's content as template. Note the differences between the 3.x behavior and 2.x:
139+
140+
- In 2.x, the root instance uses target element's `outerHTML` as template and replaces target element itself.
141+
142+
- In 3.x, the root instance uses target element's `innerHTML` as template and only replaces target element's children.
143+
144+
In most cases this should have no effect on how your app behaves, with the only side effect being that if the target element contains multiple children, the root instance will be mounted as a fragment and its `this.$el` will be pointing to the starting anchor node of the fragment (a DOM Comment node).
145+
146+
In Vue 3, due to the availability of Fragments, it is recommended to use template refs for direct access to DOM nodes instead of relying on `this.$el`.
147+
132148
## Provide / Inject
133149

134150
An app instance can also provide dependencies that can be injected by any component inside the app:
@@ -177,6 +193,21 @@ app.config.isCustomElement = tag => tag.startsWith('ion-')
177193

178194
- This will be a new top-level option in the Vue CLI config.
179195

196+
## Attaching Globally Shared Instance Properties
197+
198+
In 2.x, it was possible to inject globally shared instance properties by simply attaching them to `Vue.prototype`.
199+
200+
In Vue 3, since the global `Vue` is no longer a constructor, this is no longer supported. Instead, shared instance properties should be attached to an app instance's `config.globalProperties` instead:
201+
202+
``` js
203+
// Before
204+
Vue.prototype.$http = () => {}
205+
206+
// After
207+
const app = createApp()
208+
app.config.globalProperties.$http = () => {}
209+
```
210+
180211
# Drawbacks
181212

182213
## Plugin auto installation

0 commit comments

Comments
 (0)