简单理解Vue2的响应式原理 (简单理解DRG付费)

本文目录导航：

• 简单理解Vue2的响应式原理
• 【CSS】深入探究rem响应式原理
• bootstrap怎么实现响应式布局

简单理解Vue2的响应式原理

当使用Vue作为前端开发工具时，一个问题常引起好奇：为什么响应式变量要在data中定义？Vue又是如何察觉并实现这种响应性的？接下来，我们将逐步解析Vue2的响应式机制。

首先，我们通过代码实例来理解基础的响应性实现。

在observer函数中，我们主要针对对象进行操作，利用将对象属性转换为getter和setter，从而在读取和修改时触发相应处理。

这样，即使数据存储在内部对象中，get和set函数也能实时感知变化。

为了解决多对象共享响应性问题，我们利用闭包技术，通过value变量在函数作用域内保持持久，即使函数执行完毕，闭包中的值仍可被后续访问。

当属性值改变时，仅需更新闭包中的值，从而实现响应式。

然而，对于嵌套对象，原observer函数仅限一层响应。

我们需要递归地在defineReactive函数中添加对嵌套对象的监听，确保深度属性的改动也能触发响应。

对于动态变为对象的属性，Vue的方法提供了额外的支持，我们的代码也相应地进行了兼容。

数组的响应性处理有所不同，由于JavaScript的限制，我们需要重新包装数组的原型，监听其方法调用。

在observer函数中，特别处理数组，确保对数组操作的响应性。

总的来说，Vue2的响应式原理涉及对象监听、闭包、递归和原型修改等技术。

虽然这里我们只展示了基础部分，Vue的响应式实现远不止于此，包含了更复杂的对象通信和设计模式。

深入理解Vue2的响应性，需要进一步探索其背后的实现细节。

【CSS】深入探究rem响应式原理

em ：作为font-size单位时，其代表父元素字体大小，作为其他属性（line-height）单位时，代表自身字体大小 例： <div> <div></div> </div> 第二个div的font-size:2em=2 16px=32px line-height:2em=2 32px=64px rem ：作用于非根元素时，相对于根元素字体大小；作用于根元素字体大小时，相对于其初始字体大小(浏览器默认字体大小) 例： html{font-size:2rem} 2 16px=32px p{font-size:2rem} 2 32px=64px 综上，em是为字体和行高而生的，有时候子元素字体就应该与父元素相关。而rem布局的本质是等比例缩放

①让根元素的字体与屏幕宽度产生关系，即随屏幕宽度变化而变化 ②其他元素的大小根据根元素字体生成rem单位，例如： html{font-size:width/100},假设设置根元素字体为屏幕宽度的1%，（注意：屏幕宽度是动态变化的），则屏幕宽度的1%就代表1rem。

假设现在有p元素，我们就可以作如下设置： p{width:5rem;},则p的宽度就为屏幕的5% 现在你明白rem的原理了吧，那如何动态获取屏幕宽度呢？这里我们介绍两种方法： ①通过js设置 =function(){ = /100 +px } 这样就实现了设置根元素的字体大小为屏幕宽度的1% ②vw CSS3引进了vw vh的概念，vw是指视口宽度的1%；vh是指视口高度的1%。

因此我们就可以直接作如下设置： p{width:5vw} vw缺点就是兼容性没有rem好

rem是弹性布局的一种实现方式，强调的是等比例缩放，弹性布局是响应式的一种。响应式布局强调的是不同屏幕要有不同的显示（例如我有行照片墙，在PC iPad 手机都一行展现不同的数目，你可能会想到flex）

①字体不能用rem 字体不是线性关系，设置了根元素字体大小，会影响所有没设置字体大小的元素，因为 字体会继承 字体如何实现响应式：通过body字体的大小来实现，同时所有设置字体的地方都用em，例： body{font-size:16px;} p{font-size:1.2em;} 但是我们一般遇到的设备有手机、iPad、电脑，如果想要实现不同宽度字体显示大小不一样，可以使用媒体查询： @media screen and (min-width:320px){ body{font-size:16px;} } @media screen and (min-width:480px){ body{font-size:18px;} } @media screen and (min-width:960px){ body{font-size:20px;} } ②根元素字体小于浏览器默认字体 假设屏幕宽度是780px，html字体大小780/100=7.8px，小于浏览器默认字体16px，怎么办。

这个时候可以设置html字体大小780/10=78px,则其他元素的参考1rem就是屏幕宽度的1/10，再根据这个参考系来计算。

其实道理是一样的

参看链接： ① Rem布局的原理解析

bootstrap怎么实现响应式布局

响应式布局概念：响应式web布局是让用户通过不同尺寸的浏览器都可以获得良好视觉的一种方法。

是目前比较流行的一种布局方法。

bootstrap响应式布局实现原理：通过CSS3 Media Queries（媒体（设备）查询），媒体查询是让页面内容在不同的媒体环境下运行时可以展示不同的样式（这个样式当然是由我们来书写规定的）。

@media是CSS3中规定的属性，它可以实现针对不同媒体设备来设置不同的样式的目的。

而且就算是在同一设备中它也可以在你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。

应用：Bootstrap主要用到min-width、max-width，以及and语法，用于在不同的分辨率下设置不同的CSS样式。

@media的语法@media mediatype and|not|only (media feature) {CSS-Code;}其中mediatype有print（打印设备）、screen（用于电脑屏幕，平板电脑，智能手机等）、speech（应用于屏幕阅读器等发声设备）；media feature则是用来规定如最大宽度或者最小宽度。

我们来看看bootstrap中布局容器的例子： Bootstrap 需要为页面内容和栅格系统包裹一个 容器。

如下固定宽度布局<div>...</div>或者 流式布局<div>...</div>在bootstrap的css文档中@media属性1591~1605行 @media (min-width: 768px) { { width: 750px; }}@media (min-width: 992px) { { width: 970px; }}@media (min-width: 1200px) { { width: 1170px; }}??以上代码实现了随浏览器宽度的变化container容器的宽度也进行变化。

推荐：bootstrap入门教程