Next.js 12.0.5 版本发布，React 应用后端渲染框架
Next.js v12.0.5 发布了！Next.js 是一个用于在服务端渲染 React 应用程序的简单框架，此升级完全向后兼容，建议所有版本低于 12.0.5 的用户使用，此补丁到 Next.js 11 的后向移植版本为 11.1.3。此版本带来以下变化：核心变化添加 swc 转换以移除console.*呼叫：#31449支持 ESLint v8：#29865修复：允许next lint不通过eslint-config-next安装：#29823删除 TextEncoder 和 TextDecoder 包装器：#31490简化输出消息：#31454更新 webpack：#31455Next...
vue3.0+vite+typescript+element-plus搭建项目（一）
随着vue3.0的越来越受欢迎，开始有许多公司和个人开始学习并使用vue3开发项目。我从接触学习并使用vue2，到现在的vue3，一直是vue的忠实粉丝和追随者。vue3也发布很长时间了，目前vue3+vite+ts再结合一些优秀的UI框架，如Element plus，Ant design，Naive UI，移动端的Vant UI，成为了较为流行的前端技术之一。那么今天就带大家一起来搭建一个Vue3的项目吧！一、使用vite构建vue3.0+ts项目（推荐使用yarn）安装yarn：首先下载node.js，使用npm安装命令如下： npm install -g yarn 查看yarn是否安装成...
vue 3 学习笔记 (七)——vue3 中 computed 新用法
vue3 中 的 computed 的使用，由于 vue3 兼容 vue2 的选项式API，所以可以直接使用 vue2的写法，这篇文章主要介绍 vue3 中 computed 的新用法，对比 vue2 中的写法，让您快速掌握 vue3 中 computed 的新用法。组合式 API 中使用 computed 时，需要先引入：import { computed } from "vue"。引入之后 computed 可以传入的参数有两种：回调函数和 options 。具体看看它是如何使用的？一、函数式写法在vue2中，computed 写法：computed:{ sum(){ return ...
从使用到自己实现简单Vue Router看这个就行了
Vue Router 基础让我们先来了解下Vue Router的简单使用吧，先了解怎么使用，之后再去想办法怎么去实现1.简介路由：本质上是一种对应关系分类分为前端路由和后端路由后端路由比如node.js 的路由是 URL的请求地址和服务器上面的资源对应，根据不同的请求地址返回不同的资源前端路由在SPA（单页应用）中根据用户所触发的事件改变了URL 在无需刷新的前提下 显示不同的页面内容，比如等下就要讲的Vue Router2.Vue-Router最基础的使用步骤2.1.引入Vue-Router文件<!-- 使用vue router前提 vue 必不可少 --> <script...
如何手动解析vue单文件并预览？
开头笔者之前的文章里介绍过一个代码在线编辑预览工具的实现（传送门：快速搭建一个代码在线编辑预览工具），实现了css、html、js的编辑，但是对于demo场景来说，vue单文件也是一个比较好的代码组织方式，至少笔者就经常在写vue项目的同时顺便写写各种demo，但是分享不太方便，因为单文件不能直接运行看效果，基于此，笔者决定在之前的基础上再增加一个vue单文件的编辑及预览功能。 ps.如果没看过之前的文章也没关系，这里简单介绍一下该项目：code-run，基本框架使用的是vue3.x版本， 构建工具使用的是vite，代码编辑器使用的是monaco-editor，基本原理就是把css、js、ht...
搞懂现代Web端即时通讯技术一文就够：WebSocket、socket.io、SSE
1、引言有关Web端即时通讯技术的文章我已整理过很多篇，阅读过的读者可能都很熟悉，早期的Web端即时通讯方案，受限于Web客户端的技术限制，想实现真正的“即时”通信，难度相当大。传统的Web端即时通讯技术从短轮询到长连询，再到Comet技术，在如此原始的HTML标准之下，为了实现所谓的“即时”通信，技术上可谓绞尽脑汁，极尽所能。自从HTML5标准发布之后，WebSocket这类技术横空出世，实现Web端即时通讯技术的便利性大大提前，以往想都不敢想的真正全双工实时通信，如此早已成为可能。本文将专门介绍WebSocket、socket.io、SSE这几种现代的Web端即时通讯技术，从适用场景到技术...
Vuex 学习笔记
1.1 vuex的核心概念State （驱动应用的数据源）Mutation （以声明方式将 state 映射到视图）Action（响应在 view 上的用户输入导致的状态变化）Getter （对 Store 中的数据进行加工处理形成新的数据）1.1.1 Startstart 提供唯一的公共数据源，所以共享的数据要统一放到Store 的 Stare 中进行存储。// 创建 store 数据源， 提供唯一公共数据 const store = new Vuex.store({ state: { name : 'code' } })组件访问 State中数据的第一种方式...
Vue.js 3.2 关于响应式部分的优化
Vue 3 正式发布距今已经快一年了，相信很多小伙伴已经在生产环境用上了 Vue 3 了。如今，Vue.js 3.2 已经正式发布，而这次 minor 版本的升级主要体现在源码层级的优化，对于用户的使用层面来说其实变化并不大。其中一个吸引我的点是提升了响应式的性能:More efficient ref implementation (~260% faster read / ~50% faster write)~40% faster dependency tracking~17% less memory usage翻译过来就是 ref API 的读效率提升约为 260%，高效率提升约为 50% ...
JavaScript 中的事件委托
JavaScript 中一个重要的方法就是事件委托（又叫事件代理）。事件委托将事件侦听器添加到一个父级元素上，这样就只用添加一次事件侦听器，可以避免向 （父级元素内）很多特定的 DOM 节点添加多个事件侦听器，减少了内存消耗，从而优化程序性能。而这个添加在父元素上的事件侦听器通过事件冒泡的事件流机制以分析查找子元素的匹配项。事件委托的概念解释并不复杂，但很多人不明事件委托到底是如何的工作，本文就来解释一下事件委托的工作原理。事件冒泡（Event Bubbling）要完全理解事件委托的工作原理，必须要先了解事件冒泡。事件冒泡的事件流最先是由微软在其开发的 IE 浏览器中实现的。事件冒泡的事件流，...
尤雨溪凌晨官宣：Vue 3.2 已发布
今日凌晨，尤雨溪在微博平台官宣 Vue 3.2 已发布，并表示：<script setup> + TS + Volar = 真香Vue 3.2 版本包括许多重要的新功能和性能改进，但并不包含重大更改。新的单文件组件功能：`<script setup>` 是一种编译时语法糖，可在 SFC 内使用 Composition API 时极大地提升工作效率。`<style> v-bind` 在 SFC 标签中启用组件状态驱动的动态 CSS 值。`<style>`一起使用这两个新功能的示例组件：<script setup> import { re...