11 2024 档案
摘要:In this lesson, we will be learning how to mock REST API calls. Mocking is a technique used in software testing to simulate the behavior of objects or
阅读全文
摘要:Snapshots In this lesson, we will learn about a testing technique called Snapshot testing. Snapshot testing allows you to take a “snapshot” of the exp
阅读全文
摘要:Building our component To focus on testing, I’ve already built our component. You can copy the code for the component below or from the GitHub reposit
阅读全文
摘要:Vue’s component architecture enables us to build our user interface into components that beautifully organize our business logic and presentation laye
阅读全文
摘要:When we code up Vue apps we use API calls a lot to load in back-end data. When we are waiting for this API data to load, it’s a good user interface pr
阅读全文
摘要:📄 /composables/use-promise.js import { ref } from "@vue/composition-api"; export default function usePromise(fn) { // fn is the actual API call const
阅读全文
摘要:== 从上到下按照规则比较,直到能够得到确切结果为止:1. 两端存在 NaN,返回 false2. undefined 和 null 只有与自身比较,或者互相比较时,才会返回 true,和其他原始类型比较返回 false3. 两端类型相同,比较值4. 两端都是原始类型,转换成数字重新比较 5. 一端
阅读全文
摘要:Table of content Use key Feeze object Use composition function (Vue2) Use computed lazy v-model v-model 保持对象引用稳定 Use v-show instead of v-if defer keep
阅读全文
摘要:Watch Let’s look at another simple example using our composition API. Here’s some code that has a simple search input box, uses the search text to cal
阅读全文
摘要:In Vue 3’s Composition API we can create callback hooks inside setup() by adding on to the LifeCycle method name: import { onBeforeMount, onMounted, o
阅读全文
摘要:U+200B: Zero-width space Used for soft line breaks in long words. U+FEFF: Zero-width non-breaking space Prevents line breaks at specific positions. U+
阅读全文
摘要:Let's say on the page we have some heavy component need to be render when page load. <template> <div class="container"> <div v-for="n in 100"> <heavy-
阅读全文
摘要:If we have multi composition functions: <template> ... </template> <script> import useEventSpace from "@/use/event-space"; import useMapping from "@/u
阅读全文
摘要:import {reactive, computed} from "vue" export default { setup() { const event = reactive({ capacity: 4, attending: ["Tim", "Bob"], spacesLeft: compute
阅读全文
摘要:Define a component with props and defualt props value <script setup lang="ts"> import { ref, onMounted } from 'vue' import fetchCount from '../service
阅读全文
摘要:<template> <router-link class="event-link" :to="{ name: 'EventDetails', params: { id: event.id } }" > <div class="event-card"> <span>@{{ event.time }}
阅读全文
摘要:Virtual DOM Advantage: One of the advantages of the virtual DOM is cross-platform rendering abstraction. The virtual DOM can connect to different host
阅读全文
摘要:When you run node.js you can run node --expose-gc index.js Which will allow you manully cleanup gc: global.gc() Map For map, it is easy to cost memory
阅读全文
摘要:/* initial: default value of the css property, you don't need to remember what's the default value of each css property, just use initial should do th
阅读全文
摘要:For example you have nested for loop, and from inner most for loop you want to break not just inner loop but also outmost for loop how to do that? We
阅读全文
摘要:Notice how when we are on Google and search for Vue Mastery, when we scroll down and click on the next button, we show up at the top of the second pag
阅读全文
摘要:Lazy Loading Routes When building apps that contain large amounts of JavaScript, the initial page load (where that JavaScript is downloaded) might sta
阅读全文
摘要:There are several ways to solve this problem, but as always I want to show you the simplest, cleanest solution. We have three steps with my solution:
阅读全文
摘要:There are three different kinds of errors we need to catch in our application, and we will have different results for each of them. When a user tries
阅读全文
摘要:Navigation is triggered using Vue Router when a <router-link> is clicked, but also can be triggered programmatically from inside our code. In this les
阅读全文
摘要:Often when building web applications we need to be able to perform multiple actions (View, Edit, Register) for a single resource (Event). Each URL pro
阅读全文
摘要:As our application evolves, we may need to change the URL paths of where our pages initially found. There are two convenience methods for this: ⚠️ Pro
阅读全文
摘要:/** * Utility for extracting the parameters from a function overload (for typed emits) * https://github.com/microsoft/TypeScript/issues/32164#issuecom
阅读全文
摘要:We have a module: const key = Symbol('key') export class A { [key] = 1 value () { console.log(this[key]) } } It seems that keyis not expose to outside
阅读全文
摘要:function main() { const datas = new Array(10000).fill(null).map((_, i) => i) function taskHanlder(_, i) { console.log(i) } performChunkNode(datas, tas
阅读全文
摘要:Problem: How do we read query parameters off the URL? For example, often when we write pagination, we might have a URL that looks like this: http://ex
阅读全文
摘要:When attempting to load the same module twice in JavaScript you'll hit a cache and code won't re-run. In scenarios where you actually do want to have
阅读全文
摘要:During the past, this was a working solution function isArray(obj) { return Object.prototype.toString.call(obj) '[object Array]' } But now it doesn't
阅读全文
摘要:Need to follow some rules: Each folder should has a page.js configuration to save the meta data. // page.js export default { title: "About", menuOrder
阅读全文
摘要:https://developer.mozilla.org/en-US/docs/Web/API/Houdini_APIs <!doctype html> <html lang="en"> <head> <meta charset="utf-8"/> <title>Houdini</title> <
阅读全文
摘要:What's the output of following code: let a = 1; const b = a + ++a * a++; In Javascript, the code always run from lef to right. Both ++aand a++ are exp
阅读全文
摘要:Why? Mainly due to undefinedis not a keyword, therefore you are able to create a variable called undefinedand assign it any value let undefined = 10 A
阅读全文
摘要:Bun 课堂笔记 对比 Node.js Bun 语言 C++ Zig JS 引擎 V8 JSCore Zig:https://ziglang.org/ 关于 V8 和 JSCore 各自有不同的架构和优化策略: JSC 优先考虑的是更快的启动时间和更少的内存占用,执行时间会稍微久一下 V8 优先考虑
阅读全文
摘要:It is not good to import axios from each Components or different services, because it will create a new instance of axios everytime. import axios from
阅读全文
摘要:Main difference is that in keyword will check on object prototype chain as well but hasOwnProperty won't check agaist prototype chain const obj = {} '
阅读全文
摘要:Let's see the following code function copyText(text) { if (navigator.clipboard) { navigator.clipboard.writeText(text); } else { const input = document
阅读全文
摘要:Sometime when doing thing is harder in template syntax, you can switch to using render function intead. For example, we have s Stackcomponent, it dyna
阅读全文
摘要:const BookingSchema = z.object({ roomType: z.string(), dueDate: z .string({ message: "invalid due date", }) .date('date format is wrong'), numberOfGue
阅读全文
摘要:For component level authority controls, we need to find a common partten so that we can extract a common component to handle the permission control in
阅读全文
摘要:export enum EffectFlags { /** * ReactiveEffect only */ ACTIVE = 1 << 0, RUNNING = 1 << 1, TRACKING = 1 << 2, NOTIFIED = 1 << 3, DIRTY = 1 << 4, ALLOW_
阅读全文
摘要:When users try to visit our application, example.comfor the first time, DNS need to parsing and find out application IP address. After first time visi
阅读全文
摘要:The Reflect namespace object contains static methods for invoking interceptable JavaScript object internal methods. The methods are the same as those
阅读全文
摘要:const [a, b] = { a: 3, b: 4, }; console.log(a, b); // TypeError: {(intermediate value)(intermediate value)} is not iterable How to make it work withou
阅读全文
摘要:In case running into peer deps issue, one thing we can do (maybe unsafe) is using --legacy-peer-deps We can use this in case, some framework publish a
阅读全文
摘要:Example code: function createIncrease() { const doms = new Array(100000).fill(0).map((_, i) => { const dom = document.createElement('div'); dom.innerH
阅读全文
摘要:Example Code: <body> <div> <button class="btn" onclick="createInput(false)"> Button1</button> <button class="btn" onclick="createInput(true)">Button2<
阅读全文
摘要:Example code: <template> <button @click="handleClick">Hello, Vue-CLI</button> </template> <script> export default { methods: { handleClick() { const a
阅读全文