tag 響應式

標籤
貢獻30
102
12:15 PM · Nov 05 ,2025
u_16017771 頭像 kayo5994 頭像 u_15912723 頭像 flydean 頭像 mosquito_612af76da10ff 頭像 yangxiansheng_5a1b9b93a3a44 頭像 liuyue_5e7eb6745e089 頭像 webinfoq 頭像 u_17543943 頭像 u_87634 頭像 u_16213591 頭像 chokcoco 頭像

@響應式 / 博客 RSS 訂閱

kayo5994 頭像

kayo5994 - Vue 響應式原理剖析 —— 從實例化、渲染到數據更新（上）

概況 最近對一個基於 Vue 項目的 Sentry Issue 進行治理時，發現了大量 Issue 都是 Vue 內部邏輯引起的，為了更好地去解決問題，因此也複習了一遍 Vue2 的原理。 相比起 Vue3 更清晰的項目結構和實現，Vue2 中各個部分的實現存在較多的耦合，也導致其邏輯梳理起來較為複雜。其中「響應式」的部分是最為複雜也是最重要的一環，實際項目中大部分的 Issue 也與其相關，如

框架學習 , vue.js , 觀察者模式 , 框架源碼 , 響應式

收藏 評論

kayo5994 頭像

kayo5994 - Vue 響應式原理剖析 —— 從實例化、渲染到數據更新（下）

在上一篇文章中，梳理了 Vue 實例化和渲染的基本邏輯，並且介紹了訂閲者模式這種設計模式，Vue 的「響應式」實現本質上也是一個訂閲者模式，但是由於 Vue 需要考慮更加複雜的情況，並且需要在其中作出大量優化操作，因此具體實現也會複雜很多。通過上面對訂閲者模式的介紹，觀察目標類，觀察者管理類，觀察者是訂閲者模式中的三個基本要素，Vue 內部也會有對應的實現，下面通過更詳細地説明 Vue「響應式」的

框架學習 , vue.js , 觀察者模式 , 框架源碼 , 響應式

收藏 評論

y0i1w 頭像

🦄Y0i1w - 百行代碼實現 Vue 2 響應式

百行代碼實現 Vue 2 響應式 如果覺得可以就關注一下公眾號吧~

vue.js , 原理 , 響應式

收藏 評論

u_12195 頭像

jojo - Vue3核心之響應式_6月月更_Python研究所

文章目錄 Vue 3 完全指南：響應式原理、組合式 API 與實戰優化 一、Vue 3 核心原理深度解析 1.1 響應式系統：從 Object.defineProperty 到 Proxy 1.2 虛擬 DOM 與 Diff 算法優化 1.3 組件渲染流程 二、組合式 API

API , Vue , Css , 響應式 , 前端開發 , HTML

收藏 評論

u_15912723 頭像

讓世界更美好 - 巧用CSS三角函數：解鎖動態佈局新維度

在傳統網頁設計中，我們常常需要依賴JavaScript來實現複雜的動態佈局效果。但隨着現代CSS的發展，尤其是CSS Values and Units Level 4規範中引入的sin()、cos()和tan()等數學函數，我們現在可以直接使用純CSS創建出更加智能和靈活的佈局方案。 為什麼要在佈局中使用三角函數？ 三角函數能夠描述元素間的相對位置關係和週期性變化。通

yyds乾貨盤點 , 三角函數 , Css , 響應式 , 前端開發 , HTML

收藏 評論

u_16017771 頭像

wangfang呀 - Vue 的 provide / inject：讓數據在組件樹裏“隱形穿梭”

哈嘍，各位小夥伴，歡迎來到我是wangfang呀的博客！我是我是wangfang呀，雖然還在編程的“菜鳥”階段，但我已經迫不及待地想和大家分享我一路上踩過的坑和學到的小技巧。如果你也曾為bug頭疼，那麼你來對地方了！今天的內容希望能夠給大家帶來一些靈感和幫助。 前言 場景痛點 祖孫隔着十幾層，props drilling 傳得人崩潰？

默認值 , 後端開發 , JAVA , 響應式 , ide

收藏 評論

icecreamlj 頭像

一顆冰淇淋 - 通過Proxy和Reflect實現vue的響應式原理

vue3通過Proxy+Reflect實現響應式，vue2通過defineProperty來實現 Proxy Proxy是什麼 Proxy是ES6中增加的類，表示代理。 如果我們想要監聽對象的操作過程，可以先創建一個代理對象，之後所有對於對象的操作，都由代理對象來完成，代理對象可以監聽到我們對於原對象進行了哪些操作。 Proxy怎麼使用 Proxy是一個類，通過new關鍵字創建對象，傳入原對

vue.js , ecmascript-6 , 響應式 , 前端 , Javascript

收藏 評論

u_15469972 頭像

mb61c46a7ab1eee - Vue 3 的watchEffect函數：介紹watchEffect的基礎用法和特點

