引言 有这么一个需求：列表页进入详情页后，切换回列表页，需要对列表页进行缓存，如果从首页进入列表页，就要重新加载列表页。 对于这个需求，我的第一个想法就是使用keep-alive来缓存列表页，列表和详情页切换时，列表页会被缓存；从首页进入列表页时，就重置列表页数据并重新获取新数据来达到列表页重新加载的效果。 但是，这个方案有个很不好的地方就是：如果列表页足够复杂，有下拉刷新、下拉加载、有弹窗、有轮播等，在清除缓存时，就需要重置很多数据和状态，而且还可能要手动去销毁和重新加载某些组件，这样做既增加了复杂度，也容易出bug。 接下来说说我的想到的新实现方案（代码基于Vue3）。 keep-aliv...

前言 jquery时代更新视图是直接对DOM进行操作，缺点是频繁操作真实DOM，性能差。react和vue时代引入了虚拟DOM，更新视图是对新旧虚拟DOM树进行一层层的遍历比较，然后找出需要更新的DOM节点进行更新。这样做的缺点就是如果DOM树很复杂，在进行新旧DOM树比较的时候性能就比较差了。那么有没有一种方法是不需要去遍历新旧DOM树就可以知道哪些DOM需要更新呢？ 答案是：在编译时我们就能够知道哪些节点是静态的，哪些是动态的。在更新视图时只需要对这些动态的节点进行靶向更新，就可以省去对比新旧虚拟DOM带来的开销。vue3也是这样做的，甚至都可以抛弃虚拟DOM。但是考虑到渲染函数的灵活性和...

<u-collapseref="myCollapse"@change="change"accordion> <u-collapse-itemv-for="(level,index)inlevelList":key="index":title="level.name"ref="collapseHeight"> <viewclass=""> <viewv-for="(film,i)infilmList":key="i"class="u-p-20"> {{film.name}} </view> </view> </u-co...

a-textarea(textarea)出现模糊问题的可能解决方案 项目介绍：本项目是一个vue3+ant-design-vue4.x开发，是一个客服机器人的组件。其它项目通过iframe+js文件来引入(iframe的内容就是表单，入口按钮是通过js文件进行dom操作创建)。 通过js监听页面宽度，然后通过transform来适配不同分辨率。 iframe+transform，出bug似乎也不奇怪 这期间也因为transform出现过模糊bug，但这篇文章的重点是textarea。 大致的情况如图： 在出现滚动条的时候，表单变得非常模糊。 而没有滚动条的时候： 页面就又恢复了清晰。 猜测...

这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助 一、背景 在前端JSON.stringfy是我们常用的一个方法，可以将一个对象序列化。例如将如下对象序列化 constperson={name:'kalory',age:18} JSON.stringfy(person) //结果 '{"name":"kalory","age":18}' 将一个数组序列化 constarr=[1,2,3,4,5] //结果 '[1,2,3,4,5]' constpersons=[{name:'kalory',age:18},{name:'jack',age:48}] //结果 '[{"n...

本文的目的，是为了让已经有Vue2开发经验的 人 ，快速掌握Vue3的写法。 因此， 本篇假定你已经掌握Vue的核心内容 ，只为你介绍编写Vue3代码，需要了解的内容。 一、Vue3里 script 的三种写法 首先，Vue3新增了一个叫做组合式api的东西，英文名叫CompositionAPI。因此Vue3的 script 现在支持三种写法， 1、最基本的Vue2写法 <template>  <div>{{ count }}</div>&...

