84 lines
1.6 KiB
Markdown
84 lines
1.6 KiB
Markdown
|
||
|
||
## 问 & 答
|
||
|
||
问： 为什么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>
|
||
)
|
||
}
|
||
})
|
||
``` |