first commit

README.md

@@ -0,0 +1,84 @@
+
+
+## 问 & 答 
+
+问： 为什么vue项目要抛弃SFC写法而尝试jsx/tsx方式来编码？
+答：https://juejin.cn/post/6911175470255964174
+
+
+问：不会 vue3 jsx 语法，怎么办？
+答：https://juejin.cn/post/7141674726434439176
+
+
+问：vue3 jsx defineComponent 语法，实际项目中 setup 代码太长，怎么办？
+答：使用组合式函数 (Composables) - 最推荐
+
+案例：
+
+```jsx
+// composables/useUserData.js
+import { ref, onMounted } from 'vue'
+import api from '@/api'
+
+export function useUserData(userId) {
+  const user = ref(null)
+  const loading = ref(false)
+  const error = ref(null)
+
+  const fetchUser = async () => {
+    loading.value = true
+    try {
+      user.value = await api.getUser(userId)
+    } catch (err) {
+      error.value = err.message
+    } finally {
+      loading.value = false
+    }
+  }
+
+  onMounted(fetchUser)
+
+  return {
+    user,
+    loading,
+    error,
+    refetch: fetchUser
+  }
+}
+```
+
+主组件：
+
+```jsx
+// UserProfile.jsx
+import { defineComponent } from 'vue'
+import { useUserData } from '@/composables/useUserData'
+
+export default defineComponent({
+  name: 'UserProfile',
+  
+  props: {
+    userId: {
+      type: String,
+      required: true
+    }
+  },
+  
+  setup(props) {
+    const { user, loading, error, refetch } = useUserData(props.userId)
+    
+    return () => (
+      <div>
+        {loading.value && <div>Loading...</div>}
+        {error.value && <div>Error: {error.value}</div>}
+        {user.value && (
+          <div>
+            <h2>{user.value.name}</h2>
+            <p>{user.value.email}</p>
+          </div>
+        )}
+      </div>
+    )
+  }
+})
+```