perf(custom-element): cancel `MutationObserver` listener when disconnected (#8666)

This commit is contained in:
丶远方 2023-07-12 11:13:20 +08:00 committed by GitHub
parent 70c3ac746d
commit 24d98f0327
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 9 additions and 3 deletions

View File

@ -178,7 +178,7 @@ export class VueElement extends BaseClass {
private _resolved = false
private _numberProps: Record<string, true> | null = null
private _styles?: HTMLStyleElement[]
private _ob?: MutationObserver | null = null
constructor(
private _def: InnerComponentDef,
private _props: Record<string, any> = {},
@ -215,6 +215,10 @@ export class VueElement extends BaseClass {
disconnectedCallback() {
this._connected = false
if (this._ob) {
this._ob.disconnect()
this._ob = null
}
nextTick(() => {
if (!this._connected) {
render(null, this.shadowRoot!)
@ -235,11 +239,13 @@ export class VueElement extends BaseClass {
}
// watch future attr changes
new MutationObserver(mutations => {
this._ob = new MutationObserver(mutations => {
for (const m of mutations) {
this._setAttr(m.attributeName!)
}
}).observe(this, { attributes: true })
})
this._ob.observe(this, { attributes: true })
const resolve = (def: InnerComponentDef, isAsync = false) => {
const { props, styles } = def