Skip to content

Commit

Permalink
Update Vuejs-RFC-0009
Browse files Browse the repository at this point in the history
mode details on mounting behavior
replacement for Vue.prototype

vuejs/rfcs#117
  • Loading branch information
rzning committed Mar 25, 2020
1 parent 057647f commit ba3875b
Showing 1 changed file with 33 additions and 1 deletion.
34 changes: 33 additions & 1 deletion Vue/rfcs/vue-rfcs-0009-global-api-change.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
---
title : Vuejs Global API Change
recorddate : 2020-03-23
updatedate : 2020-03-25
---

# Vuejs RFCs 全局 API 更改
Expand Down Expand Up @@ -31,6 +32,8 @@ Vue.mixin(/* ... */)
Vue.component(/* ... */)
Vue.directive(/* ... */)

Vue.prototype.customProperty = () => {}

new Vue({
render: h => h(App)
}).$mount('#app')
Expand All @@ -50,7 +53,9 @@ app.mixin(/* ... */)
app.component(/* ... */)
app.directive(/* ... */)

app.mount('#app')
app.config.globalProperties.customProperty = () => {}

app.mount(App, '#app')
```

## 详细设计
Expand Down Expand Up @@ -98,6 +103,18 @@ const rootInstance = app.mount(App, '#app')
})
```

当使用包含编译器的构建并在没有模板的情况下挂载根组件时,
Vue 将尝试使用挂载目标元素的内容作为模板。
注意此时 3.x2.x 处理行为不同:

-2.x 中,根实例使用目标元素的 `outerHTML` 作为模板,替换目标元素本身。
-3.x 中,根实例使用目标元素的 `innerHTML` 作为模板,只替换目标元素的子元素。

如果目标元素包含多个子元素,则根实例将作为一个片段挂载。
并且它的 `this.$el` 将指向片段的起始锚节点。

在 Vue 3.x 由于片段的特性存在,建议使用模板引用 ( Template Refs ) 直接访问 DOM 节点,而不是依赖于 `this.$el` 属性。

### Provide / Inject

应用实例可通过 `app.provide` 提供全局依赖数据,可以注入应用内的任何一个组件:
Expand All @@ -119,6 +136,21 @@ export default {
}
```

### 附加的全局共享实例属性

-2.x 可以通过简单地将全局共享实例属性附加到 `Vue.prototype`
- 在 Vue 3.x 中,由于全局 `Vue` 不再是一个构造函数,因此不再被支持

作为替代,共享实例属性应该附加到应用实例的 `config.globalProperties` 配置中:

```js
// 2.x
Vue.prototype.$http = () => {}
// 3.x
app.config.globalProperties.$http = () => {}
```

## 缺点

### 插件自动安装
Expand Down

0 comments on commit ba3875b

Please sign in to comment.