手寫MVVM框架-實現簡單的數據代理

MVVM框架最顯著的特點就是虛擬dom和響應式的數據、我們以Vue為例,分別實現data、computed、created、methods以及虛擬dom。

這一章我們先實現簡單的響應式,修改數據之后在控制臺打印。

我們將該框架命名為MiniVue。

首先我們需要創建MiniVue的類(src/core/index.js)

創建完類之后我們需要創建一個js(src/core/init.js)給這個類的原型添加初始化事件,用來初始化data、computed等內容

然后在類中混入_init 方法并在構造方法中調用_init方法

接著我們來實現一個數據代理的一部分

?當前的代理我們使用Object.defineProperty來實現,這個類方法有一個很大的缺點,就是在定義數組時,通過下標修改數據和新增刪除數據時不會觸發,vue2中的解決方法就是重寫這些方法,這里我們也按照vue2的方式來實現。

我們在src中添加proxy.js,并添加代理方法(src/core/proxy.js)

/*** 代理數據* @param {*} vm * @param {*} data * @param {*} namespace 主要控制當前data是哪一個 name 還是 object.name 訪問跟下面的屬性就是 '' */
export function constructProxy(vm, data, namespace) {let proxyObj = {}// 我們需要判斷data的類型if(data instanceof Array) { // 需要先判斷Array類型} else if (data instanceof Object) { // 判斷Object類型proxyObj = proxyObject(vm, data)} else {throw new Error('data must be an object or array')}return proxyObj
}

在響應式系統里面我們只代理Object和Array類型,如果不是就拋出錯誤

接下來我們來實現Object類型的代理?proxyObject 方法 (src/core/proxy.js)

/*** 代理Object數據* @param {*} vm * @param {*} data */
function proxyObject(vm, data) {// 創建代理對象let proxyObj = {}for(let key in data) {Object.defineProperty(proxyObj, key, {get() {return data[key]},set(newValue) {console.log(`正在修改:${key} 值為:${data[key]}`)data[key] = newValue}})// 為MiniVue的根實例添加屬性Object.defineProperty(vm, key, {get() {return data[key]},set(newValue) {console.log(`正在修改根:${key} 值為:${data[key]}`)data[key] = newValue}})}return proxyObj
}

然后我們在初始化方法中去代理data (src/core/init.js)


/*** 實現init方法* @param {Object} options */
function init(options) {console.log(`options: ${options}`)// 初始化dataif(options && options.data) {this._data = constructProxy(this, options.data, "")}// 初始化computed// 初始化methods// 初始化created// 掛載dom
}

這樣一個簡單的代理就完成了,我們創建一個入口文件并實例化這個MiniVue來看效果

在控制臺查看MiniVue實例的屬性 然后修改_data 中的數據

我們通過圖片內容可以看到:

1.我們可以看到實例中最外層有name 和 description ,這說明我們已經為MiniVue實例的根實例添加了屬性

2.我們可以看到_data 中也添加了屬性

3.修改根節點的name 后 _data.name 也會發生了變化,并且監控到了修改行為

章節總結:

1.創建MiniVue類,創建init.js 給原型添加_init方法

2.在方法中實現data、computed、created、methods以及虛擬dom

3.創建proxy.js, 入口方法中判斷數據類型 如果不是Object 或者 Array 直接拋出異常

4.代理Object類型時, 創建代理對象,并且給實例的根屬性也添加代理

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/web/68105.shtml
繁體地址,請注明出處:http://hk.pswp.cn/web/68105.shtml
英文地址,請注明出處:http://en.pswp.cn/web/68105.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

Redis命令:列表模糊刪除詳解

前言 在Redis中,列表(List)是一種非常常用的數據結構,允許存儲多個有序的元素。然而,在實際應用中,可能會遇到需要刪除列表中符合某種模式的元素的需求。本文將詳細介紹如何在Redis中實現列表的模糊刪除。…

spy-debugger + Charles 調試移動端/內嵌小程序H5

簡介說明: PC端可以用F12進行console等進行調試,但移動端App中使用webview就無法進行實時調試,針對這種情況 1. 安裝 全局安裝 spy-debugger sudo npm install spy-debugger -g // window不用加sudo2. spy-debugger 證書 其實spy-debugg…

【目標檢測】模型驗證:K-Fold 交叉驗證

