Fish's Blog

今天遇到一个需求，设计需要我无论什么情况都要保持图片比例不变，于是顺手写了个这个组件，组件基于vue3+ts，其实核心代码就是那几句css<template> <div style="position: relative" :style="ratioStr"> <div style="posit

- 阅读全文 -

背景在vue的开发过程中，我们通常会使用到ref，但在我们需要对一个频繁的赋值操作做防抖操作时，我们通常只能通过编写一个独立的防抖函数来实现，这样相对会多一些步骤（麻烦一些）。例如我们给一个即时搜索框的input实现防抖输入（即在输入文本n秒之后才触发搜索，避免频繁请求后端接口浪费资源）时，我们不仅不能使用v-model，而且还要定义一个input事件和防抖函数，非常之繁琐。此时，我有一个简洁的方

- 阅读全文 -

Vue和React的区别主要体现在模板渲染方式、运行过程、框架本质、数据流和监听数据变化的实现原理上。模板渲染方式：Vue和React的模板渲染方式在表层和深层上有所不同。在表层上，Vue通过一种拓展的HTML语法进行模板渲染，而React则是通过JSX来渲染模板。在深层上，Vue和React都使用原生JS实现模板中的常见语法，比如插值、条件、循环等，但Vue的模板语法是可改变的，而React的模

- 阅读全文 -

核心要义什么是响应式？无论是Vue2还是Vue3，都是将响应式数据的取值和赋值变为函数，然后调用这个响应式数据的时候触发对应的getter和setter方法来触发更新。性能在ES6之前，Vue2为了实现响应式只有Object.defineProperty这个方法，而到了ES6之后，就可以使用Proxy代替。众所周知，在Vue2的组件模板中，有一个data方法，我们通常会在这个方法中返回我们在这个组

- 阅读全文 -

思路今天遇到了这么一个需求，便是当服务商迭代软件版本时，前端如何自动获取到后端的更新信息然后自动完成版本更新。起初，我根据之前的项目经验以及结合webpack的热更新机制，给出的方案是通过websocket服务来实现。实现方法便是当服务端更新版本后自动给前端发送一条更新信息，使前端发生更新，但是这样不仅需要改动服务端的代码，还需要一直建立websocket通信，非常的麻烦且不稳定。实现回家之后我苦

- 阅读全文 -

Vue.js的核心理念便是响应式，通过其响应式原理实现了数据的自动更新和视图的动态更新。响应式的核心概念是数据劫持（data reactivity）和依赖追踪（dependency tracking）。本文分别讲解了Vue3和Vue2的响应式原理和区别Vue2响应式原理：初始化阶段：Vue2采用选项式API（Options API），我们可以用包含多个选项的对象来描述组件的逻辑，例如 data、m

- 阅读全文 -

复现提示 Cannot find module '@/assets/images/logo.png' or its corresponding type declarations.ts(2307) 解决方式新建 image.d.ts 文件到根目录在 image.d.ts 文件中写入以下内容，类型可以自由设置declare module '*.svg' declare module '*.png'

- 阅读全文 -

前言为什么要开发一套这样的系统？网上资源那么多为什么还要自己造轮子？为什么要选择nodejs？这可能是你们会发出的疑问，但是我还是要这么做，至于为什么，下面听我一一道来...小编还在快马加编中🐎...技术选型【前端】Vue3ViteNaiveUI【服务端】Koa2.jsnode.js【数据库】sequelizeMySQL(mysql2)【服务器】腾讯云2核4G轻量级应用服务器系统架构...系统栏目

- 阅读全文 -

在Vue.js项目中，Webpack是常用的模块打包器，可以将我们的源代码的各个模块打包成一个或多个文件。配置Webpack可以使代码打包过程更加高效和可控。本文将为您介绍如何在Vue.js项目中配置Webpack，并提供带有中文注释的示例代码。安装Webpack首先，我们需要安装Webpack。可以使用以下命令：npm install webpack webpack-cli --save-dev

- 阅读全文 -

// vue.config.js const { defineConfig } = require('@vue/cli-service') module.exports = defineConfig({ transpileDependencies: true, css: { loaderOptions: { sass: {

- 阅读全文 -