perf: only patch string style when value has changed (#1310)

fix #1309

diff --git a/packages/runtime-dom/__tests__/patchStyle.spec.ts b/packages/runtime-dom/__tests__/patchStyle.spec.ts
index c488e51ecab2221fec92c609b9c6f2886f652eb2..8b701da5781c4ce14ff7325e1483d075dfa07ea3 100644 (file)
--- a/packages/runtime-dom/__tests__/patchStyle.spec.ts
+++ b/packages/runtime-dom/__tests__/patchStyle.spec.ts
@@ -7,6 +7,22 @@ describe(`runtime-dom: style patching`, () => {
     expect(el.style.cssText.replace(/\s/g, '')).toBe('color:red;')
   })
 
+  // #1309
+  it('should not patch same string style', () => {
+    const el = document.createElement('div')
+    const fn = jest.fn()
+    const value = (el.style.cssText = 'color:red;')
+    Object.defineProperty(el.style, 'cssText', {
+      get(): any {
+        return value
+      },
+      set: fn
+    })
+    patchProp(el, 'style', value, value)
+    expect(el.style.cssText.replace(/\s/g, '')).toBe('color:red;')
+    expect(fn).not.toBeCalled()
+  })
+
   it('plain object', () => {
     const el = document.createElement('div')
     patchProp(el, 'style', {}, { color: 'red' })

diff --git a/packages/runtime-dom/src/modules/style.ts b/packages/runtime-dom/src/modules/style.ts
index 67c5593fe5e5f43c18c4e4aa61a0a644a31f4b99..e67e8000e3677ed93a4ea7815955bf0cc17f4af7 100644 (file)
--- a/packages/runtime-dom/src/modules/style.ts
+++ b/packages/runtime-dom/src/modules/style.ts
@@ -8,7 +8,9 @@ export function patchStyle(el: Element, prev: Style, next: Style) {
   if (!next) {
     el.removeAttribute('style')
   } else if (isString(next)) {
-    style.cssText = next
+    if (prev !== next) {
+      style.cssText = next
+    }
   } else {
     for (const key in next) {
       setStyle(style, key, next[key] as string)