I. Creating a Project II. File-based routing mechanism III. Dynamic Routing Parameters Note: When matching URLs, static routes have higher priority than dynamic routes. 1. Basic usage http://localhost:3000/about/1http://localhost:3000/about/1 import {useRouter} from ‘next/router’ // Import the hook function export default function AboutProjectPage() { const router = useRouter() // Use the hook function return ( <> <div> … Read more
To Blob add a filename to an object, you can do so by Blob casting the object to File an object. File Objects inherit from Blob objects and provide additional properties, including name the `name` property, which allows you to set a name for the file. This method works in most modern browsers, but note that Internet Explorer does not support File … Read more
Introduction to closures In JavaScript, redeclaring the same variable can lead to variable conflicts. In such cases, closures can be used to create independent execution environments. In JavaScript, a closure refers to a closed execution environment. It means a function can remember and access the scope in which it was created, … Read more
Debouncing Within a given time period, events are frequently triggered, but only the last one is executed. This is achieved using a timer at the underlying level. Use the _.debounce() function grammar: _.debounce(fun, time) Core idea: Implement using the delay function (setTimeout). let time function mouseMove() { if(time) { clearTimeout(time) } time = setTimeout(function(){ n+=1 … Read more
During Vue 3 composable API development, the following TypeScript errors are frequently encountered: The `emit(‘orderSubmit’)` function should have two arguments, but it only returns one. This error typically occurs when using <script setup> syntactic sugar, especially when defineEmits defining and invoking custom events. Typical error scenarios II. In-depth analysis of the root causes of the problem 2.1 Analysis of … Read more
Introduction CSS (Cascading Style Sheets) is an essential tool in web design for controlling the style of web page elements. Among its components, float properties play a crucial role in layout design. This article will provide a detailed analysis of CSS float properties, including their principles, application scenarios, considerations, and how to implement floating layouts. I. Introduction to the … Read more
Detailed Explanation of ref and reactive in Vue 3 Differences and use cases of ref and reactive in Vue 3 ref ` reactive` and ` reactive reactive` are two core reactive functions in Vue 3’s Composite API, and they have different use cases. Core differences characteristic ref reactive Data types Any type (primitive types, objects, arrays) Object types … Read more
Virtual DOM working principle and performance optimization I. Introducing the Concept The Virtual DOM is a lightweight, in-memory abstraction of the DOM tree maintained by React . Essentially, it’s a JavaScript object simulation of the real DOM, containing core information such as the DOM’s structure, attributes, and content. It acts as an “in-memory DOM proxy,” allowing React … Read more
I. Core Positioning: The “Golden Initialization Time” in the Component Lifecycle created The hook is invoked synchronously after a Vue component instance has been fully created. You can think of it as the crucial moment when the component’s “body” has been constructed but not yet “mounted” to the DOM . created It occurs after reactive data initialization and before the … Read more