From 1168817b8a65fb9c32175d4f0bc826f23653605b Mon Sep 17 00:00:00 2001
From: Evan You <yyx990803@gmail.com>
Date: Tue, 21 Jan 2020 12:03:07 -0500
Subject: [PATCH] mode details on mounting behavior + replacement for
 Vue.prototype

---
 active-rfcs/0009-global-api-change.md | 31 +++++++++++++++++++++++++++
 1 file changed, 31 insertions(+)

diff --git a/active-rfcs/0009-global-api-change.md b/active-rfcs/0009-global-api-change.md
index 7a29e921..062097ae 100644
--- a/active-rfcs/0009-global-api-change.md
+++ b/active-rfcs/0009-global-api-change.md
@@ -25,6 +25,8 @@ Vue.mixin(/* ... */)
 Vue.component(/* ... */)
 Vue.directive(/* ... */)
 
+Vue.prototype.customProperty = () => {}
+
 new Vue({
   render: h => h(App)
 }).$mount('#app')
@@ -44,6 +46,8 @@ app.mixin(/* ... */)
 app.component(/* ... */)
 app.directive(/* ... */)
 
+app.config.globalProperties.customProperty = () => {}
+
 app.mount(App, '#app')
 ```
 
@@ -112,6 +116,18 @@ app.mount(App, '#app', {
 })
 ```
 
+### Mounting Behavior Difference from 2.x
+
+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:
+
+- In 2.x, the root instance uses target element's `outerHTML` as template and replaces target element itself.
+
+- In 3.x, the root instance uses target element's `innerHTML` as template and only replaces target element's children.
+
+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).
+
+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`.
+
 ## Provide / Inject
 
 An app instance can also provide dependencies that can be injected by any component inside the app:
@@ -160,6 +176,21 @@ app.config.isCustomElement = tag => tag.startsWith('ion-')
 
 - This will be a new top-level option in the Vue CLI config.
 
+## Attaching Globally Shared Instance Properties
+
+In 2.x, it was possible to inject globally shared instance properties by simply attaching them to `Vue.prototype`.
+
+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:
+
+``` js
+// Before
+Vue.prototype.$http = () => {}
+
+// After
+const app = createApp()
+app.config.globalProperties.$http = () => {}
+```
+
 # Drawbacks
 
 ## Plugin auto installation