fix(compiler-core): Fix the 'constType' error when using 'v-bind' to bind array variables to 'style', resulting in runtime errors(fix #5106)

packages/compiler-core/__tests__/transforms/vBind.spec.ts

@@ -14,7 +14,8 @@ import { transformElement } from '../../src/transforms/transformElement'
 import {
   CAMELIZE,
   helperNameMap,
-  NORMALIZE_PROPS
+  NORMALIZE_PROPS,
+  NORMALIZE_STYLE
 } from '../../src/runtimeHelpers'
 import { transformExpression } from '../../src/transforms/transformExpression'
 
@@ -310,4 +311,26 @@ describe('compiler: transform v-bind', () => {
       }
     })
   })
+  test('Bind array constant to style', () => {
+    const node = parseWithVBind(`<div v-bind:style="[color:red]"/>`)
+    const props = (node.codegenNode as VNodeCall).props as ObjectExpression
+    expect(props.properties[0]).toMatchObject({
+      key: {
+        type:4,
+        content: `style`,
+        isStatic: true,
+        constType:3
+      },
+      value: {
+        type:14,
+        callee:NORMALIZE_STYLE,
+        arguments:[
+          {type : 4,
+          content : "[color:red]",
+          isStatic : false,
+          constType : 0,}
+        ]
+      }
+    })
+  })
 })

packages/compiler-core/src/transforms/transformExpression.ts

@@ -60,11 +60,15 @@ export const transformExpression: NodeTransform = (node, context) => {
           exp.type === NodeTypes.SIMPLE_EXPRESSION &&
           !(dir.name === 'on' && arg)
         ) {
+          const isBindStyle = dir.name === 'bind' && arg && (arg as SimpleExpressionNode).content && (arg as SimpleExpressionNode).content === 'style'
           dir.exp = processExpression(
             exp,
             context,
             // slot args must be processed as function params
-            dir.name === 'slot'
+            dir.name === 'slot',
+            false,
+            Object.create(context.identifiers),
+            (isBindStyle ? true : false)
           )
         }
         if (arg && arg.type === NodeTypes.SIMPLE_EXPRESSION && !arg.isStatic) {
@@ -94,7 +98,8 @@ export function processExpression(
   asParams = false,
   // v-on handler values may contain multiple statements
   asRawStatements = false,
-  localVars: Record<string, number> = Object.create(context.identifiers)
+  localVars: Record<string, number> = Object.create(context.identifiers),
+  isBindStyle:boolean | undefined = false,
 ): ExpressionNode {
   if (__BROWSER__) {
     if (__DEV__) {
@@ -208,7 +213,9 @@ export function processExpression(
   // fast path if expression is a simple identifier.
   const rawExp = node.content
   // bail constant on parens (function invocation) and dot (member access)
-  const bailConstant = rawExp.indexOf(`(`) > -1 || rawExp.indexOf('.') > 0
+  // fix: #5106
+  const rawExpTrim = node.content.trim();
+  const bailConstant = rawExp.indexOf(`(`) > -1 || rawExp.indexOf('.') > 0 || (rawExpTrim[0] === '[' && rawExpTrim[rawExpTrim.length - 1] === ']' && isBindStyle)
 
   if (isSimpleIdentifier(rawExp)) {
     const isScopeVarReference = context.identifiers[rawExp]