watch在Vue.js中的使用方法詳解
這篇文章主要介紹了Vue.js 中的 $watch使用方法,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟著小編過來看看吧
這兩天學習了Vue.js 中的 $watch這個地方知識點挺多的,而且很重要,所以,今天添加一點小筆記。
github 原始碼
Observer, Watcher, vm 可謂Vue 中比較重要的部分,偵測資料變動後視圖更新的重要環節。下面我們來看看 如何實作一個簡單的 $watch 功能,當然Vue 中使用了許多最佳化手段,在本文中暫不一一討論。
範例:
// 创建 vm let vm = new Vue({ data: 'a' }) // 键路径 vm.$watch('a.b.c', function () { // 做点什么 })
先闡明在這個demo 以及Vue 中,它們的關係:
vm 呼叫$watch 後,首先呼叫observe 函數創建Observer 實例觀察數據,Observer 又創建Dep , Dep 用來維護訂閱者。然後建立 Watcher 實例提供 update 函數。一旦資料變動,就層層執行回呼函數。
Observer和observe
遞歸呼叫 observe 函式建立 Observer。在建立 Observer 的過程中,使用 Object.defineProperty() 函數為其新增 get set 函數, 並建立 Dep 實例。
export function observe (val) { if (!val || typeof val !== 'object') { return } return new Observer(val) }
function defineReactive (obj, key, val) { var dep = new Dep() var property = Object.getOwnPropertyDescriptor(obj, key) // 是否允许修改 if (property && property.configurable === false) { return } // 获取定义好的 get set 函数 var getter = property && property.get var setter = property && property.set var childOb = observe(val) Object.defineProperty(obj, key, { enumerable: true, configurable: true, get: () => { var value = getter ? getter.call(obj) : val // 说明是 Watcher 初始化时获取的, 就添加订阅者 if (Dep.target) { dep.depend() if (childOb) { childOb.dep.depend() } // if isArray do some.... } return value }, set: (newVal) => { var value = getter ? getter.call(obj) : val if (value === newVal) { return } if (setter) { setter.call(obj, newVal) } else { val = newVal } childOb = observe(newVal) dep.notify() } }) }
你可能會疑問 Dep.target 是個什麼鬼?
以上是watch在Vue.js中的使用方法詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!

熱AI工具

Undresser.AI Undress
人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool
免費脫衣圖片

Clothoff.io
AI脫衣器

Video Face Swap
使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱門文章

熱工具

記事本++7.3.1
好用且免費的程式碼編輯器

SublimeText3漢化版
中文版,非常好用

禪工作室 13.0.1
強大的PHP整合開發環境

Dreamweaver CS6
視覺化網頁開發工具

SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)

你可能遇到過智慧型手機螢幕出現綠色線條的問題,即使沒看過,也一定在網路上看過相關圖片。那麼,智慧手錶螢幕變白的情況你有遇見過嗎? 4月2日,CNMO從外媒了解到,一名Reddit用戶在社群平台上分享了一張圖片,展示了三星Watch系列智慧手錶螢幕變白的情況。該用戶寫道:"我離開時正在充電,回來時就這樣了,我嘗試重啟,但重啟過程中屏幕還是這樣。"三星Watch智能手錶屏幕變白這位Reddit用戶並未指明這款智能手錶的具體型號。不過,從圖片上看,應該是三星Watch5。此前,另一位Reddit用戶也報告

Ace 是一個用 JavaScript 寫的可嵌入程式碼編輯器。它與 Sublime、Vim 和 TextMate 等原生編輯器的功能和效能相符。它可以很容易地嵌入到任何網頁和 JavaScript 應用程式中。 Ace 被維護為Cloud9 IDE的主要編輯器 ,並且是 Mozilla Skywriter (Bespin) 專案的繼承者。

在當今前端開發中,Vue.js 已經成為了一個非常流行的框架。隨著 Vue.js 的不斷發展,單元測試變得越來越重要。今天,我們將探討如何在 Vue.js 3 中編寫單元測試,並提供一些最佳實踐和常見的問題及解決方案。

在Vue.js中,開發人員可以使用兩種不同的語法來建立使用者介面:JSX語法和範本語法。這兩種文法各有優劣,以下就來探討它們的差異和優劣勢。

在我們使用高德地圖的時候,官方給我們推薦了很多案例,demo,但是這些案例都是使用原生方法接入,並沒有提供vue或者react 的demo,vue2的接入網上也很多人都有寫過,以下這篇文章就來看看vue3怎麼使用常用的高德地圖api,希望對大家有幫助!

在實際開發專案過程中有時候需要上傳比較大的文件,然後呢,上傳的時候相對來說就會慢一些,so,後台可能會要求前端進行文件切片上傳,很簡單哈,就是把比如說1個G的檔案流切割成若干個小的檔案流,然後分別請求介面傳遞這個小的檔案流。

我們都知道監聽器的作用是在每次響應式狀態發生變化時觸發,在組合式API中,我們可以使用watch()函數和watchEffect()函數,當你更改了響應式狀態,它可能會同時觸發Vue組件更新和偵聽器回調。預設情況下,使用者建立的偵聽器回調,都會在Vue元件更新之前被呼叫。這表示你在偵聽器回呼中存取的DOM將是被Vue更新之前的狀態。那麼,我們來看一下,怎麼才能好好的運用他們呢?他們之間又有什麼差別呢? watch()函數watch需要偵聽特定的資料來源,例如偵聽一個ref,watch的第一個參數可以

在做 chatgpt 鏡像站的時候,發現有些鏡像站是沒做打字機的遊標效果的,就只是文字輸出,是他們不想做嗎?反正我想做。於是我仔細研究了一下,實現了打字機效果加遊標的效果,現在分享一下我的解決方案以及效果圖~
