feat: require vue: prefix for lifecycle hooks

align with vue core 3.2.25+

Author: yyx990803

Diff for: README.md

@@ -116,13 +116,13 @@ createApp({
 
 ### Lifecycle Events
 
-You can listen to the `mounted` and `unmounted` lifecycle events for each element:
+You can listen to the special `vue:mounted` and `vue:unmounted` lifecycle events for each element:
 
 ```html
 <div
   v-if="show"
-  @mounted="console.log('mounted on: ', $el)"
-  @unmounted="console.log('unmounted: ', $el)"
+  @vue:mounted="console.log('mounted on: ', $el)"
+  @vue:unmounted="console.log('unmounted: ', $el)"
 ></div>
 ```
 

Diff for: src/directives/on.ts

@@ -42,10 +42,16 @@ export const on: Directive = ({ el, get, exp, arg, modifiers }) => {
     : get(`($event => { ${exp} })`)
 
   // special lifecycle events
-  if (arg === 'mounted') {
+  if (import.meta.env.DEV && (arg === 'mounted' || arg === 'unmounted')) {
+    console.error(
+      `mounted and unmounted hooks now need to be prefixed with vue: ` +
+        `- use @vue:${arg}="handler" instead.`
+    )
+  }
+  if (arg === 'vue:mounted') {
     nextTick(handler)
     return
-  } else if (arg === 'unmounted') {
+  } else if (arg === 'vue:unmounted') {
     return () => handler()
   }