enhance the warning when use undeclared variable in template

packages/runtime-core/src/componentPublicInstance.ts

@@ -526,6 +526,11 @@ export const PublicInstanceProxyHandlers: ProxyHandler<any> = {
             `but is not defined on instance.`,
         )
       }
+    } else if (__DEV__ && !__TEST__ && !isReservedPrefix(key[0])) {
+      warn(
+        `Property ${JSON.stringify(key)} was accessed during render ` +
+          `but is not defined on instance.`,
+      )
     }
   },
 

packages/vue/__tests__/index.spec.ts

@@ -311,4 +311,27 @@ describe('compiler + runtime integration', () => {
     app.mount(root)
     expect(root.innerHTML).toBe('<div>60000000100000111</div>')
   })
+
+  test('Warning when use undeclared variable in template', () => {
+    const app = createApp({
+      template: `
+        <div @click="handler">handler</div>
+        <div>dddd{{dddd}}</div>
+        <div>no warn: {{message}}</div>
+      `,
+      setup() {
+        return {
+          message: 'hello',
+        }
+      },
+    })
+    const root = document.createElement('div')
+    app.mount(root)
+    expect(
+      `[Vue warn]: Property "handler" was accessed during render but is not defined on instance.`,
+    ).toHaveBeenWarned()
+    expect(
+      `[Vue warn]: Property "dddd" was accessed during render but is not defined on instance.`,
+    ).toHaveBeenWarned()
+  })
 })