前端摸魚匠 沒有好的理念，只有腳踏實地！ 文章目錄 一、初識watchEffect：響應式編程的利器 1.1 什麼是watchEffect 1.2 watchEffect的核心特點 1.3 與watch的初步對比

數據源 , 數據 , 響應式 , jquery , 前端開發

收藏 評論

u_17072679 頭像

前端小巷子 - Vue3 響應式革命

Vue3 響應式革命 Vue2 驗證了「響應式驅動視圖」的威力，卻在數組索引、屬性增刪等場景留下無法追蹤的死角。Vue3 並未縫縫補補，而是把整座大廈的地基——數據攔截機制——徹底替換為 Proxy。本文沿着「攔截 → 創建 → 收集」三條鏈路，帶你讀懂這一次底層躍遷的全部細節。 一、攔截：從點到面的語義升級 1.Vue2 的「定點攔截」 Object.definePro

數組 , Vue , 響應式 , 前端開發 , Javascript

收藏 評論

flydean 頭像

flydean - netty系列之:netty初探

簡介 我們常用瀏覽器來訪問web頁面得到相關的信息，通常來説使用的都是HTTP或者HTTPS協議，這些協議的本質上都是IO，客户端的請求就是In，服務器的返回就是Out。但是在目前的協議框架中，並不能完全滿足我們所有的需求。比如使用HTTP下載大文件，可能需要長連接等待等。 我們也知道IO方式有多種多樣的，包括同步IO，異步IO，阻塞IO和非阻塞IO等。不同的IO方式其性能也是不同的，而ne

netty , JAVA , reactivex , 響應式 , nio

收藏 評論

liane 頭像

Liane - Vue3-Vue2實現數據響應式的區別

Vue2實現響應式的核心： 對象：通過defineProperty對對象的已有屬性值的讀取和修改進行劫持（監視/攔截） 數組：通過重寫數組更新數組一系列更新元素的方法來實現元素修改的劫持 let data = { name: 'Liane', age: 18 } //模擬組件實例 let _this = {} //Object.defaineProperty()用法 for(le

vue.js , 代理 , defineproperty , vue3 , 響應式

收藏 評論

Itstars 頭像

新茶十九 - Vue 3 深入瞭解，那些很少有人知道的實用特性和技巧

