建站
咨詢
售后
建站咨詢
新聞中心
在 Vue 3 中，改變?nèi)?Vue 行為的 API 現(xiàn)在被移動到了由新的 createApp 方法所創(chuàng)建的應用實例上。此外，現(xiàn)在它們的影響僅限于該特定應用實例：
創(chuàng)新互聯(lián)建站是一家專注于做網(wǎng)站、網(wǎng)站建設與策劃設計,潼南網(wǎng)站建設哪家好?創(chuàng)新互聯(lián)建站做網(wǎng)站,專注于網(wǎng)站建設十載,網(wǎng)設計領域的專業(yè)建站公司;建站業(yè)務涵蓋:潼南等地區(qū)。潼南做網(wǎng)站價格咨詢:18980820575
import { createApp } from 'vue'
const app = createApp({}) 調(diào)用 createApp 返回一個應用實例。該實例提供了一個應用上下文。應用實例掛載的整個組件樹共享相同的上下文，該上下文提供了之前在 Vue 2.x 中“全局”的配置。
另外，由于 createApp 方法返回應用實例本身，因此可以在其后鏈式調(diào)用其它方法，這些方法可以在以下部分中找到。
#component
- 參數(shù)：
{string} name{Function | Object} [definition]
- 返回值：
- 如果傳入
definition參數(shù)，返回應用實例。 - 如果不傳入
definition參數(shù)，返回組件定義。
- 用法：
注冊或檢索全局組件。注冊還會使用給定的 name 參數(shù)自動設置組件的 name。
- 示例：
import { createApp } from 'vue'
const app = createApp({})
// 注冊一個名為my-component的組件
app.component('my-component', {
/* ... */
})
// 檢索注冊的組件(始終返回構造函數(shù))
const MyComponent = app.component('my-component', {})- 參考：組件基礎
#config
- 用法：
包含應用配置的對象。
- 示例：
import { createApp } from 'vue'
const app = createApp({})
app.config = {...}- 參考：應用配置
#directive
- 參數(shù)：
{string} name{Function | Object} [definition]
- 返回值：
- 如果傳入
definition參數(shù)，返回應用實例。 - 如果不傳入
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 之外，你應該將這些參數(shù)視為只讀，并且永遠不要修改它們。如果你需要跨鉤子共享信息，建議通過元素的自定義數(shù)據(jù)屬性集進行共享。
- 參考：自定義指令
#mixin
- 參數(shù)：
{Object} mixin
- 返回值：
- 應用實例
- 用法：
在整個應用范圍內(nèi)應用混入。一旦注冊，它們就可以在當前的應用中任何組件模板內(nèi)使用它。插件作者可以使用此方法將自定義行為注入組件。不建議在應用代碼中使用。
- 參考：全局混入
#mount
- 參數(shù)：
{Element | string} rootContainer{boolean} isHydrate
- 返回值：
- 根組件實例
- 用法：
將應用實例的根組件掛載在提供的 DOM 元素上。
- 示例：
import { createApp } from 'vue'
const app = createApp({})
// 做一些必要的準備
app.mount('#my-app')- 參考：
- 生命周期圖示
#provide
- 參數(shù)：
{string | Symbol} keyvalue
- 返回值：
- 應用實例
- 用法：
設置一個可以被注入到應用范圍內(nèi)所有組件中的值。組件應該使用 inject 來接收提供的值。
從 provide/inject 的角度來看，可以將應用程序視為根級別的祖先，而根組件是其唯一的子級。
該方法不應該與 provide 組件選項或組合式 API 中的 provide 方法混淆。雖然它們也是相同的 provide/inject 機制的一部分，但是是用來配置組件提供的值而不是應用提供的值。
通過應用提供值在寫插件時尤其有用，因為插件一般不能使用組件提供值。這是使用 globalProperties 的替代選擇。
Note
provide 和 inject 綁定不是響應式的。這是有意為之。不過，如果你向下傳遞一個響應式對象，這個對象上的 property 會保持響應式。
- 示例：
向根組件中注入一個 property，值由應用提供。
import { createApp } from 'vue'
const app = createApp({
inject: ['user'],
template: `
{{ user }}
`
})
app.provide('user', 'administrator')- 參考：
- Provide / Inject
#unmount
- 參數(shù)：
{Element | string} rootContainer
- 用法：
在提供的 DOM 元素上卸載應用實例的根組件。
- 示例：
import { createApp } from 'vue'
const app = createApp({})
// 做一些必要的準備
app.mount('#my-app')
// 掛載5秒后，應用將被卸載
setTimeout(() => app.unmount('#my-app'), 5000)#use
- 參數(shù)：
{Object | Function} plugin...options (可選)
- 返回值：
- 應用實例
- 用法：
安裝 Vue.js 插件。如果插件是一個對象，它必須暴露一個 install 方法。如果它本身是一個函數(shù)，它將被視為安裝方法。
該安裝方法將以應用實例作為第一個參數(shù)被調(diào)用。傳給 use 的其他 options 參數(shù)將作為后續(xù)參數(shù)傳入該安裝方法。
當在同一個插件上多次調(diào)用此方法時，該插件將僅安裝一次。
- 參考： 插件
網(wǎng)頁題目：創(chuàng)新互聯(lián)VUE3教程：Vue3.0應用API
分享網(wǎng)址：http://fisionsoft.com.cn/article/cohhsjd.html
