fix(compiler-core): should not generate CLASS/STYLE patch flags on components

ref #677

diff --git a/packages/compiler-core/__tests__/transforms/transformElement.spec.ts b/packages/compiler-core/__tests__/transforms/transformElement.spec.ts
index 6bdef0db0ce1e088caefc54799c4e5817c251423..a25756d6bed7c81d217e594c34d15d1f8305a150 100644 (file)
--- a/packages/compiler-core/__tests__/transforms/transformElement.spec.ts
+++ b/packages/compiler-core/__tests__/transforms/transformElement.spec.ts
@@ -739,6 +739,15 @@ describe('compiler: element transform', () => {
       expect(node.dynamicProps).toBe(`["foo", "baz"]`)
     })
 
+    // should treat `class` and `style` as PROPS
+    test('PROPS on component', () => {
+      const { node } = parseWithBind(
+        `<Foo :id="foo" :class="cls" :style="styl" />`
+      )
+      expect(node.patchFlag).toBe(genFlagText(PatchFlags.PROPS))
+      expect(node.dynamicProps).toBe(`["id", "class", "style"]`)
+    })
+
     test('FULL_PROPS (v-bind)', () => {
       const { node } = parseWithBind(`<div v-bind="foo" />`)
       expect(node.patchFlag).toBe(genFlagText(PatchFlags.FULL_PROPS))

diff --git a/packages/compiler-core/src/transforms/transformElement.ts b/packages/compiler-core/src/transforms/transformElement.ts
index 8caff936e630488b3dc014d0145a9c39f5d77c32..ccd87e803336204ab47dcfe0041befbb43f8064f 100644 (file)
--- a/packages/compiler-core/src/transforms/transformElement.ts
+++ b/packages/compiler-core/src/transforms/transformElement.ts
@@ -289,9 +289,9 @@ export function buildProps(
       }
       if (name === 'ref') {
         hasRef = true
-      } else if (name === 'class') {
+      } else if (name === 'class' && !isComponent) {
         hasClassBinding = true
-      } else if (name === 'style') {
+      } else if (name === 'style' && !isComponent) {
         hasStyleBinding = true
       } else if (name !== 'key' && !dynamicPropNames.includes(name)) {
         dynamicPropNames.push(name)

diff --git a/packages/runtime-core/src/componentRenderUtils.ts b/packages/runtime-core/src/componentRenderUtils.ts
index aec309446ec58f96d72a8676032235aff969cd25..c4b04ae7dea31f39393b9f3f09b4af94f91c5851 100644 (file)
--- a/packages/runtime-core/src/componentRenderUtils.ts
+++ b/packages/runtime-core/src/componentRenderUtils.ts
@@ -236,20 +236,12 @@ export function shouldUpdateComponent(
     if (patchFlag & PatchFlags.FULL_PROPS) {
       // presence of this flag indicates props are always non-null
       return hasPropsChanged(prevProps!, nextProps!)
-    } else {
-      if (patchFlag & PatchFlags.CLASS) {
-        return prevProps!.class !== nextProps!.class
-      }
-      if (patchFlag & PatchFlags.STYLE) {
-        return hasPropsChanged(prevProps!.style, nextProps!.style)
-      }
-      if (patchFlag & PatchFlags.PROPS) {
-        const dynamicProps = nextVNode.dynamicProps!
-        for (let i = 0; i < dynamicProps.length; i++) {
-          const key = dynamicProps[i]
-          if (nextProps![key] !== prevProps![key]) {
-            return true
-          }
+    } else if (patchFlag & PatchFlags.PROPS) {
+      const dynamicProps = nextVNode.dynamicProps!
+      for (let i = 0; i < dynamicProps.length; i++) {
+        const key = dynamicProps[i]
+        if (nextProps![key] !== prevProps![key]) {
+          return true
         }
       }
     }