root
/
vue3-core
mirror of https://github.com/vuejs/core.git
1
0
Fork 0
Code Issues Actions 4 Packages Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
packages/runtime-dom/src/apiCustomElement.ts
View File

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