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

ref #677

Author: yyx990803

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))

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)

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
         }
       }
     }