I. Reactive Basic API: ref /reactive (underlying framework + usage) 1. Laying the groundwork for core principles Vue 3’s reactive system is based on ES6 Proxy (which replaces Vue 2’s Object.defineProperty), and its core is to “intercept data read/modification operations, trigger dependency collection and view updates”: This is why ref it’s necessary .value—essentially, it proxies .value the properties of the wrapper … Read more
Vue DevTools is a browser extension tool specifically developed for Vue.js, used for debugging and optimizing Vue applications. The following is an installation and usage guide: 1. Install Vue DevTools 1. Browser support Chrome (Recommended): Install via the Chrome Web Store. Firefox : Install via the Firefox Add-ons Marketplace. Edge : Compatible with Chrome, the Chrome version can … Read more
Webpack 5 is a modern front-end build tool used to bundle resources such as JavaScript, CSS, and images. It improves development efficiency and performance by handling dependencies in a modular fashion. Although Webpack has lost some of its former glory, many projects built with Webpack still require maintenance, making it still worthwhile for front-end developers to … Read more
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