From: 白雾三语 <32354856+baiwusanyu-c@users.noreply.github.com>
Date: Wed, 13 Dec 2023 07:01:07 +0000 (+0800)
Subject: feat(compiler-vapor): functional custom directive support updated hooks (#58)
X-Git-Tag: v3.6.0-alpha.1~16^2~709
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=5e681b594577054944a0bf8fc464bf50bf8478e6;p=thirdparty%2Fvuejs%2Fcore.git

feat(compiler-vapor): functional custom directive support updated hooks (#58)

Co-authored-by: 三咲智子 Kevin Deng <sxzz@sxzz.moe>
---

diff --git a/packages/runtime-vapor/src/directive.ts b/packages/runtime-vapor/src/directive.ts
index f255153fdc..3906eb7234 100644
--- a/packages/runtime-vapor/src/directive.ts
+++ b/packages/runtime-vapor/src/directive.ts
@@ -76,9 +76,9 @@ export function withDirectives<T extends Node>(
     let [dir, source, arg, modifiers] = directive
     if (!dir) continue
     if (isFunction(dir)) {
-      // TODO function directive
       dir = {
-        created: dir,
+        mounted: dir,
+        updated: dir,
       } satisfies ObjectDirective
     }
 
diff --git a/playground/src/directive.vue b/playground/src/directive.vue
index 1b92026060..81d4a3e532 100644
--- a/playground/src/directive.vue
+++ b/playground/src/directive.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { ObjectDirective } from '@vue/vapor'
+import { ObjectDirective, FunctionDirective, ref } from '@vue/vapor'
 
-const text = 'created (overwrite by v-text), '
+const text = ref('created (overwrite by v-text), ')
 const vDirective: ObjectDirective<HTMLDivElement, undefined> = {
   created(node) {
     if (!node.parentElement) {
@@ -18,8 +18,19 @@ const vDirective: ObjectDirective<HTMLDivElement, undefined> = {
     if (node.parentElement) node.textContent += 'mounted, '
   }
 }
+const vDirectiveSimple: FunctionDirective<HTMLDivElement> = (node, binding) => {
+  console.log(node, binding)
+}
+const handleClick = () => {
+  text.value = 'change'
+}
 </script>
 
 <template>
-  <div v-directive:foo.bar="text" v-text="text" />
+  <div
+    v-directive:foo.bar="text"
+    v-text="text"
+    v-directive-simple="text"
+    @click="handleClick"
+  />
 </template>