久久精品国产精品亚洲精品乱码,亚洲婷婷在线

在 Vue 3 中，改變?nèi)?Vue 行為的 API 現(xiàn)在被移動到了由新的 createApp 方法所創(chuàng)建的應(yīng)用實例上。此外，現(xiàn)在它們的影響僅限于該特定應(yīng)用實例：

import { createApp } from 'vue'


const app = createApp({})

調(diào)用 createApp 返回一個應(yīng)用實例。該實例提供了一個應(yīng)用上下文。應(yīng)用實例掛載的整個組件樹共享相同的上下文，該上下文提供了之前在 Vue 2.x 中“全局”的配置。

另外，由于 createApp 方法返回應(yīng)用實例本身，因此可以在其后鏈式調(diào)用其它方法，這些方法可以在以下部分中找到。

#component

參數(shù)：

{string} name
{Function | Object} [definition]

返回值：

如果傳入 definition 參數(shù)，返回應(yīng)用實例。
如果不傳入 definition 參數(shù)，返回組件定義。

用法：

注冊或檢索全局組件。注冊還會使用給定的 name 參數(shù)自動設(shè)置組件的 name。

示例：

import { createApp } from 'vue'


const app = createApp({})


// 注冊一個名為my-component的組件
app.component('my-component', {
  /* ... */
})


// 檢索注冊的組件(始終返回構(gòu)造函數(shù))
const MyComponent = app.component('my-component', {})

參考：組件基礎(chǔ)

#config

用法：

包含應(yīng)用配置的對象。

示例：

import { createApp } from 'vue'
const app = createApp({})


app.config = {...}

參考：應(yīng)用配置

#directive

參數(shù)：

{string} name
{Function | Object} [definition]

返回值：

如果傳入 definition 參數(shù)，返回應(yīng)用實例。
如果不傳入 definition 參數(shù)，返回指令定義。

用法：

注冊或檢索全局指令。

示例：

import { createApp } from 'vue'
const app = createApp({})


// 注冊
app.directive('my-directive', {
  // 指令是具有一組生命周期的鉤子：
  // 在綁定元素的父組件掛載之前調(diào)用
  beforeMount() {},
  // 綁定元素的父組件掛載時調(diào)用
  mounted() {},
  // 在包含組件的 VNode 更新之前調(diào)用
  beforeUpdate() {},
  // 在包含組件的 VNode 及其子組件的 VNode 更新之后調(diào)用
  updated() {},
  // 在綁定元素的父組件卸載之前調(diào)用
  beforeUnmount() {},
  // 卸載綁定元素的父組件時調(diào)用
  unmounted() {}
})


// 注冊 (功能指令)
app.directive('my-directive', () => {
  // 這將被作為 `mounted` 和 `updated` 調(diào)用
})


// getter, 如果已注冊，則返回指令定義
const myDirective = app.directive('my-directive')

指令鉤子傳遞了這些參數(shù)：

#el

指令綁定到的元素。這可用于直接操作 DOM。

#binding

包含以下 property 的對象。

instance：使用指令的組件實例。
value：傳遞給指令的值。例如，在 v-my-directive="1 + 1" 中，該值為 2。
oldValue：先前的值，僅在 beforeUpdate 和 updated 中可用。值是否已更改都可用。
arg：參數(shù)傳遞給指令 (如果有)。例如在 v-my-directive:foo 中，arg 為 "foo"。
modifiers：包含修飾符 (如果有) 的對象。例如在 v-my-directive.foo.bar 中，修飾符對象為 {foo: true，bar: true}。
dir：一個對象，在注冊指令時作為參數(shù)傳遞。例如，在以下指令中

app.directive('focus', {
  mounted(el) {
    el.focus()
  }
})

dir 將會是以下對象：

{
  mounted(el) {
    el.focus()
  }
}

#vnode

上面作為 el 參數(shù)收到的真實 DOM 元素的藍圖。

#prevNode

上一個虛擬節(jié)點，僅在 beforeUpdate 和 updated 鉤子中可用。

Note

除了 el 之外，你應(yīng)該將這些參數(shù)視為只讀，并且永遠不要修改它們。如果你需要跨鉤子共享信息，建議通過元素的自定義數(shù)據(jù)屬性集進行共享。

參考：自定義指令

#mixin

參數(shù)：

{Object} mixin

返回值：

應(yīng)用實例

用法：

在整個應(yīng)用范圍內(nèi)應(yīng)用混入。一旦注冊，它們就可以在當前的應(yīng)用中任何組件模板內(nèi)使用它。插件作者可以使用此方法將自定義行為注入組件。不建議在應(yīng)用代碼中使用。

參考：全局混入

#mount

參數(shù)：

{Element | string} rootContainer
{boolean} isHydrate

返回值：

根組件實例

用法：

將應(yīng)用實例的根組件掛載在提供的 DOM 元素上。

示例：

<body>
  <div id="my-app"></div>
</body>

import { createApp } from 'vue'


const app = createApp({})
// 做一些必要的準備
app.mount('#my-app')

參考：
- 生命周期圖示

#provide

參數(shù)：

{string | Symbol} key
value

返回值：

應(yīng)用實例

用法：

設(shè)置一個可以被注入到應(yīng)用范圍內(nèi)所有組件中的值。組件應(yīng)該使用 inject 來接收提供的值。

從 provide/inject 的角度來看，可以將應(yīng)用程序視為根級別的祖先，而根組件是其唯一的子級。

該方法不應(yīng)該與 provide 組件選項或組合式 API 中的 provide 方法混淆。雖然它們也是相同的 provide/inject 機制的一部分，但是是用來配置組件提供的值而不是應(yīng)用提供的值。

通過應(yīng)用提供值在寫插件時尤其有用，因為插件一般不能使用組件提供值。這是使用 globalProperties 的替代選擇。

Note

provide 和 inject 綁定不是響應(yīng)式的。這是有意為之。不過，如果你向下傳遞一個響應(yīng)式對象，這個對象上的 property 會保持響應(yīng)式。

示例：

向根組件中注入一個 property，值由應(yīng)用提供。

import { createApp } from 'vue'


const app = createApp({
  inject: ['user'],
  template: `
    <div>
      {{ user }}
    </div>
  `
})


app.provide('user', 'administrator')

參考：
- Provide / Inject

#unmount

參數(shù)：

{Element | string} rootContainer

用法：

在提供的 DOM 元素上卸載應(yīng)用實例的根組件。

示例：

<body>
  <div id="my-app"></div>
</body>

import { createApp } from 'vue'


const app = createApp({})
// 做一些必要的準備
app.mount('#my-app')


// 掛載5秒后，應(yīng)用將被卸載
setTimeout(() => app.unmount('#my-app'), 5000)

#use

參數(shù)：

{Object | Function} plugin
...options (可選)

返回值：

應(yīng)用實例

用法：

安裝 Vue.js 插件。如果插件是一個對象，它必須暴露一個 install 方法。如果它本身是一個函數(shù)，它將被視為安裝方法。

該安裝方法將以應(yīng)用實例作為第一個參數(shù)被調(diào)用。傳給 use 的其他 options 參數(shù)將作為后續(xù)參數(shù)傳入該安裝方法。

當在同一個插件上多次調(diào)用此方法時，該插件將僅安裝一次。

參考： 插件

Vue 3.0 應(yīng)用API