关于javascript:Vue-3-应用API讲解

37次阅读

共计 3616 个字符,预计需要花费 10 分钟才能阅读完成。

欢送订阅我的公众号《人生代码》

利用 API

从明天开始,咱们开始进入 API 的学习啦,小伙伴们是不是很开森啊,明天咱们就开始介绍利用 API

createApp

最应该将就是 createApp 这个玩意,就像程序的入口一样。在 Vue 3 中,扭转全局 Vue 行为的 API 当初被挪动到了由新的 createApp 办法所创立的利用实例上。此外,当初它们的影响仅限于该特定利用实例:

`// src/main.js
import {createApp} from ‘vue’
import App from ‘./App.vue’
import router from ‘./router’
import store from ‘./store’
let app = createApp(App)
`

调用 createApp 返回一个利用实例。该实例提供了一个利用上下文。利用实例挂载的整个组件树共享雷同的上下文,该上下文提供了之前在 Vue 2.x 中“全局”的配置。

另外,因为 createApp 办法返回利用实例自身,因而能够在其后链式调用其它办法,这些办法能够在以下局部中找到。

component

  • 参数:

    • {string} name
    • {Function | Object} [definition]
  • 返回值:

    • 如果传入 definition 参数,返回利用实例。
    • 如果不传入 definition 参数,返回组件定义。
  • 用法:

    注册或检索全局组件。注册还会应用给定的 name 参数主动设置组件的 name

  • 示例:

如何注册一个名为 my-component 的组件:

“app.component(‘my-component’, {
  template: `
    <div>11111</div>
  `,
})

config

  • 用法:

蕴含利用配置的对象。

  • 示例:

就比方咱们能够配制一些全局的属性,办法等。

`app.config.optionMergeStrategies.custom = (toVal, fromVal) => {
  console.log(fromVal, toVal)
  // => “goodbye!”, undefined
  return fromVal || toVal
}
`

directive

  • 参数:

    • {string} name
    • {Function | Object} [definition]
  • 返回值:

    • 如果传入 definition 参数,返回利用实例。
    • 如果不传入 definition 参数,返回指令定义。
  • 用法:

    注册或检索全局指令。

  • 示例:

“import {createApp} from ‘vue’
const app = createApp({})
// 注册
app.directive(‘my-directive’, {
  // 指令是具备一组生命周期的钩子:
  // 在绑定元素的父组件挂载之前调用
  beforeMount() {},
  // 绑定元素的父组件挂载时调用
  mounted() {},
  // 在蕴含组件的 VNode 更新之前调用
  beforeUpdate() {},
  // 在蕴含组件的 VNode 及其子组件的 VNode 更新之后调用
  updated() {},
  // 在绑定元素的父组件卸载之前调用
  beforeUnmount() {},
  // 卸载绑定元素的父组件时调用
  unmounted() {}
})
// 注册 (性能指令)
app.directive(‘my-directive’, () => {
  // 这将被作为 mounted 和 updated 调用
})
// getter, 如果已注册,则返回指令定义
const myDirective = app.directive(‘my-directive’)

指令钩子传递了这些参数:

#el

指令绑定到的元素。这可用于间接操作 DOM。

#binding

蕴含以下 property 的对象。

  • instance:应用指令的组件实例。
  • value:传递给指令的值。例如,在 v-my-directive="1 + 1" 中,该值为 2
  • oldValue:先前的值,仅在 beforeUpdateupdated 中可用。值是否已更改都可用。
  • arg:参数传递给指令 (如果有)。例如在 v-my-directive:foo 中,arg 为 "foo"
  • modifiers:蕴含修饰符 (如果有) 的对象。例如在 v-my-directive.foo.bar 中,修饰符对象为 {foo: true,bar: true}
  • dir:一个对象,在注册指令时作为参数传递。例如,在以下指令中

mixin

  • 参数:

    • {Object} mixin
  • 返回值:

    • 利用实例
  • 用法:

    在整个利用范畴内利用混入。一旦注册,它们就能够在以后的利用中任何组件模板内应用它。插件作者能够应用此办法将自定义行为注入组件。 不倡议在利用代码中应用

  • 参考: 全局混入

`app.config.optionMergeStrategies.custom = (toVal, fromVal) => {
  console.log(fromVal, toVal)
  // => “goodbye!”, undefined
  return fromVal || toVal
}
app.mixin({
  custom: ‘goodbye!’,
  created() {
    console.log(this.$options.custom) // => “hello!”
  }
})
`

mount

  • 参数:

    • {Element | string} rootContainer
    • {boolean} isHydrate
  • 返回值:

    • 根组件实例
  • 用法:

    将利用实例的根组件挂载在提供的 DOM 元素上。

  • 示例:

“import {createApp} from ‘vue’
import App from ‘./App.vue’
import router from ‘./router’
import store from ‘./store’
let app = createApp(App)
console.log(‘appp====>’, app)
app.use(store).use(router).mount(‘#app’)
app.component(‘my-component’, {
  template: `
    <div>11111</div>
  `,
})
app.config.optionMergeStrategies.custom = (toVal, fromVal) => {
  console.log(fromVal, toVal)
  // => “goodbye!”, undefined
  return fromVal || toVal
}
app.mixin({
  custom: ‘goodbye!’,
  created() {
    console.log(this.$options.custom) // => “hello!”
  }
})

provide

  • 参数:

    • {string | Symbol} key
    • value
  • 返回值:

    • 利用实例
  • 用法:

    设置一个能够被注入到利用范畴内所有组件中的值。组件应该应用 inject 来接管提供的值。

    provide/inject 的角度来看,能够将应用程序视为根级别的先人,而根组件是其惟一的子级。

    该办法不应该与 provide 组件选项或组合式 API 中的 provide 办法混同。尽管它们也是雷同的 provide/inject 机制的一部分,然而是用来配置组件提供的值而不是利用提供的值。

    通过利用提供值在写插件时尤其有用,因为插件个别不能应用组件提供值。这是应用 globalProperties 的替代选择。

    Note

    provideinject 绑定不是响应式的。这是无意为之。不过,如果你向下传递一个响应式对象,这个对象上的 property 会放弃响应式。

  • 示例:

    向根组件中注入一个 property,值由利用提供。

“import {createApp} from ‘vue’
const app = createApp({
  inject: [‘user’],
  template: `
    <div>
      {{user}}
    </div>
  `
})
app.provide(‘user’, ‘administrator’)

use

  • 参数:

    • {Object | Function} plugin
    • ...options (可选)
  • 返回值:

    • 利用实例
  • 用法:

    装置 Vue.js 插件。如果插件是一个对象,它必须裸露一个 install 办法。如果它自身是一个函数,它将被视为装置办法。

    该装置办法将以利用实例作为第一个参数被调用。传给 use 的其余 options 参数将作为后续参数传入该装置办法。

    当在同一个插件上屡次调用此办法时,该插件将仅装置一次。

  • 参考: 插件
正文完
 0