A closure is a combination of a function bundled together with references to its lexical environment, allowing the function to access variables from that environment even after the function has finished executing. A closure allows a function to "remember" and access the variables in its lexical scope even when the function is called outside that scope.
For example in the PlanetPage.vue
, there is a function called fetchData that is defined in the lexical scope of the script setup block. It captures the url
parameter from its outer scope, after the fetchData is defined and called, it can still access the url
parameter and any other variables from the lexical scope of the script setup block, that is a closure.
2. Which are the potential side-effects in any function? Could you point out any of these cases in your code? Are they expected? Can they be avoided?
Any function that calls any external asynchronous service, like a simple fetch
or console.log
, those are potential side-effects
In the fetchData
function:
planets.value = data.results
nextLink.value = data.next
previousLink.value = data.previous
Are side-effects because it modifies the external state by updating the value of:
const planets = ref<PlanetItem[]>([])
const nextLink = ref<string | null>(null)
const previousLink = ref<string | null>(null)
Yes, these sife-effects are expected because of the architecture of the framework. This is a common side effect when dealing with uni-directional data flow frameworks like Vue.js, React.js.
Network requests are already controlled by making use of async/await statements. Network requests are unavoidable, it's good practice to minimize and control them. For complex state management, make use of tools like Vuex (for Vue.js) that provide patterns to manage state changes more predictably.
This template should help get you started developing with Vue 3 in Vite.
VSCode + Volar (and disable Vetur) + TypeScript Vue Plugin (Volar).
TypeScript cannot handle type information for .vue
imports by default, so we replace the tsc
CLI with vue-tsc
for type checking. In editors, we need TypeScript Vue Plugin (Volar) to make the TypeScript language service aware of .vue
types.
If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a Take Over Mode that is more performant. You can enable it by the following steps:
- Disable the built-in TypeScript Extension
- Run
Extensions: Show Built-in Extensions
from VSCode's command palette - Find
TypeScript and JavaScript Language Features
, right click and selectDisable (Workspace)
- Run
- Reload the VSCode window by running
Developer: Reload Window
from the command palette.
See Vite Configuration Reference.
npm install
npm run dev
npm run build
Lint with ESLint
npm run lint