一、介绍 Promise，译为承诺，是异步编程的一种解决方案，比传统的解决方案（回调函数）更加合理和更加强大 在以往我们如果处理多层异步操作，我们往往会像下面那样编写我们的代码 doSomething(function(result){ doSomethingElse(result,function(newResult){ doThirdThing(newResult,function(finalResult){ console.log('得到最终结果:'+finalResult); },failureCallback); },failureCallback); },failureCall...

概述 下面我将通过两个例子讲解列表过滤和排序，总的来说主要使用了数组的filter和sort方法 测试数据定义 persons:[ {name:'雷小军',age:44,sex:'男'}, {name:'李连杰',age:55,sex:'男'}, {name:'李彦宏',age:23,sex:'男'}, {name:'马化腾',age:33,sex:'男'}, {name:'马大云',age:60,sex:'男'}, {name:'王小伟',age:25,sex:'女'} ],   1.列表过滤   目标：在文本框中输入关键字，根据关键字对列表进行过滤 实现方法：使用...

大家好，我是Java陈序员。 今天，给大家介绍一个开源的聊天应用程序，支持PC端和移动端。 关注微信公众号：【Java陈序员】，获取开源项目分享、AI副业分享、超200本经典计算机电子书籍等。 项目介绍 HasChat——一个基于Vue3+Socket.io的聊天应用，同时支持PC端和移动端。 功能特性： 技术栈： PC网页版前端：Vue3+Vite+TypeScript+Pinia+NaiveUI+Socket.io 移动版前端：uni-app+Socket.io 后端：Express.js 项目预览 PC网页端 移动端 本地部署 环境准备： Node.Js15+ My...

1、下载依赖 npminstallvue-i18n@nex 2、在src目录下创建文件夹创建文件index.ts、zh/index.ts、en/index.ts  //index.tsimport{createI18n}from'vue-i18n'importzhfrom'./zh/index'importenfrom'./en/index'constmessages={en,zh,}console.log('localStorage.getItem',localStorage.getItem('language'));constlanguage=(navigator.lan...

一、什么是双向绑定 我们先从单向绑定切入单向绑定非常简单，就是把Model绑定到View，当我们用JavaScript代码更新Model时，View就会自动更新双向绑定就很容易联想到了，在单向绑定的基础上，用户更新了View，Model的数据也自动被更新了，这种情况就是双向绑定举个栗子  当用户填写表单时，View的状态就被更新了，如果此时可以自动更新Model的状态，那就相当于我们把Model和View做了双向绑定关系图如下 二、双向绑定的原理是什么 我们都知道 Vue 是数据双向绑定的框架，双向绑定由三个重要部分构成 数据层（Model）：应用的数据及...

其他章节请看： vue3快速入门系列 他API 前面我们已经学习了vue3的一些基础知识，本篇将继续讲解一些常用的其他api，以及较完整的分析vue2和vue3的改变。 浅层响应式数据 shallowRef shallow中文：“浅层的” shallowRef：浅的ref()。 先用ref写个例子： <!-ChildA.vue--> <template> <p>组件A</p> <p>a:{{a}}</p> <p>o:{{o}}</p> <p><button@click="cha...

1.computed（计算属性）和方法有什么区别？ 计算属性本质上是包含getter和setter的方法 当获取计算属性时，实际上是在调用计算属性的getter方法。vue会收集计算属性的依赖，并缓存计算属性的返回结果。只有当依赖变化后才会重新进行计算。 方法没有缓存，每次调用方法都会导致重新执行。 计算属性的getter和setter参数固定，getter没有参数，setter只有一个参数。而方法的参数不限。 由于有以上的这些区别，因此计算属性通常是根据已有数据得到其它数据，并在得到数据的过程中不建议使用异步、当前时间、随机数等副作用操作。 实际上，它们最重要的区别是含义上的区别。计算属性含...

大家好，我是Java陈序员。 今天，给大家介绍一个简洁、开源的中后台管理模板项目。 关注微信公众号：【Java陈序员】，获取开源项目分享、AI副业分享、超200本经典计算机电子书籍等。 项目介绍 nova-admin——一个基于Vue3、Vite5、Typescript、NaiveUI,简洁干净后台管理模板。 nova-admin追求用简单的方式实现完整功能，无过度封装，方便二次开发。 功能特性： 最新技术栈：基于Vue3、Vite5、TypeScript、NaiveUI、Unocss等最新技术栈开发 网络请求：提供完善的网络请求封装，提供统一的响应处理和多场景能力 权限管理：完善的前...

原创研发uniapp+vue3+pinia2跨三端仿微信app聊天模板Uniapp-Wechat。 uni-vue3-wchat基于uni-app+vue3+pinia2+uni-ui+uv-ui等技术跨端仿制微信App界面聊天项目，支持编译到H5+小程序端+App端。实现编辑框多行消息/emoj混合、长按触摸式仿微信语音面板、图片/视频预览、红包/朋友圈等功能。 预览图 编译至h5+App端+小程序端运行效果 技术栈 开发工具：HbuilderX4.0.8 技术框架：Uniapp+Vue3+Pinia2+Vite4.x UI组件库：uni-ui+uv-ui（uniapp+vue3组件库）...

前言 还是上一篇面试官：来说说vue3是怎么处理内置的v-for、v-model等指令？文章的那个粉丝，面试官接着问了他另外一个v-model的问题。 面试官：vue3的v-model都用过吧，来讲讲。 粉丝：v-model其实就是一个语法糖，在编译时v-model会被编译成:modelValue属性和@update:modelValue事件。一般在子组件中定义一个名为modelValue的props来接收父组件v-model传递的值，然后当子组件表单的值变化时再使用@update:modelValue抛出事件给父组件，由父组件来更新v-model绑定的变量。 面试官：你说的这个是在组件上面...

前言 大家在开发过程中，或多或少都会用到轮播图之类的组件，PC和Mobile上使用Swiper.js，小程序上使用swiper组件等。 本文将详细讲解如何用Vue一步步实现的类似Swiper.js的功能，无任何第三方依赖，干货满满。 最终效果 在线预览：https://zyronon.github.io/douyin/ 项目源代码：https://github.com/zyronon/douyin 注意：PC 必须将浏览器切到手机模式，先按 F12 调出控制台，再按 Ctrl+Shift+M才能正常预览 Demo代码 上面的预览地址是最终实现的效果，下...

本篇作为《Vue+OpenLayers6入门教程》和《Vue+OpenLayers6实战进阶案例》所有文章的二合一汇总目录，方便查找。 本专栏源码是由OpenLayers6.15.1版本结合Vue2框架编写，同时支持Vue3，零星几篇文章用到了Element-UI库。本专栏从Vue搭建脚手架到如何引入OpenLayers依赖的每一步详细新手教程，再到通过各种入门案例和综合性的实战案例，带领大家快速上手Vue+OpenLayers6开发。 反馈和建议OpenLayers系列-交流专区，建议和问题反馈 OpenLayers6入门目录 一、介绍 Gis开发入门，OpenLayers、Leafle...

1.现象 当在vue中打印对象的时候会发现有一些属性或者全部属性都是显示的...,点击展开后才能看到真正的值是什么. 2.原因 因为在vue中对象都是用了代理重写了get,由于get重写也就导致了浏览器不能直接获取到具体的值,因此才会在打印的时候为...,手动点击展开才显示具体的值 3.想看具体的值,不想手动点开怎么办 通过JSON.stringfy序列化再用JSON.parse解析 "proxy-zdz-log":{ "prefix":"log", "body":["console.log(JSON.parse(JSON.stringify($1)));//zdz-log","$2"...

其他章节请看： vue3快速入门系列 Pinia vue3状态管理这里选择pinia。 虽然vuex4已支持Vue3的CompositionAPI，但是vue3官网推荐新的应用使用pinia——vue3pinia 集中式状态管理 redux、mobx、vuex、pinia都是集中式状态管理工具。与之对应的就是分布式。 Pinia符合直觉的Vue.js状态管理库甚至让你忘记正在使用的是一个状态库——官网 安装pinia环境 首先下载安装包： PShello_vue3>npmipinia added2packages,andaudited71packagesin11s 10packa...