私は Vue.js に非常に興味があり、普段取り組んでいる技術スタックも Vue.js なので、ここ数か月間 Vue.js のソース コードを勉強し、まとめとアウトプットを作成しました。この記事では主に Vue.js のソース コードのイベント機構を紹介します。編集者が非常に優れていると考えたので、参考として共有します。編集者をフォローして見てみましょう。皆さんのお役に立てれば幸いです。
学習プロセス中に、Vue https://github.com/answershuto/learnVue/tree/master/vue-src に中国語のコメントが追加されました。Vue のソース コードを学習したい他の友人に役立つことを願っています。
理解にずれがある可能性がありますので、一緒に学び、進歩するために問題を提起し、指摘することを歓迎します。
Vue イベント API
ご存知のとおり、Vue.js は 4 つのイベント API、すなわち $on](https://cn.vuejs.org/v2/api/#vm-on-event) を提供します。 -callback)、[$once, $off](https://cn.vuejs.org/v2/api/#vm-off-event-callback)、[$emit.
初期化イベント
初期化イベントは、イベントを保存するために VM 上に _events オブジェクトを作成します。 _events の内容は次のとおりです。
1 2 3 | {
eventName: [func1, func2, func3]
}
|
ログイン後にコピー
にはイベント名と対応する実行メソッドが格納されます。
1 2 3 4 5 6 7 8 9 10 11 12 13 | export function initEvents (vm: Component) {
vm._events = Object.create(null)
vm._hasHookEvent = false
const listeners = vm. $options ._parentListeners
if (listeners) {
updateComponentListeners(vm, listeners)
}
}
|
ログイン後にコピー
$on
$on メソッドは、$emit によってトリガーできる VM インスタンス上のカスタム イベントをリッスンするために使用されます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | Vue.prototype. $on = function (event: string | Array<string>, fn: Function): Component {
const vm: Component = this
if (Array.isArray(event)) {
for (let i = 0, l = event.length; i < l; i++) {
this. $on (event[i], fn)
}
} else {
(vm._events[event] || (vm._events[event] = [])).push(fn)
if (hookRE.test(event)) {
vm._hasHookEvent = true
}
}
return vm
}
|
ログイン後にコピー
$once
$once は、1 回だけトリガーできるイベントをリッスンし、トリガーされた後にイベントを自動的に削除します。
1 2 3 4 5 6 7 8 9 10 11 12 | Vue.prototype. $once = function (event: string, fn: Function): Component {
const vm: Component = this
function on () {
vm. $off (event, on)
fn.apply(vm, arguments)
}
on.fn = fn
vm. $on (event, on)
return vm
}
|
ログイン後にコピー
$off
$off は、カスタム イベントを削除するために使用されます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 | Vue.prototype. $off = function (event?: string | Array<string>, fn?: Function): Component {
const vm: Component = this
if (!arguments.length) {
vm._events = Object.create(null)
return vm
}
if (Array.isArray(event)) {
for (let i = 0, l = event.length; i < l; i++) {
this. $off (event[i], fn)
}
return vm
}
const cbs = vm._events[event]
if (!cbs) {
return vm
}
if (arguments.length === 1) {
vm._events[event] = null
return vm
}
let cb
let i = cbs.length
while (i--) {
cb = cbs[i]
if (cb === fn || cb.fn === fn) {
cbs.splice(i, 1)
break
}
}
return vm
}
|
ログイン後にコピー
$emit
$emit は、指定されたカスタム イベントをトリガーするために使用されます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | Vue.prototype. $emit = function (event: string): Component {
const vm: Component = this
if (process.env.NODE_ENV !== 'production') {
const lowerCaseEvent = event.toLowerCase()
if (lowerCaseEvent !== event && vm._events[lowerCaseEvent]) {
tip(
`Event "${lowerCaseEvent}" is emitted in component ` +
`${formatComponentName(vm)} but the handler is registered for "${event}" . ` +
`Note that HTML attributes are case -insensitive and you cannot use ` +
`v-on to listen to camelCase events when using in-DOM templates. ` +
`You should probably use "${hyphenate(event)}" instead of "${event}" .`
)
}
}
let cbs = vm._events[event]
if (cbs) {
cbs = cbs.length > 1 ? toArray(cbs) : cbs
const args = toArray(arguments, 1)
for (let i = 0, l = cbs.length; i < l; i++) {
cbs[i].apply(vm, args)
}
}
return vm
}
|
ログイン後にコピー
関連する推奨事項:
nodeイベントメカニズムの説明
PHPイベントメカニズムの実装
jqとjsでのイベントメカニズムとブロック
以上がVue.jsイベントメカニズムのソースコード分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。