1. 深層響應式控制 shallowRef - 淺層 Ref import { shallowRef, triggerRef } from 'vue' const state = shallowRef({ count: 0, nested: { value: 1 } // 這個變化不會被自動追蹤 }) // 只有直接賦值會觸發更新 state.value = { c

vue.js , 響應式 , 前端開發 , ide , Javascript

收藏 評論

u_16017771 頭像

wangfang呀 - Vue 響應式原理：你以為的“頁面自己動”，其實幕後全是黑科技！

哈嘍，各位小夥伴，歡迎來到我是wangfang呀的博客！我是我是wangfang呀，雖然還在編程的“菜鳥”階段，但我已經迫不及待地想和大家分享我一路上踩過的坑和學到的小技巧。如果你也曾為bug頭疼，那麼你來對地方了！今天的內容希望能夠給大家帶來一些靈感和幫助。 前言   第一次寫 Vue 時，很多人都會驚歎：“咦，data 裏一改值，頁面就自己刷新了！”。

數組 , Vue , 後端開發 , JAVA , 響應式

收藏 評論

u_16864929 頭像

瘋狂迪霸戈 - Vue2 與 Vue3 區別

1. 架構設計差異 Vue2 的 Options API Vue2 採用 Options API 組織代碼，通過不同的選項（data、methods、computed 等）來定義組件： // Vue2 Options API export default { data() { return { count: 0, message: 'Hel

vue.js , API , 響應式 , 前端開發 , Javascript

收藏 評論

qinglong_62898aa51988d 頭像

清隆 - 細説Vue2的響應式原理

什麼是響應式 在 Vue 開發中，我們修改了數據，所有用到這份數據的視圖都會更新。 響應式概括來説就是數據驅動視圖的自動更新 舉個例子，本文也將以下面這段代碼來講解與實現響應式 HTML div id="app" {{ obj.message }} /div JS let data = { obj: { message: 'Hello Vue!', }, } new Vue(

vue2 , vue.js , 響應式 , 前端 , Javascript

收藏 評論

u_16213651 頭像

mob64ca14089531 - 3D多邊形背景動畫

arwes作為未來主義科幻UI框架，其背景動畫系統為界面注入了獨特的科技感與動態美學。本文將深入解析三大核心背景組件——Dots（點陣）、GridLines（網格線）和MovingLines（動態線條）的實現原理與應用方法，幫助開發者快速構建沉浸式視覺體驗。 背景動畫系統架構 arwes背景動畫基於Canvas API實現，通過@arwes/bgs核心包提供基礎繪製能

響應式 , ci , 前端開發 , Javascript , ui

收藏 評論

_607c00baa52ff 頭像

懟懟 - 【vue】MVVM、雙向綁定

MV*模式 MVC MVP MVVM 1 MVC 一個應用分為三部分 模型 (Model)：數據保存 應用程序的數據、控制與修改這些數據的業務規則 Model改變時：通知View，為View提供查詢Model相關狀態的能力，為Controller提供訪問封裝在Model內部的應用程序功能的能力。 視圖 (View)：用户界面

vue.js , 雙向綁定 , 代理 , mvvm , 響應式

收藏 評論

liuyue_5e7eb6745e089 頭像

劉悦的技術博客 - 天人合一物我相融，站點升級漸進式Web應用PWA(Progressive Web Apps)實踐

原文轉載自「劉悦的技術博客」https://v3u.cn/a_id_216 PWA（Progressive web apps，漸進式 Web 應用）使用現代的 Web API 以及傳統的漸進式增強策略來創建跨平台 Web 應用程序，説白了，PWA可以讓我們的站點以原生APP的形式運行，但相比於安裝原生APP應用，訪問PWA顯然更加容易和迅速，還可以通過鏈接來分享PWA應用。 有許多知名的網絡平台已

pwa , 響應式設計 , tornado , 響應式 , 前端

收藏 評論

noearorg 頭像

noear - Solon Web 也支持響應式開發了？!

"solon.web.flux" 是 solon v2.3.6 新推出的生態插件，為 solon web 提供響應式接口支持 (io.projectreactor) 。為什麼叫這個名呢？因為用户羣裏投票説，這個名大家一看就知道是幹啥的！ 這個插件，支持所有 solon 已適配的 http server 插件，包括 jdk 自帶的 sun http server。情況如下: 插件

框架 , JAVA , 響應式 , Web

收藏 評論

u_15912723 頭像

讓世界更美好 - 初識Vue.js核心

一、Vue.js是什麼？ Vue.js（通常簡稱為Vue）是一款漸進式JavaScript框架，用於構建用户界面。由尤雨溪於2014年創建，Vue以其輕量級、易上手、靈活性強的特點迅速成為前端開發的主流選擇之一。 Vue的核心設計理念 漸進式框架：可以逐步採用，從簡單的頁面增強到複雜的單頁應用 聲明式渲染：通過簡潔的模板語法聲明式地將數據渲染到

生命週期 , Vue , 響應式 , 前端開發 , Javascript

收藏 評論

yangxiansheng_5a1b9b93a3a44 頭像

羊先生 - tailwindcss一個響應式組件只用了50行代碼不到，我決定在團隊推廣使用它

在寫一個網站組件，我決定使用tailwindcss,究竟它的魅力在何處，start有73k，然後看到它代碼更新頻率還是屬於正常維護的 發現它的中文文檔也很友好tailwindcss.中文文檔 我寫了個組件，一個響應的組件，整行代碼不足50行左右，看下效果如下 代碼如下，完整代碼不足50行左右 div class="px-3 py-3 rounded-[5px] bg-white mb-4 o

tailwind-css , tailwindcss , Css , 響應式 , html5

收藏 評論

t1duz 頭像

胡蘿蔔會飛 - vue響應式原理（底層）超詳細的解讀，手寫響應式原理

vue響應式原理 關於vue響應式原理（底層）原理，今天和大家一起探討研究，結尾附上手敲代碼以及git下載地址，如有不足或不準確請及時留言指正，期待共同進步～ 本文將採用webpack環境進行編寫,項目目錄如下。 index.js: 入口文件 arrar.js: 數組文件 def.js: 定義一個對象屬性 defineReactive.js: 給對象data的屬性key定

vue.js , 響應式 , 前端 , Javascript

收藏 評論

webinfoq 頭像

破曉L - 現代 JavaScript 框架工作原理你瞭解多少？

讓我們通過構建一個現代 JavaScript 框架來了解其工作原理。 我的日常工作是開發 JavaScript 框架 (LWC)。雖然我已經在這個框架上工作了近三年，但我仍然覺得自己是個門外漢。當我閲讀大型框架領域的最新動態時，我常常會被自己不知道的事情壓得喘不過氣來。 不過，瞭解某些東西如何工作的最好方法之一就是自己動手創建。另外，我們還得讓那些 “days since last JavaScr

react , vue.js , 響應式 , 前端 , Javascript

收藏 評論

u_17543943 頭像

mb68e64068cf586 - uniapp開發鴻蒙：數據綁定與狀態管理實戰

uniapp開發鴻蒙：數據綁定與狀態管理實戰 引入：響應式數據的重要性 在uniapp開發中，數據綁定與狀態管理是構建複雜應用的核心。Vue3的組合式API為我們提供了更靈活、更強大的響應式系統，而Pinia作為新一代狀態管理工具，讓跨組件、跨頁面的數據共享變得更加簡單高效。今天，我們將深入探討uniapp在鴻蒙平台下的數據綁定與狀態管理方案。 一、Vue3組合

移動開發 , 數據 , 響應式 , 基本類型 , html5

收藏 評論