ayozooZ

概念服务器端渲染(Server-Side Rendering，SSR)指的是在服务器上完成网页渲染并将将其发送给客户端的过程。 为什么需要SSR?SSR 发送给客户端的是包含了完整内容的网页，这样用户可以先看到网页的内容，而不需要等待“网页加载>执行JS>加载数据>渲染到网页”，从而提升用户体验。另一方面，因为网页内已经包含了具体内容，对搜索引擎也更加友好。 SSR的优势SSR 能改善用户体验。与传统服务器语言的对比很久之前，我们用 PHP 之类的语言输出 HTML，但是我们并不称其为”服务器端渲染”，因为现在的SSR 有更多的优化: 语言同构化:开发难度降低。 数据传递与状态管理:虽然还是 JSON，但框架尽量帮我们做好了。 渲染函数由边缘计算负责:更快的速度、 页面切换时不会重新加载- 与传统服务器语言的对比很久之前，我们用PHP之类的语言输出HTML，但是我们并不称其为”服务器端渲染”，因为现在的服务器端渲染有更多的优: 语言同构化:开发难度降低。 数据传递与状态管理:虽然还是 JSON，但框架尽量帮我们做好了。 渲染函数由边缘计算负责:更快的速度、 页面 ...

runtimeConfig与app.confg回看app.config.ts与nuxt.config.ts,俩者都是向应用程序的其余部分公开变量 runtimeConfig：使用环境变量构建后需要指定的私有或公共令牌。 app.config：在构建时确定的公共令牌、网站配置（如主题变体、标题和任何不敏感的项目配置）。 以下有使用准则，请参考以下标准: 特征比较 特征 runtimeConfig app.config 客户端 水合 捆绑 环境变量 ✅是的 不 反应性 ✅是的 ✅是的 类型支持 ✅部分 ✅是的 每个请求的配置 ✅不 ✅是的 热模块更换 ✅不 ✅是的 非原始 JS 类型 ✅不 ✅是的 样式本地样式表 本地样式表存在assets/目录 组件内导入 通过@import导入 1234567891011<script>// Use a static import for server-side compatibilityimport '~/assets/css/first.css'// Caution: Dynamic i ...

react之状态管理随着应用的不断加大，我们应该更有意识的的去关注我们的应用状态如何去组织，以及数据如何在组件中流动。我们应该去避免冗余或重复的状态，这样可以避免一些缺陷的产生。这时候，如何组织好状态，如何保持状态更新逻辑的可维护性，以及如何跨组件共享状态就变得尤为重要。 使用状态响应输入在使用React时，我们不需要直接代码层面去修改UI。我们可以直接通过组件的不同状态去展现的UI，然后根据用户输入触发状态修改。 声明式UI与命令式UI的比较当设计UI交互时，会思考UI如何根据用户的操作而响应变化。想象一个允许用户提交一个答案的表单： 当表单输入的时候，“提交”按钮会变成可用状态 点击“提交”后，表单和提交按钮都会随之变成不可用状态 如果网络请求成功，表单会随之隐藏，同时会出现“提交成功”提示 如果网络请求失败，会出现错误提示信息，表单又变为可用状态 命令式编程中，我们需要根据具体的场景去设计如何实现交互。我们必须根据可能会发生的事情去写一些明确的命令去操作UI。也就是我们需要“命令”每个元素（操作dom），告诉计算机应该如何去更新UI的编程方式被称为命令式编程。 对于独立系统来 ...

React之Hook篇useState什么是state？在react中，数据不称为data，而称为state ​ data = > state（状态） React，其实是一个view library （view库—只关注视图） ​ view => update => 视图的具体状态 ​ state <=> view ​ state和视图是相关联的。 视图是某一个状态发生了变化，所以视图要进行相应的更新。 useState()=> state setState 这个可以解释为，视图需要state状态。通过useState()创建了一个状态和设置状态的方法。 react设计理念 react设计理念：一切操作函数化。 在react中，贯彻js—–“函数是一等公民”的理念。 react提供的东西都是朴素的，简单的。 react大部分都是运行时；vue都是编译时的行为。 使用姿势根据状态变更，有以下俩种： setXxx(xxx) 简单情况 setXxx((x)=>{ return 表达式}) 复杂情况 常用写法一：s ...

