- 综合排序
- 最热优先
- 最新优先
- 来自专栏河湾欢儿的专栏
3.响应式
响应式布局 <link rel="stylesheet" href="css1.css" media="screen and (min-width:800px)"/> <link rel="stylesheet .css" media="screen and (min-width:600px) and (max-width:800px)"/> <link rel="stylesheet" href="css<em>3</em>. css" media="screen and (max-width:400px)"/> 横屏portrait竖屏landscape <link rel="stylesheet" href="css<em>3</em>.
37820发布于 2018-09-06 - 来自专栏人生代码
Vue 3 响应式基础
响应式基础 声明响应式状态 reactive 相当于 Vue 2.x 中的 Vue.observable() API ，为避免与 RxJS 中的 observables 混淆因此对其重命名。 该 API 返回一个响应式的对象状态。该响应式转换是“深度转换”——它会影响嵌套对象传递的所有 property。 Vue 中响应式状态的基本用例是我们可以在渲染期间使用它。 因为依赖跟踪的关系，当响应式状态改变时视图会自动更新。 这就是 Vue 响应性系统的本质。当从组件中的 data() 返回一个对象时，它在内部交由 reactive() 使其成为响应式对象。 创建独立的响应式值作为 refs 想象一下，我们有一个独立的原始值 (例如，一个字符串)，我们想让它变成响应式的。 访问响应式对象 Ref 展开仅发生在被响应式 Object 嵌套的时候。
79430发布于 2020-11-11 - 来自专栏若川视野
Vue3响应式原理
本文结构 - 关于Vue3 - Vue2响应式原理回顾 - Vue3响应式方案 - Vue3响应式原理 - 手写mini版Vue3响应式 本文共计：2349字2图 ，以下正文探讨一下Vue3响应式原理 Vue2 响应式原理回顾 对象响应化：遍历每个key，通过 Object.defineProperty API定义getter，setter // 伪代码 function 递归，消耗大 新增/删除属性，需要额外实现单独的API 数组，需要额外实现 Map Set Class等数据类型，无法响应式 修改语法有限制 vue3响应式方案 使用ES6的 `Proxy`[10 vue3响应式原理图 通过 effect 声明依赖响应式数据的函数cb ( 例如视图渲染函数render函数)，并执行cb函数，执行过程中，会触发响应式数据 getter 在响应式数据 getter中进行 结构： targetMap: WeakMap{ target:Map{ key: Set[cb1,cb2...] } } 手写vue3响应式 大致结构 // mini-vue3.js
56520发布于 2020-12-15 - 来自专栏自律神仙ScarSu
Vue3响应式原理
本文结构 - 关于Vue3 - Vue2响应式原理回顾 - Vue3响应式方案 - Vue3响应式原理 - 手写mini版Vue3响应式 本文共计：2349字2图 尤大 - 聊聊 Vue.js 3.0 Beta 官方直播[8] 2018 VueConf 杭州 尤大关于Vue3的演讲视频[9] 拉到文章底部找到上述链接，以下正文探讨一下Vue3响应式原理 Vue2 递归，消耗大 新增/删除属性，需要额外实现单独的API 数组，需要额外实现 Map Set Class等数据类型，无法响应式 修改语法有限制 vue3响应式方案 使用ES6的 `Proxy`[10 vue3响应式原理图 通过 effect 声明依赖响应式数据的函数cb ( 例如视图渲染函数render函数)，并执行cb函数，执行过程中，会触发响应式数据 getter 在响应式数据 getter 结构： targetMap: WeakMap{ target:Map{ key: Set[cb1,cb2...] } } 手写vue3响应式 大致结构 // mini-vue3.js
97631发布于 2020-10-22 - 来自专栏编程技术分享
Vue3 响应式原理
reactive() reactive() 的作用主要是将目标转化为响应式的 proxy 实例。 浅层响应的 proxy 实例，即一个对象只有第一层的属性是响应式的。 只读的浅层响应的 proxy 实例。 浅层响应的 proxy 实例是什么？ effect.ts 文件 等把 effect.ts 文件讲解完，响应式模块基本上差不多结束了。 effect() effect() 主要和响应式的对象结合使用。 示例 仅看代码和文字，是很难理解响应式数据和 track() trigger() 是怎么配合的。 Vue3 系列文章 Vue3 响应式原理 Vue3 模板编译原理 参考资料 Vue3 中的数据侦测 vue3响应式源码解析-Reactive篇 vue3响应式系统源码解析-Effect篇
1.2K30发布于 2020-09-28 - 来自专栏河湾欢儿的专栏
css3响应式布局
响应式布局 <link rel="stylesheet" href="css1.css" media="screen and (min-width:800px)"/> <link rel="stylesheet .css" media="screen and (min-width:600px) and (max-width:800px)"/> <link rel="stylesheet" href="css<em>3</em>. css" media="screen and (max-width:400px)"/> 横屏portrait竖屏landscape <link rel="stylesheet" href="css<em>3</em>. media screen and (min-width: 400px) and (max-width: 800px){} @media screen and (max-width: 400px){} Css<em>3</em>分栏布局
1.5K20发布于 2018-09-06 - 来自专栏一名前端开发
vue3响应式原理
响应式原理 在说响应式原理之前,需要理解一些重要的api proxy 1.什么是proxy 用于修改某些操作的默认行为,在目标对象之前架设一层“拦截”，可以对外界的访问进行过滤和改写。 vue3响应式原理的实现 通过proxy代理我们所需要的对象,reactive()创建一个响应式对象或数组,查看源码关于reactive()方法 //判断是否为object function isObject 这样的好处是只有访问内部属性才会进行深层响应式，减少性能消耗。 将响应式对象属性赋值或解构（注意：解构出来是基本数据类型时，失去响应式，解构出来是引用数据类型时，不会失去响应式）到本地，或将该属性传入一个函数时，会失去响应式。 用ref定义响应式变量 reactive的响应式不能作用于所有值类型,因此,vue提供了ref来允许定义所有值类型的响应式.
66730编辑于 2023-10-26 - 来自专栏前端笔记ing
Vue3 响应式语法糖
ref 与 响应式变量（$ref）响应式的变量可以像普通变量那样被访问和重新赋值，但这些操作在编译后都会变为带 .value 的 ref。 响应式对象存在解构丢失响应性的问题，而 ref 需要到处使用 .value 则感觉很繁琐.Vue 响应式语法糖 提供了一个 $ref() 方法是一个编译时的宏命令。 那么此时可以使用 $() 宏来将现存的 ref 转换为响应式变量。 value ，为了保持响应性，通过 props.x 来访问 prop ，得到的变量将不是响应式的、也不会更新。 保持响应式当 一个函数期望接收一个 ref 对象为参数时，我们可以这样写$$() 的效果就像是一个转义标识：$$() 中的响应式变量不会追加上 .value。
60000编辑于 2023-11-05 - 来自专栏大飞的部落阁
Vue3核心之响应式
1、前言 已经掌握了vue3入门的同学，在实际学习和开发中用的最多的概念肯定会有响应式，今天我们就一起来复习下关于vue3的响应式用法。 2、选项式Api和组合式Api 2.1、选项式Api 熟悉vue2的同学对选项式Api很熟悉了，vue也兼容选项式Api，在vue3中选项式Api的代码格式如下： <template> <button 组合式Api要求我们要将响应式的变量声明在setup函数中，setup函数是一个专门用于组合式Api的钩子函数。而且我们需要借助reactive函数来创建响应式的对象。 3、更多声明响应式对象的方法 前面我们已经了解了data方法（选项式Api中使用）、reactive（组合式Api中使用）两种不同的声明响应式对象的方式，那还有其他方式吗？ 鉴于这种情况，vue3引入了ref方法来帮助开发者创建任意类型的响应式对象。
90130编辑于 2022-06-17 - 来自专栏Yui编程知识
Vue3入门-声明式渲染+数据响应式
数据响应式 数据响应式就是数据变，界面自动变，无需手动操作 DOM。 响应式函数reactive 在先前的样例中，setup中默认返回的数据是不具备响应式特性的。 3.1 如何使用 从Vue中解构出reactive函数 在setup函数中使用reactive函数，并传入一个普通对象，返回一个响应式对象 在最后setup函数中返回一个响应式对象。 响应式函数ref ref的作用和reactive类似，但是参数不限制类型。 <! 总结 声明式渲染和数据响应式都是Vue3的重要特点，需要熟练掌握。 往期内容： Vue3入门-必会前置知识-CSDN博客
25610编辑于 2025-07-15 - 来自专栏Web项目聚集地
3分钟理解响应式布局
前言 总听别人说响应式布局，觉得是一个很高大上的东西，近日做的一个项目需要适配不同的屏幕尺寸，于是就简单研究了一下 Web响应式布局，其实原理很简单，下面就简单整理了一下分享给大家。 什么是响应式布局 ? [图片来源 caktusgroup] 如图就是响应式布局的体现，简单的说响应式布局就是一个网站能够兼容多个终端，而不是为每个终端做一个特定的版本。 比如 头条他做的就不是响应式布局，他通过实时检测设备信息，在 www.toutiao.com和 m.toutiao.com两个网站之间切换。 而最近比较火的开发者社区 segmentfault.com就是响应式布局，页面的布局会会随着你拖动浏览器窗口大小变化而变化。 响应式布局没有绝对的话好与坏，需要根据网站的性质来确定，比如 toutiao的页面元素非常多，页面需要包括所有屏幕尺寸的样式显示不是很好操作，然而 segmentfault页面元素较少，反而放在一起方便维护
1.1K20发布于 2018-12-06 - 来自专栏柠檬先生
css3响应式布局设计——回顾
响应式设计是在不同设备下分辨率不同显示的样式就不同。 media 属性用于为不同的媒体类型规定不同的样式。根绝浏览器的宽度和高度重新渲染页面。
1.9K70发布于 2018-01-22 - 来自专栏给永远比拿愉快
BootStrap3如何禁止响应式布局
BootStrap3官网上对其说明如下： 禁止响应式布局有如下几步： 移除 此 CSS 文档中提到的设置浏览器视口（viewport）的标签：<meta>。 但是最终效果还不是特别好，不过大体上算禁止响应式布局了！
2K30发布于 2019-01-25 - 来自专栏epoos.com
响应式
相关链接 vue2深入响应式原理
2.7K30编辑于 2022-06-06 - 来自专栏飞鸟的专栏
vue3响应式数据的判断
在Vue 3中，你可以使用一些方法来判断数据是否是响应式的。Vue 3提供了isReactive、isRef和isReadonly等函数来帮助你进行判断。 isReactive函数isReactive函数用于判断一个对象是否是响应式的。如果对象是通过reactive函数创建的响应式对象，则返回true，否则返回false。 然后，我们使用isReactive函数来判断data对象是否是响应式的。由于data是通过reactive函数创建的响应式对象，因此isReactive(data)返回true。 然后，我们创建一个普通的对象plainData，并使用isReactive函数来判断它是否是响应式的。 由于plainData不是通过reactive函数创建的响应式对象，所以isReactive(plainData)返回false。
1.1K50编辑于 2023-05-22 - 来自专栏Cellinlab's Blog
学习 Vue 3 全家桶 - 响应式机制
响应式一直都是 Vue 的特色功能之一。 # 响应式原理 Vue 中用过三种响应式解决方案，分别是 defineProperty、Proxy 和 value setter。 delete obj.count; console.log(double); // 4 # Proxy Vue 3 的响应式机制是基于 Proxy (opens new window) 实现的，其重要意义在于它解决了 Vue 3 的 reactive 函数可以把一个对象变成响应式数据，而 reactive 就是基于 Proxy 实现的。 中还有另一个响应式实现的逻辑，就是利用对象的 get 和 set 函数来进行监听，这种响应式的实现方式，只能拦截某一个属性的修改，这也是 Vue 3 中 ref 这个 API 的实现。 # Vueuse VueUse (opens new window) 趁着这一波 Vue 3 的更新，跟上了响应式 API 的潮流。
34420编辑于 2023-05-17 - 来自专栏前端web技术
带你深入Vue3响应式系统
一、初识响应性Vue3 中可以通过响应式 API 来创建响应式对象, 之前介绍过一些响应式 API, 如 ref、computed、reactive、shallowRef、shallowReactive 这就是 Vue3 响应式系统做的事情. 我们一般遇到上面这种类型的问题, 首先就会想到发布-订阅的设计模式, Vue3 也采用了类似的模式, 不过有一些自己的特点, 先来看几个概念性的东西. 中, 例如有如下表达式时, const d = ref(3); // 创建了一个响应式对象const c = computed(() => d.value + 2); // 有响应式对象计算我们可以对照着理解一下 上面说了, Vue3 中是通过劫持响应式对象的 set 来更新值, 通过劫持响应式对象的 get 来获取值. 先有个大概理解, 后面会详细说到 3、 当前副作用在 Vue3 中有很多地方都需要用到响应式的副作用, 例如我们定义的不同页面和组件, 这些都依赖于响应式数据, 所以在 setup 中会调用 setupRenderEffect
1.6K60编辑于 2022-12-09 - 来自专栏前端web技术
从 Proxy 到 Vue3 响应式
前言最近想再回顾下 Proxy 这一部分的内容, 顺便也看看他的应用场景, 刚好在 Vue3 的响应式 API 中有使用, 所以就结合着一起复习下, 顺便总结记录一番. 是如何使用的二、Vue3中的响应式众所周知, Vue3 使用 Proxy 替代了 Object.defineProperty 来做响应式. 而到了 Vue3 使用 Proxy 带来了全新的响应式解决方案, 我们来看看其中的核心: 响应式API (官网传送), 篇幅原因, 先介绍一部分1、reactive、readonly、shallowReactive 对于 Symbol 上的一些内置方法的调用.对于 Vue3 中的 ref 对象, 这里说的不是模版引用的 ref, 是响应式的 ref, 一般是用响应式代理属性的 __v_isRef 标识位来区分, 一般通过 set是响应式对象值新增响应式对象值变化只读代理readonlySet否否否浅层响应式代理shallowSet否响应式对象值新增响应式对象值变化浅层只读代理readonlySet否否否 3) deleteProperty
1.5K81编辑于 2022-12-05 - 来自专栏404
响应式
响应式 <script> function init() { var width = document.documentElement.clientWidth document.documentElement.style.fontSize .child-2 { background-color: green; } .child-3 .child-2 { background-color: green; } .child-3 .child-2 { background-color: green; } .child-3 : red; } .child-2 { background-color: green; } .child-3
2.1K20编辑于 2022-04-25 - 来自专栏神光的编程秘籍
手写 Vue3 响应式系统：实现 computed
上篇文章我们实现了基本的响应式系统，这篇文章继续实现 computed。 首先，我们简单回顾一下 响应式系统的核心就是一个 WeakMap --- Map --- Set 的数据结构。 WeakMap 的 key 是原对象，value 是响应式的 Map。这样当对象销毁的时候，对应的 Map 也会销毁。 上篇文章我们按照这样的思路实现了一个比较完善的响应式系统，然后今天继续实现 computed。 这是因为返回的 computed 值并不是一个响应式的对象，需要把它变为响应式的，也就是 get 的时候 track 收集依赖，set 的时候触发依赖的执行： 我们再试一下： 现在 computed 此外，computed 的 value 并不是响应式对象，我们需要单独的调用下 track 和 trigger。 这样，我们就实现了完善的 computed 功能，vue3 内部也是这样实现的。
67310编辑于 2022-11-11
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号