Vue3中组件使用ref时获取组件类型推导

我们在使用Vue3+ts开发时,常常会用到一些第三方组件库,比如Element-Plus UI、Navie UI等,这些UI框架中有些组件常常会暴露一些方法给我们便捷的去实现各种复杂的交互,我们经常会像下面这样去给组件定义一个ref去获取组件的实例:<template> <div> <el-drawer ref="drawerRef"

- 阅读全文 -

Vue3等比例缩放图片组件

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

- 阅读全文 -

在vue中定义一个防抖ref

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

- 阅读全文 -

Vue和React的主要区别

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

- 阅读全文 -

Proxy相比Object.defineProperty到底好在哪?

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

- 阅读全文 -

版本迭代时如何自动让用户端更新版本

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

- 阅读全文 -

Vue的响应式原理

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

- 阅读全文 -

vue3+ts正常引入图片切使用正常但是爆红

复现提示 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开发一个后台管理系统

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

- 阅读全文 -

vue项目中,webpack如何配置

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

- 阅读全文 -