K-Fold 交叉驗證 1、引言1.1 K 折交叉驗證概述 2、配置2.1 數據集2.2 安裝包 3、 實戰3.1 生成物體檢測數據集的特征向量3.2 K 折數據集拆分3.3 保存記錄3.4 使用 K 折數據分割訓練YOLO 4、總結 1、引言 我們將利用YOLO 檢測格式和關鍵的Python 庫(如 sklearn、pan…

Android studio ternimal 中gradle 指令失效(gradle環境變量未配置)

默認gradle路徑:C:\Users\ylwj.gradle\wrapper\dists\gradle-8.10.2-bin\a04bxjujx95o3nb99gddekhwo\gradle-8.10.2\bin 環境變量-系統環境變量-雙擊path-配置上即可-注意重啟studio才會生效

Axure大屏可視化動態交互設計:解鎖數據魅力,引領決策新風尚

可視化組件/模板預覽:https://8dge09.axshare.com 一、大屏可視化技術概覽 在數據驅動決策的時代,大屏可視化技術憑借直觀、動態的展示方式,已成為眾多行業提升管理效率和優化決策過程的關鍵工具。它能夠將復雜的數據轉化為易于理解的圖形和…

Resnet 改進:嘗試在不同位置加入Transform模塊

目錄 1. TransformerBlock 2. resnet 3. 替換部分卷積層 4. 在特定位置插入Transformer模塊 5. 使用Transformer全局特征提取器 6. 其他 Tips:融入模塊后的網絡經過測試,可以直接使用,設置好輸入和輸出的圖片維度即可 1. TransformerBlock TransformerBlock是Transfo…

PromptSource和LangChain哪個更好

目錄 1. 設計目標與定位 PromptSource LangChain 2. 功能對比 3. 優缺點分析 PromptSource LangChain 4. 如何選擇? 5. 總結 PromptSource 和 LangChain 是兩個在自然語言處理(NLP)領域非常有用的工具,但它們的設計目標和…

MySQL調優02 - SQL語句的優化

SQL語句的優化 文章目錄 SQL語句的優化一:SQL優化的小技巧1:編寫SQL時的注意點1.1:查詢時盡量不要使用*1.2:連表查詢時盡量不要關聯太多表1.3:多表查詢時一定要以小驅大1.4:like不要使用左模糊或者全模糊1.…

langchain教程-12.Agent/工具定義/Agent調用工具/Agentic RAG

前言 該系列教程的代碼: https://github.com/shar-pen/Langchain-MiniTutorial 我主要參考 langchain 官方教程, 有選擇性的記錄了一下學習內容 這是教程清單 1.初試langchain2.prompt3.OutputParser/輸出解析4.model/vllm模型部署和langchain調用5.DocumentLoader/多種文檔…

如何實現網頁不用刷新也能更新

要實現用戶在網頁上不用刷新也能到下一題,可以使用 前端和后端交互的技術,比如 AJAX(Asynchronous JavaScript and XML)、Fetch API 或 WebSocket 來實現局部頁面更新。以下是一個實現思路: 1. 使用前端 AJAX 或 Fetch…

在ubuntu22.04上先部署docker,再編譯安裝kamailio,附詳細操作流程及docker和makailio的版本號

以下是在Ubuntu 22.04上部署Docker并編譯安裝Kamailio的詳細操作流程,包含版本號信息: 一、部署Docker(版本:24.0.7) 更新系統包 sudo apt update && sudo apt upgrade -y安裝依賴工具 sudo apt install -y ap…

大模型中提到的超參數是什么

在大模型中提到的超參數是指在模型訓練之前需要手動設置的參數,這些參數決定了模型的訓練過程和最終性能。超參數與模型內部通過訓練獲得的參數(如權重和偏置)不同,它們通常不會通過訓練自動學習,而是需要開發者根據任…

位運算及常用技巧

涉及位運算的運算符如下表所示: 位運算的運算律: 負數的位運算 首先,我們要知道,在計算機中,運算是使用的二進制補碼,而正數的補碼是它本身,負數的補碼則是符號位不變,其余按位取反…

組合總和III(力扣216)

這道題在回溯的基礎上加入了剪枝操作。回溯方面我就不過多贅述,與組合(力扣77)-CSDN博客 大差不差,主要講解一下剪枝(下面的代碼也有回溯操作的詳細注釋)。我們可以發現,如果我們遞歸到后面,可能集合過小,無法滿足題目…

hot100(8)

71.10. 正則表達式匹配 - 力扣(LeetCode) 動態規劃 題解:10. 正則表達式匹配題解 - 力扣(LeetCode) 72.5. 最長回文子串 - 力扣(LeetCode) 動態規劃 1.dp數組及下標含義 dp[i][j] : 下標i到…

二進制/源碼編譯安裝httpd 2.4,提供系統服務管理腳本并測試

方法一:使用 systemd 服務文件 安裝所需依賴 yum install gcc make apr-devel apr-util-devel pcre-devel 1.下載源碼包 wget http://archive.apache.org/dist/httpd/httpd-2.4.62.tar.gz 2.解壓源碼 tar -xf httpd-2.4.62.tar.gz cd httpd-2.4.62 3.編譯安裝 指定…

Java 中 LinkedList 的底層源碼

在 Java 的集合框架中,LinkedList是一個獨特且常用的成員。它基于雙向鏈表實現,與數組結構的集合類如ArrayList有著顯著差異。深入探究LinkedList的底層源碼,有助于我們更好地理解其工作原理和性能特點,以便在實際開發中做出更合適…

Level2逐筆成交逐筆委托數據分享下載:20250127

Level2逐筆成交逐筆委托數據分享下載 采用Level2逐筆成交與逐筆委托的毫秒級數據,可以揭露眾多有用信息,如莊家策略、偽裝交易,讓所有交易行為透明化。這對于交易高手的策略分析極為有用,對人工智能領域的機器學習也極為合適&…

金蝶云星空k3cloud webapi報“java.lang.Class cannot be cast to java.lang.String”的錯誤

最近在對接金蝶云星空k3cloud webapi時,報一個莫名其妙的轉換異常,具體如下: 同步部門異常! ERP接口登錄異常:java.lang.Class cannot be cast to java.lang.String at com.jkwms.k3cloudSyn.service.basics.DeptK3CloudService.…

【Android】jni開發之導入opencv和libyuv來進行圖像處理

做視頻圖像處理時需要對其進行水印的添加,放在應用層調用工具性能方面不太滿意,于是當下采用opencvlibyuv方法進行處理。 對于Android的jni開發不是很懂,我的需求是導入opencv方便在cpp中調用,但目前找到的教程都是把opencv作為模…