React入门之添加交互界面上的控件对随着用户的输入而更新。例如点击按钮切换轮播图的展示。在React中，随着时间变化的数据称为状态（state）。可以向任何组件添加状态，按需去进行更新。 响应事件什么是响应事件React允许我们在JSX中添加时间处理程序。事件处理程序是我们自己定义的函数。比如我们界面交互时：点击、悬停、焦点聚焦等交互事件。 我们在自己的组件中可以定义我们自己的事件处理程序。做法是往我们的组件时间处理程序props指定特定应用的名称。 1234567891011121314151617181920212223242526272829303132333435// 定义button组件 通过props接收onclick事件// {children} 作为插槽接收function Button({ onClick, children }) { return ( <button onClick={onClick}> {children} </button> );}// 定义Toolbar 通过props接收onPlay ...

ReactReact应用就是被组件的独立UI片段构建，React组件本质就是可以添加任意标签的JavaScript函数。 React组件的基本要素 基本的组件js文件存在要素：1、可以return出存在任意标签的JavaScript函数2、函数中需要存在return(xxx) html结构3、最终需要将渲染的组件export出去 1234567891011121314151617181920function Profile() { return ( <img src="https://i.imgur.com/MK3eW3As.jpg" alt="Katherine Johnson" /> );}export default function Gallery() { return ( <section> <h1>Amazing scientists</h1> <Profile /> <Profile /> <Profi ...

通信串行通信中，数据通常是在俩个终端之间进行传送，根据数据流的传输方向分为以下三种基本传送方式：单工、半双工和全双工。 基本区别为： 单工：单工通信只有一根数据线，通信只在一个方向上进行，这种方式的应用实例有：监视器、打印机、电视机等。 半双工：半双工通信也只有一根数据线，它也单工的区别是这根数据线既可作发送又可作发接收，虽然数据可在两个方向上传送，但通信双方不能同时收发数据。http协议采用的就是这个通信方式 全双工：　数据的发送和接收用两根不同的数据线，通信双方在同一时刻都能进行发送和接收，这一工作方式称为全双工通信。在这种方式下，通信双方都有发送器和接收器，发送和接收可同时进行，没有时间延迟。websocket采用的就是这个通信方式 http http协议主要关注的是 客户端——>服务器（获取资源） 特点：无状态协议； 每个请求都是独立的； 请求应答模式，服务器无法主动给客户端推送消息（单工，半双工，全双工） http受浏览器同源策略的影响 websocket双向通信（全双工协议）每次不需要重新建立连接，可以一直相互通信 不使用webso ...

webpack、vite的自动导包的”爱恨情仇”前言最近在开发Vue3+Vite的统一基座工程，遇到了模块自动导入的不同构建工具的引入方式，特此记录。 在项目中，为了避免频繁导入。大家都会在对应，例如项目使用Webpack 打包工具的。在其项目store文件下其中的index.js 文件中使用webpack提供的apirequire.context的方法实现自动导入。 ES 模块规范在实现自动导入模块前，我们先了解下ES 模块规范。 所谓的ES模块规范,即 JavaScript 的标准模块系统，它允许您使用 import 和 export 关键字来导入和导出模块。这是现代 JavaScript 中推荐使用的模块化方式。 在ES模块规范中，提供了import.meta.glob功能。它允许在项目运行中动态匹配特定模式的模块。例如以下代码就可以动态匹配到module模块下的所有js文件。 1import.meta.glob('./module/*.js') 话不多说，上干货例如，你的项目sotre文件目录为 12345678- store - module - module ...

vue3 + vite 环境变量踩坑前言众所周知，项目搭建过程中，存在环境的区分。一般项目中都会存在env的俩个配置环境变量的配置文件。… 例如以下生产环境、开发环境的环境变量文件： 1234567891011121314//.env.development 生产环境变量文件# 开发环境配置ENV = 'development'# 开发环境VUE_APP_BASE_API = '/dev-api'// .env.production# 生产环境配置ENV = 'production'# 生产环境VUE_APP_BASE_API = '/web-api' 然后在package.json中配置对应环境启动命令用以启动不同环境 1234"scripts": { "dev": "vue-cli-service --mode development", "build": "vue-cli-service build --mode production", }, 什么是环境变量？根据代码运行环境变化而变化的变量就是所谓的环境变量。 在生产环境和开发环境中最多用以区分接口公共BA ...