vuex、浏览器缓存机制、数据响应式的原理

2024-05-15 17:45:56

vuex是vue框架中状态管理，

它有5种属性，即state、getter、mutation、action、module

state：存放公共数据

getter：获取根据业务场景处理返回的数据

mutation：修改state的方法的地方，修改过程是同步的

action：异步处理，通过分发操作触发mutation

module：将store模块分割，减少代码臃肿

浏览器缓存机制

http缓存：强缓存，协商缓存相互配合实现缓存处理

强缓存：在过期之前，使用本地资源和服务器进行交互

协商缓存：如果过期了，就会进入协商缓存阶段，会向服务器发送一个请求，把请求求发送过去，，然后看服务器上的资源有没有比本地的资源更新一点，如果没有更新，就会返回304，继续用本地资源，如果有更新，返回200，然后重新再走一遍流程。

数据响应式的原理

数据响应：数据变了，视图也会跟着变

总结来说，就是利用object.defineProperty数据劫持和观察者模式来实现的

vue 内部把data中的对象进行转换，把所有属性递归实现劫持Object.defineProperty，每个数据再创建一个Dep被观察者。

模板进行编译，提取里面所有需要数据的地方，变成watcher，然后再把watch添加到对应的Dep观察者列表中。

当data中属性发生变化的时候，因为被劫持了，所以vue内部是知道的，调用对应的Dep去通知观察者列表中的所有观察者，观察者再去更新视图。

问题：

为什么data中数据变了，vue是怎么知道的？

因为数据被劫持了

数据变了，为什么组件中一堆用到这个数据的地方全变了？

因为它是观察者模式，是一对多的关系

为什么数据必须在data中初始化，后添加的为什么不是响应式的？

因为vue在初始化的时候会把data中属性全部变成Object.defineProperty写法，后添加的没有进行转换，所以就不是响应式的了（它错过了初始化转换的时机）

vuex、浏览器缓存机制、数据响应式的原理相关推荐

数据响应式的原理（简单理解为了面试）
首先什么是数据响应式? vue里面的所谓的数据响应式指的是数据变了,视图跟着变那么数据响应式式的原理又是什么呢?(这里浅度剖析一下) 1.就是利用Object.defineProperty数据劫 ...
浏览器缓存机制（优化）
浏览器缓存机制缓存可以说是性能优化中简单⾼效的⼀种优化⽅式了,它可以显著减少⽹络传输所带来的损耗. 对于⼀个数据请求来说,可以分为发起⽹络请求.后端处理.浏览器响应三个步骤.浏览器缓存可以帮助我们 ...
浏览器缓存机制学习总结
浏览器缓存机制学习总结最近在做一个考试系统时,由于经常加载试卷或图片等等静态资源,抽空学习了一下缓存机制,在此记录为什么要使用缓存 1.通过HTTP协议,在客户端和浏览器建立连接时需要消耗时间,而 ...
前端获取浏览器标识_浏览器缓存机制
最近在项目中遇到了 IE浏览器因缓存问题未能成功向后端发送 GET类型请求的bug,然后顺藤摸瓜顺便看了看缓存的知识,觉得有必要总结跟大家分享一下. 在前端开发中,性能一直都是被大家所重视的一点,然 ...
浏览器缓存机制的研究分享
源宝导读:互联网Web应用大行其道的今天,浏览器已经成为Web应用运行的重要平台.而Web应用对浏览器缓存机制的高效利用,可以大幅提升应用性能和用户体验.本文将对浏览器缓存机制进行系统化的梳理,分享我 ...
【转】浏览器缓存机制
最近在做页面分析的时候发现页面F5刷新时,大部分原来已经缓存的内容的状态变成了304,很是不解,原来想好好看看是什么原因的.结果发现园里已经有人分析的很彻底了. 原文地址:浏览器缓存机制浏览器缓存机 ...
浏览器缓存机制，强缓存，弱缓存
目录 web缓存类型浏览器缓存规则: 浏览器缓存的控制 cache-control总结 Expires Last-modified & If-modified-since Etag & ...
前端更新需要清空浏览器缓存_浏览器缓存机制分析及前端缓存清理
浏览器缓存机制分析及前端缓存清理发布时间:2018-06-03 16:56, 浏览次数:857 本文主题:理清浏览器的缓存机制的内部逻辑,并给出避免浏览器缓存的相关解决方案相信很多新手前端发布页面 ...
浏览器缓存机制及一些缓存问题解决方法
参考: http://bbs.csdn.net/topics/330028896 浏览器缓存机制 http://www.docin.com/p-591569918.html 浏览器缓存的一些问题的 ...

最新文章

热门文章