diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue
index 5e4ce20..66ad152 100644
--- a/src/components/HelloWorld.vue
+++ b/src/components/HelloWorld.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="hello" data-spma="aa">
-    <span>show spm:{{spmText}}</span>
+  <div ref="wrapperRef" class="hello" data-spma="aa">
+    <span>show spm:{{ spmText }}</span>
     <div data-spmb="bb">
       <button data-spmc="cc">Click it</button>
     </div>
@@ -10,16 +10,10 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { useSpm } from "./hooks/useSpm";
 // TODO 利用事件代理实现一个简单的收集spm信息的方法，注意不是针对每一个按钮进行函数绑定。场景：考虑一下如果一个页面中有很多按钮，需要如何处理
-export default {
-  name: 'HelloWorld',
-  data: ()=>{
-    return {
-      spmText: 'xx.xx.xx'
-    }
-  }
-}
+const { spmText, wrapperRef } = useSpm();
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
diff --git a/src/components/hooks/useSpm.js b/src/components/hooks/useSpm.js
new file mode 100644
index 0000000..a93806d
--- /dev/null
+++ b/src/components/hooks/useSpm.js
@@ -0,0 +1,46 @@
+import { ref, onMounted, onBeforeUnmount } from "vue";
+export function useSpm() {
+  const spmText = ref("xx.xx.xx");
+  const wrapperRef = ref();
+
+  onMounted(() => {
+    wrapperRef.value.addEventListener("click", handleSpmClick);
+  });
+
+  onBeforeUnmount(() => {
+    wrapperRef.value.removeEventListener("click", handleSpmClick);
+  });
+
+  function handleSpmClick(e) {
+    const target = e.target;
+    spmText.value = getSpmText(target);
+  }
+
+  function getSpmText(dom) {
+    const result = [];
+    traverseDom(dom);
+    return result.reverse().join(".");
+
+    function traverseDom(dom) {
+      if (dom.tagName.toLowerCase() === "body") {
+        return;
+      }
+
+      if (dom.dataset) {
+        const spmKey = Object.keys(dom.dataset).find((key) =>
+          /^spm.*/.test(key)
+        );
+        if (spmKey) {
+          result.push(dom.dataset[spmKey]);
+        }
+      }
+
+      traverseDom(dom.parentNode);
+    }
+  }
+
+  return {
+    spmText,
+    wrapperRef
+  }
+}