InfiniteXyy / list-of-fallacies

[WIP] A collection of fallacies and it's examples

Home Page:https://fallacy.xyynext.xyz/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

List of Fallacy

This web page was built for nothing, just for learning nuxt 3 and Vue 3.

Features I used

Auto import

The Directory-based auto-imports is just magic. The nuxt backend server will automatically detect the useXXX hooks defined in composables, and all Vue SFCs in components will be exported with directory prefix, it is so smart, saved a lot of boilerplate code, and can make the project more well structured!

V-Slot

I use it as a replacement of renderFunctions in React, but the v-slot in Vue seems to be more powerful and simple.

With v-slot, I don't have to think about the performance issue, (in React, the render function in props may cause the children components render more times than expected)

And also, v-slot has all the features render function has. eg. parameters with v-slot="params"

Fallthrough Attrs

This is especially useful when you want to use tailwindcss/windicss in your project.

In React world, I have to merge the outer className and inner className, for example className={classNames(props.className, xxx)}, but in Vue, everything will just work as I expected. Although sometimes it may be hard to debug.

Build-in Transition

All the build-in components in Vue are so useful and reliable, I think I don't need to install any other third party library to write a personal project with Vue + Tailwind.

Components that won't render hundreds of times

Since the setup function only renders once, I can define anything in the setup function without worrying about the performance.

functions are just functions, you don't have to wrap it in useMemo or useCallback

Instance that only need to be created once, can also be put in the setup function. In React, you have to write const [instance] = useState(() => {...}) or with useRef

Things in my opinion can improve

Better TypeScript support

I admit that typescript in Vue world is already pretty good, but I still have some problems with it.

  • The ts intellisense is not working well when I have not saved the file.
  • v-slot has a lack of type checking (maybe I am using it in the wrong way).

Sometimes too magic?

Vue provides so many ways for a developer to write the cleanest code, compared to React16.8+. In React, everything is based on useState useRef useMemo + pureFunction.

For beginners, I think simpler is better, I wish there would be a doc Vue: the core part, (maybe it already existed).

Dev

# yarn
yarn install
yarn dev

About

[WIP] A collection of fallacies and it's examples

https://fallacy.xyynext.xyz/


Languages

Language:Vue 74.7%Language:TypeScript 18.6%Language:JavaScript 6.2%Language:CSS 0.5%