vue.js状态管理和服务端渲染

状态管理

vuejs状态管理的几种方式
  1. 组件内管理状态:通过data,computed等属性管理组件内部状态

  2. 父子组件通信:通过props和自定义事件实现父子组件状态的通信和传递

  3. 事件总线eventBus:通过new Vue()实例,实现跨组件通信

    vue3已经移除该api
    
  4. provide/inject:通过provide/inject实现父组件和后代组件的跨层级通信

  5. 状态管理库:Vuex/Pinia

状态管理库的核心概念(以pinia为例)
  • State
  • Getter
  • Action

(源码仓库:https://github.com/vuejs/pinia/blob/v2/packages/pinia/src/createPinia.ts)
在这里插入图片描述

后果脚后跟计划骨结核几何画板
插件系统:

const app = createApp(App)
const pinia = createPinia()
function myUseFn(){return {num:10}
}
pinia.use(myUseFn)
app.use(pinia)

服务端渲染

基本概念
  • CSR(Client Side Rendering) 客户端渲染
  • SSR(Server Side Rendering)服务端渲染
  • SSG (Static Site Generation)静态站点生成
  • ISR(Incremental Static Regeneration)增量静态再生
vuejs服务端渲染的原理
  1. 创建服务端vue实例
  2. 处理请求和路由 controller
  3. 数据预获取 状态同步
  4. 生成HTML字符串 renderToString
  5. 客户端接受HTML
  6. 客户端激活 Hydaration
如何实现前后端状态同步
  1. 安装并创建Pinia实例
  2. 使用defineStore定义store
  3. 服务端数据预获取,修改store中的state的值
  4. 状态同步,服务端状态序列化成字符串挂载到window.__PINIA_STATE__变量上,客户端激活应用时从HTML解析状态,注入到pinia实例中
SSR优点和缺陷
  • 优点

     1、更快的首屏渲染2、更好的搜索引擎优化SEO3、更好的内容预览
    
  • 缺点

     1、服务器负载增加2、复杂度增加,需要考虑代码的同构问题和第三方库是否支持在服务端运行3、复杂的构建和部署配置
    

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/329065.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

yolov8训练自己数据集时出现loss值为nan。

具体原因目前暂未寻找到。 解决办法 将参数amp改成False即可。 相关资料: https://zhuanlan.zhihu.com/p/165152789 https://github.com/ultralytics/ultralytics/issues/1148

人类听觉处理和语言中枢

人类听觉概述 人类听觉是指通过耳朵接收声音并将其转化为神经信号,从而使我们能够感知和理解声音信息的能力。听觉是人类五种感觉之一,对我们的日常生活和交流至关重要。 听觉是人类交流和沟通的重要工具。通过听觉,我们能够听到他人的语言…

新媒体运营十大能力,让品牌闻达天下!

" 现在新媒体蓬勃发展,很多品牌都有新媒体运营这个岗位。新媒体运营好的话,可以提高公司品牌曝光、影响力。那新媒体运营具备什么能力,才能让品牌知名度如虎添翼呢?" 信息收集能力 在移动互联网时代,信息的…

中国医学健康管理数字化发展风向标——专家共话未来趋势

随着科技的飞速发展,数字化已经成为中国医学健康管理领域的重要发展方向。 2024年5月20日由中国管理科学研究院智联网研究所、中国民族医药协会医养教育委员会、国家卫健委基层健康服务站、中国老龄事业发展基金会、中国智联网健康管理系统平台、中国医学健康管理数…

使用大模型结合Mermaid实现业务流程图快速生成

一、需求描述 在日常系统研发过程中,经常面临前期要写投标技术文档,中期要写系统概要设计、详细设计等各类文档,最耗时间的便是画一些业务流程图。随着大模型的不断普及,大模型对文字的处理越来越强,现可以找一个能简化…

Linux——进程信号(一)

1.信号入门 1.1生活中的信号 什么是信号? 结合实际红绿灯、闹钟、游戏中的"!"等等这些都是信号。 以红绿灯为例子: 一看到红绿灯我们就知道:红灯停、绿灯行;我们不仅知道它是一个红绿灯而且知道当其出现不同的状况…

半导体测试基础 - AC 参数测试

AC 测试确保 DUT 的时特性序满足其规格需求。 基本 AC 参数 建立时间(Setup Time) 建立时间指的是在参考信号(图中为 WE)发生变化(取中间值 1.5V)前,为了确保能被正确读取,数据(图中为 DATA IN)必须提前保持稳定不变的最短时间。在最小建立时间之前,数据可以随意变…

C语言游戏实战(12):植物大战僵尸(坤版)

植物大战僵尸 前言: 本游戏使用C语言和easyx图形库编写,通过这个项目我们可以深度的掌握C语言的各种语言特性和高级开发技巧,以及锻炼我们独立的项目开发能力, 在开始编写代码之前,我们需要先了解一下游戏的基本规则…

OSPF路由聚合

原理概述 与RIP不同,OSPF不支持自动路由聚合,仅支持手动路由聚合。OSPF的路由聚合有两种机制:区域间路由聚合和外部路由聚合。区域间路由聚合必须配置在ABR路由器上,指的是ABR在把与自己直接相连区域(Area&#xff09…

Dijkstra算法在《庆余年》中的应用:范闲的皇宫之旅

❤️❤️❤️ 欢迎来到我的博客。希望您能在这里找到既有价值又有趣的内容,和我一起探索、学习和成长。欢迎评论区畅所欲言、享受知识的乐趣! 推荐:数据分析螺丝钉的首页 格物致知 终身学习 期待您的关注 导航: LeetCode解锁100…

【探索数据结构】线性表之双链表

🎉🎉🎉欢迎莅临我的博客空间,我是池央,一个对C和数据结构怀有无限热忱的探索者。🙌 🌸🌸🌸这里是我分享C/C编程、数据结构应用的乐园✨ 🎈🎈&…

MT3041 多项式变换求值

注意点: 1.使用单调栈 2.用ios::sync_with_stdio(false);cin.tie(0);cout.tie(0);避免超时 3.此题除了ans最好不要用long long,如果a[]和b[]都是long long 类型,可能会超内存 4.ans (ans % p p) % p;防止负数 5.使用秦九韶算法计算指数…

【Linux】语言级文件接口与系统级文件接口

目录 前言 一、回顾C语言中的文件操作 二、认识文件缓冲区 三、Linux系统提供的文件接口 四、文件描述符fd简介 Linux下C语言文件接口简单模拟实现 前言 每个编程语言都有自己的文件操作方法,在不同的操作系统下相同的语言有相同的文件操作方法。这是如何实现…

声音转文本(免费工具)

声音转文本:解锁语音技术的无限可能 在当今这个数字化时代,信息的传递方式正以前所未有的速度进化。从手动输入到触控操作,再到如今的语音交互,技术的发展让沟通变得更加自然与高效。声音转文本(Speech-to-Text, STT&…

git拉取项目前需要操作哪些?

1.输入 $ ssh-keygen -t rsa -C "秘钥说明" 按enter键 2.出现 ssh/id_rsa:(输入也可以不输入也可以) 然后按enter键 3.出现empty for no passphrase:(输入也可以不输入也可以) 然后按enter键 4.出现same passphrase again: (输入也可以不输入也…

异常检测 | PCA马氏距离异常值检测(Matlab)

异常检测 | PCA马氏距离异常值检测(Matlab) 目录 异常检测 | PCA马氏距离异常值检测(Matlab)效果一览基本介绍程序设计参考资料 效果一览 基本介绍 Matlab Pca 马氏距离异常值检测,剔除异常样本,置信椭圆可…

15:00面试,15:08就出来了,问的问题有点变态。。。

从小厂出来,没想到在另一家公司又寄了。 到这家公司开始上班,加班是每天必不可少的,看在钱给的比较多的份上,就不太计较了。没想到8月一纸通知,所有人不准加班,加班费不仅没有了,薪资还要降40%…

4. C++入门:内联函数、auto关键字、范围for及nullptr

内联函数 概念 以inline修饰的函数叫做内联函数,编译时C编译器会在调用内联函数的地方展开,没有函数调用建立栈帧的开销,内联函数提升程序运行的效率 对比C的宏 C语言不足:宏 #define ADD(x, y) ((x)(y))int main() {int ret…

OpenFeign高级用法:缓存、QueryMap、MatrixVariable、CollectionFormat优雅地远程调用

码到三十五 : 个人主页 微服务架构中,服务之间的通信变得尤为关键。OpenFeign,一个声明式的Web服务客户端,使得REST API的调用变得更加简单和优雅。OpenFeign集成了Ribbon和Hystrix,具有负载均衡和容错的能力&#xff…