I know the hardcoded scripts and style codes can be stored in static resource and vf components and can be used in vf page. But what can be the exact difference between these two since both are doing the same functionality
Thanks in advance !!!
The components have attributes and their own controllers, meaning that they can be very dynamic and have their own logic depending on the page they're referenced from. The static resources are mainly used to store scripts, styles and images as well as other "static" resources as you mentioned.
Components Similar to the way you can encapsulate a piece of code in a method and then reuse that method several times in a program, you can encapsulate a common design pattern in a custom component and then reuse that component several times in one or more Visualforce pages.
For example, suppose you want to create a Photo Album using Visualforce pages. Each photo in the album has its own border color, and a text caption that displays beneath it. Rather than repeating the Visualforce markup required for displaying every photo in the album, you can define a custom component named singlePhoto that has attributes for image, border color, and caption, and then uses those attributes to display the image on the page. Once defined, every Visualforce page in your organization can leverage the singlePhoto custom component in the same way as a page can leverage standard components such as or . more information can be found here.