随笔分类 - Vue
摘要：Mutating State Here’s where Pinia gets a bit… controversial. Pinia allows us to mutate state in a variety of ways, letting us decide where and when we
阅读全文
摘要：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
阅读全文
摘要：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
阅读全文
摘要：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
阅读全文
摘要：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
阅读全文
