fix(compiler-sfc): check binding is prop before erroring

fix #8017

packages/compiler-sfc/__tests__/compileScriptPropsDestructure.spec.ts

@@ -354,5 +354,20 @@ describe('sfc props transform', () => {
         )
       ).toThrow(`Default value of prop "foo" does not match declared type.`)
     })
+
+    // #8017
+    test('should not throw an error if the variable is not a props', () => {
+      expect(() =>
+        compile(
+          `<script setup lang='ts'>
+        import { watch } from 'vue'
+        const { userId } = defineProps({ userId: Number })
+        const { error: e, info } = useRequest();
+        watch(e, () => {});
+        watch(info, () => {});
+        </script>`
+        )
+      ).not.toThrowError()
+    })
   })
 })

packages/compiler-sfc/src/compileScriptPropsDestructure.ts

@@ -17,7 +17,7 @@ import {
   isCallOf,
   unwrapTSNode
 } from '@vue/compiler-core'
-import { hasOwn, genPropsAccessExp } from '@vue/shared'
+import { genPropsAccessExp } from '@vue/shared'
 import { PropsDestructureBindings } from './compileScript'
 
 /**
@@ -47,6 +47,15 @@ export function transformDestructuredProps(
     propsLocalToPublicMap[local] = key
   }
 
+  function pushScope() {
+    scopeStack.push((currentScope = Object.create(currentScope)))
+  }
+
+  function popScope() {
+    scopeStack.pop()
+    currentScope = scopeStack[scopeStack.length - 1] || null
+  }
+
   function registerLocalBinding(id: Identifier) {
     excludedIds.add(id)
     if (currentScope) {
@@ -108,16 +117,7 @@ export function transformDestructuredProps(
     }
   }
 
-  function rewriteId(
-    scope: Scope,
-    id: Identifier,
-    parent: Node,
-    parentStack: Node[]
-  ): boolean {
-    if (hasOwn(scope, id.name)) {
-      const binding = scope[id.name]
-
-      if (binding) {
+  function rewriteId(id: Identifier, parent: Node, parentStack: Node[]) {
     if (
       (parent.type === 'AssignmentExpression' && id === parent.left) ||
       parent.type === 'UpdateExpression'
@@ -147,15 +147,11 @@ export function transformDestructuredProps(
       )
     }
   }
-      return true
-    }
-    return false
-  }
 
   function checkUsage(node: Node, method: string, alias = method) {
     if (isCallOf(node, alias)) {
       const arg = unwrapTSNode(node.arguments[0])
-      if (arg.type === 'Identifier') {
+      if (arg.type === 'Identifier' && currentScope[arg.name]) {
         error(
           `"${arg.name}" is a destructured prop and should not be passed directly to ${method}(). ` +
             `Pass a getter () => ${arg.name} instead.`,
@@ -187,7 +183,7 @@ export function transformDestructuredProps(
 
       // function scopes
       if (isFunctionType(node)) {
-        scopeStack.push((currentScope = {}))
+        pushScope()
         walkFunctionParams(node, registerLocalBinding)
         if (node.body.type === 'BlockStatement') {
           walkScope(node.body)
@@ -197,7 +193,7 @@ export function transformDestructuredProps(
 
       // catch param
       if (node.type === 'CatchClause') {
-        scopeStack.push((currentScope = {}))
+        pushScope()
         if (node.param && node.param.type === 'Identifier') {
           registerLocalBinding(node.param)
         }
@@ -207,7 +203,7 @@ export function transformDestructuredProps(
 
       // non-function block scopes
       if (node.type === 'BlockStatement' && !isFunctionType(parent!)) {
-        scopeStack.push((currentScope = {}))
+        pushScope()
         walkScope(node)
         return
       }
@@ -217,12 +213,8 @@ export function transformDestructuredProps(
           isReferencedIdentifier(node, parent!, parentStack) &&
           !excludedIds.has(node)
         ) {
-          // walk up the scope chain to check if id should be appended .value
-          let i = scopeStack.length
-          while (i--) {
-            if (rewriteId(scopeStack[i], node, parent!, parentStack)) {
-              return
-            }
+          if (currentScope[node.name]) {
+            rewriteId(node, parent!, parentStack)
           }
         }
       }
@@ -233,8 +225,7 @@ export function transformDestructuredProps(
         (node.type === 'BlockStatement' && !isFunctionType(parent!)) ||
         isFunctionType(node)
       ) {
-        scopeStack.pop()
-        currentScope = scopeStack[scopeStack.length - 1] || null
+        popScope()
       }
     }
   })