在过去几年中，响应式已成为事实上的标准。所有主要框架都实现了一些响应式模型。其中最大的一个甚至被称为React。在本文中，我们将了解如何仅使用几行JavaScript编写简单的反应式 UI 。

我喜欢Vue 3的Composition API，它提供了两种方法来为Vue组件添加响应式状态：ref和reactive。当你使用ref时到处使用.value是很麻烦的，但当你用reactive创建的响应式对象进行重构时，也很容易丢失响应性

它是 Vue.js 的核心特性之一，一个数据驱动的视图，我们修改数据视图来响应更新，非常优雅。Vue2.x 使用 Object.defineProperty() 实现，而 Vue3.x 使用 Proxy 实现。 我们先来看看2.x的实现。

Vue3 的响应式原理依赖了 Proxy 这个核心 API，通过 Proxy 可以劫持对象的某些操作。如上例子，我们用 Proxy 代理了 Obj 对象的属性访问、属性赋值、in 操作符

今天，遇到了一个很有意思的问题，一名群友问我，仅仅使用 CSS，能否实现这样一种响应式的布局效果；伪元素的这个特性其实可以应用在日常效果中的非常多个地方，之前也有多篇文章提到过。

一般来说，我们使用 height:100vh 进行全屏布局，这是一种很方便的响应式方法。但当在实际设备上测试我们的设计时，我们遇到了几个问题。

在Javascript中，我们知道“万物皆对象”，而对象的实际语义又是由对象的内部方法来指定的。所谓内部方法，指的是在对一个对象进行操作时在引擎内部调用的方法，这些方法对使用者是不可见的

响应系统是Vue.js的重要组成部分，我们要实现一个简易的响应式系统，必须先要了解什么是响应式数据和副作用函数。在实现过程中，我们需要考虑如何避免无限递归，为什么需要嵌套副作用函数

对象属性的添加和删除无法被 Object.defineProperty 监听，正如前文所述，Vue 的数据响应式基于 Object.defineProperty 实现，因此也受限。

在以前网站通常都是为了电脑大屏幕展示而设计，如果用手机访问，只能在巴掌大的屏幕里看缩小版的页面。随着移动互联网的到来，使用手机移动端的用户越来越多，所以适配移动端就很重要了，之前我们分别写2套代码来实现

vue2 中的常规写法；vue2 中的不太常规写法,但用得舒服.(大概用法还是一样,只是传递的值变成 this--> 整个实例)；vue2 + ts (因为ts之前没用过的话确实不知道怎么用,所以示例一下)

根据日常开发经验及网上相关资料，用简单通俗易懂的大白话分析自适应跟响应式的区别。注：本文只分析自适应跟响应式的区别以及了解其由来的背景，不在于讨论其使用的方法

提到vue，大家肯定会想到双向数据绑定，数据驱动视图，虚拟DOM，diff算法等等这些概念。在使用vue的时候，会感觉到它的数据双向绑定真的很爽啊。会不会在你用了很长时间后，会好奇到，这个是如何实现的？

现在的设备很多，有PC、iPad、手机、智能手表、智能电视。如果没有响应式布局，那么电脑网页在手机或者ipad上显示，是体验非常差，操作不方便，视觉疲劳的，所以我们开发网页要做好响应式布局。

如今开发一个网站不是响应式都不好意思拿出来，那么作为响应式中的重要一环「响应式图片」你又是如何解决的呢？网站的平均加载已经到了近 2MB 并在不断地增加中