先上图 如何在我们切换tab标签的时候，缓存标签最后操作的内容，简单来说就是每个标签页中设置的比如搜索条件及结果、分页、新增、编辑等数据在切换回来的时候还能保持原样。看看keep-alive是如何实现该功能的。首先我们要了解keep-alive的基本使用。具体介绍请查看官方文档（https://cn.vuejs.org/guide/built-ins/keep-alive.html#ba
转载
2023-12-25 19:32:53
447阅读
# Vue3 与 Redis 的整合：详尽教程
在现代前端开发中，使用 Redis 存储和管理数据变得越来越普遍。Redis 作为一种高性能的键值数据库，能够显著提升应用的性能。本文将带领你了解如何在 Vue3 应用中使用 Redis。我们将从整体流程入手，然后逐步详细解释每个步骤的实现。
## 整体流程
在实际的开发中，Vue3 前端与 Redis 后端的交互通常是通过一个 API 层来实
安装 JSX 插件在 Vue2 中要想使用 jsx 开发，需要安装 @vue/babel-preset-jsx 等插件，之后在 babel 里指定即可，详细可以参考下面的 Vue2 GitHub 文档Vue2：GitHub 文档 —— Babel Preset JSX最近在使用 Vue3，突然想用 jsx 进行开发部分页面，顺便记录一下，也可以参考下面的 Vue3 GitHub 文档Vue3：Gi
转载
2023-10-24 08:37:56
264阅读
一、什么是jsx在 JavaScript 里面写 HTML 的语法，就叫做 JSX，算是对 JavaScript 语法的一个扩展.（在vue3项目中相当于单文件组件，.vue）使用的是jsx语法二、jsx语法1.插值。与 vue 模板语法中的插值一样，但是双大括号 {{}} 变为了单大括号 {}。大括号内支持任何有效的 JavaScript 表达式，比如：2 + 2，user.firstName，
转载
2023-07-21 22:24:22
265阅读
v-for中的key是什么作用？在使用v-for进行列表渲染时，我们通常会给元素或者组件绑定一个key属性。 官方中对key的作用解释：key属性主要用在Vue的虚拟DOM算法，在新旧nodes对比时辨识VNodes；如果不使用key，Vue会使用一种最大限度减少动态元素并且尽可能的尝试就地修改/复用相同类型元素的算法；而使用key时，它会基于key的变化重新排列元素顺序，并且会移除/销
转载
2024-02-02 11:41:40
91阅读
1、Vue3简介1.1、Vue3带来了什么1.性能的提升Vue3与Vue 2相比，在包大小（使用 tree-shaking 时减轻多达 41%）、初始渲染（速度提高多达 55%）、更新（多达 133% 更快）和内存使用（最多减少 54%）。打包大小减少41%初次渲染快55%, 更新渲染快133%内存减少54%......2.源码的升级使用Proxy代替defineProperty实现响应式重写虚拟
转载
2023-10-23 19:59:39
180阅读
创建Vue3项目方式一：
使用vue-cli：vue的脚手架----->创建vue项目----->构建vue项目----->前端工具链
创建方式还是和之前一样，Vue版本要选择Vue3的版本
方式二：
使用vite创建：
vite：https://cn.vitejs.dev/
：npm create vue@latest
转载
2024-06-24 23:02:55
282阅读
有三个页面，upload到chart到three，我想实现chart到three ，返回时chart缓存不刷新，upload到chart时，chart不缓存，这个怎么实现首先你可以给 chart 页面配置一个 noCache 参数，标记该页面是否需要缓存：{
path: '/chart',
name: 'chart',
component:
原创
2023-07-22 13:11:55
211阅读
vue中，我们所要实现的一个场景就是：1.搜索页面==>到搜索结果页时，搜索结果页面要重新获取数据，2.搜索结果页面==>点击进入详情页==>从详情页返回列表页时，要保存上次已经加载的数据和自动还原上次的浏览位置。下面以实验的方式展现整个实现流程，如有更好的方案，欢迎指出。缓存组件，vue2中提供了keep-alive。首先在我们的app.vue中定义keep-alive:<
在绝大多数情况下，Vue 推荐使用模板<template>语法来创建应用。在 Vue 3 的项目开发中，template 是 Vue 3 默认的写法。虽然 template 长得很像 HTML，但 Vue 其实会把 template 解析为 render 函数，之后，组件运行的时候通过 render 函数去返回虚拟 DOM。然而在某些使用场景下，我们真的需要用到 JavaScript
转载
2023-12-14 09:18:57
113阅读
在绝大多数情况下，Vue 推荐使用模板<template>语法来创建应用。在 Vue 3 的项目开发中，template 是 Vue 3 默认的写法。虽然 template 长得很像 HTML，但 Vue 其实会把 template 解析为 render 函数，之后，组件运行的时候通过 render 函数去返回虚拟 DOM。然而在某些使用场景下，我们真的需要用到 JavaScript
转载
2023-12-14 11:04:16
89阅读
一、使用vuex进行数据缓存官网介绍：Vuex是一个专门为Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化我们理解：Vuex是采用集中式管理组件依赖的共享数据的一个工具vue插件，可以解决不同组件数据共享问题节点说明：state管理数据，管理的数据是响应式的，当数据改变时驱动视图更新。=>类似与组件的datam
原创
2023-11-09 13:24:44
344阅读
Vue3 特殊属性：key,ref,isvue3 特殊属性：keyrefis key期望值：number | string特殊属性key主要用于提示Vue的虚拟DOM算法在区分新节点列表和旧节点列表时识别VNodes。没有key的时候，Vue使用一种算法来最小化元素移动，并尽可能就地修补/重用相同类型的元素。使用key，它将根据键的顺序变化对元素重新排序，而key不再存在的元素将总是被删
转载
2023-11-13 23:17:50
137阅读
1、hookVue3 的 hook函数 相当于 vue2 的 mixin，不同在于 hook 是函数，其使用目的是为了复用代码，让setup中的逻辑更加清楚易懂。使用示例：在 src 目录下建立一个 hooks 文件夹，声明一个用于存放需要复用的代码的 js 文件，如下：文件内容如下：import {reactive,onMounted,onBeforeUnmount} from 'vu
转载
2024-03-03 09:03:58
201阅读
前后端分离：WebAPI+Vue开发——远程数据请求axios前后端分离：WebAPI+Vue开发——跨域设置前后端分离：WebAPI+Vue开发——身份认证本文采取的策略是“跨域资源共享-Cross Origin Resource Sharing(CORS) ”。一般情况下，前端和后端在两个项目中，在部署的时候就要部署在两个域名下，如前端域名：http://www.abc.com/，WebAPI
# Vue3 读取 Redis：实现前端页面与后端数据交互
## 介绍
在现代 Web 开发中，前端页面与后端数据交互是非常常见的需求。Vue3 是一种流行的前端框架，而 Redis 是一种高性能内存数据库，我们可以利用它们来实现前端页面与后端数据的交互。本文将介绍如何在 Vue3 中读取 Redis 数据，并提供一些代码示例。
## Redis 简介
Redis 是一种开源的内存数据库，
原创
2024-04-30 07:37:20
140阅读
# Vue 3 请求 Redis 的实现
随着现代Web应用的迅速发展，前端与后端之间的交互变得愈加复杂。Redis作为一种高效的内存数据库，常常被用于提高应用的性能。在本篇文章中，我们将探讨 Vue 3 如何与 Redis 进行数据请求，以及一些实现细节和代码示例。
## Vue 3 与 Redis 的交互
在 Vue 3 中，我们通常会借助 Axios 来发起请求，而后端则使用 Node
原创
2024-09-24 04:12:39
70阅读
# 在 Vue 3 项目中使用 Redis
在现代 web 开发中，Redis 作为一种高性能的键值存储系统，广泛应用于缓存、会话管理和实时数据处理等场景。虽然 Vue 3 是一个前端框架，但我们可以通过后端服务将 Redis 集成到我们的 Vue 应用中。本文将介绍如何在 Vue 3 项目中使用 Redis，包含代码示例和流程图。
## 1. 项目结构
在本示例中，我们的项目结构如下：
<template> <router-view v-slot="{ Component }"> <keep-alive :include="includmplate><script lang="ts">import { ref, d
原创
2022-07-06 16:44:56
383阅读
Vue3 Diff 算法与key先来看看官方的解释
key属性主要用在Vue的虚拟DOM算法，在新旧nodes对比时辨识VNodes；如果不使用Key，Vue会使用一种最大限度减少动态元素并且尽可能的尝试就地修改/复用相同类型元素的算法；而使用key时，它会基于key的变化重新排列元素顺序，并且会移除/销毁key不存在的元素；官方的解释对于初学者来说并不好理解，比如下面的问题：什么是新旧nodes
转载
2024-01-21 08:31:59
132阅读
