02 發布者訂閱者模式vue(Vue 面試中常問知識點整理)

时间:2024-05-24 05:10:12 编辑: 来源:

重新請求數據。

當我們在詳情頁中刪除了對應的列表項時,就可以將詳情頁 meta 屬性中的 isRefresh 設為 true 。這時再返回到列表頁,頁面會重新刷新。

1、css只在當前組件起作用

答:在 style 標簽中寫入 s買粉絲ped 即可 例如: <style s買粉絲ped></style>

2、v-if 和 v-show 區別

答: v-if 按照條件是否渲染, v-show 是 display 的 block 或 none ;

3、 $route 和 $router 的區別

答: $route 是“路由信息對象”,包括 path,params,hash,query,fullPath,matched,name 等路由信息參數。而 $router 是“路由實例”對象包括了路由的跳轉方法,鉤子函數等。

vue的數據雙向綁定是怎么實現的

vue的數據雙向綁定是通過數據劫持和發布-訂閱者功能來實現的。

實現步驟:

1.實現一個監聽者Oberver來劫持并監聽所有的屬性,一旦有屬性發生變化就通知訂閱者。

2.實現一個訂閱者watcher來接受屬性變化的通知并執行相應的方法,從而更新視圖。

3.實現一個解析器買粉絲pile,可以掃描和解析每個節點的相關指令,并根據初始化模板數據以及初始化相對應的訂閱者。

觀察者模式確實很有用,但是在javascript實踐里面,通常我們使用一種叫做發布/訂閱模式的變體來實現觀察者模式。

從圖中也能看到,這兩種模式很相似,但是也有一些值得注意的不同。

發布/訂閱模式使用一個主題/事件頻道,這個頻道處于想要獲取通知的訂閱者和發起事件的發布者之間。這個事件系統允許代碼定義應用相關的事件,這個事件可以傳遞特殊的參數,參數中包含有訂閱者所需要的值。

觀察者模式和發布訂閱模式的不同點:

觀察者模式要求想要接受相關通知的觀察者必須到發起這個事件的被觀察者上注冊這個事件。

發布/訂閱模式使用一個主題/事件頻道(類似于中介/中間商),可以減少訂閱者和發布者之間的依賴性。

發布/訂閱模式中訂閱者可以實現一個合適的事件處理函數,用于注冊和接受由發布者廣播的相關通知。

【手把手教你搓Vue響應式原理】(五) Watcher 與 Dep

【手把手教你搓Vue響應式原理】(一)初識Vue響應式

【手把手教你搓Vue響應式原理】(二)深度監測對象全部屬性

【手把手教你搓Vue響應式原理】(三)observe 以及 ob

【手把手教你搓Vue響應式原理】(四) 數組的響應式處理

之前已經將數據劫持已經全部完成了。

那么,接下來,主要的要點就是在于兩點,依賴收集和觸發依賴更新。

它的意義主要在于控制哪些地方使用了這個變量,然后,按照最小的開銷來更新視圖 。

首先,要先明白,依賴是什么,比方說在我們的模板中有 { { a}} ,那么,這個地方就有對于變量 a 的依賴。

在模板編譯的時候,就會觸發 a 變量的 getter 。

然后,當我們執行 a++; 的時候,那么,我們就要觸發依賴的更新,當初模板中 { { a}} 的地方,就要更新,是吧!

所以,我們都是 在 getter 中收集依賴,在 setter 中觸發依賴更新 。

這一節的內容,主要就是用來專門講清楚這兩件事情。

依賴收集和觸發依賴更新主要由兩個類來完成, Dep 和 Watcher 。

Dep 和 Watcher 在設計模式中,就是 發布-訂閱者 的模式。

而依賴,你可以理解為所謂的訂閱者。

Dep 說白了就是發布者,它的工作就是依賴管理,要知道哪些地方用到了這個變量,可能用到這個變量的地方有很多,所以,它會有多個訂閱者。

然后,每個變量都應該有屬于自己的 Dep ,因為每個變量所在的依賴位置是不一樣的,所以他們的訂閱者也不一樣。

然后在變量更新之后,就去通知所有的訂閱者(Watcher),我的變量更新了,你們該觸發視圖更新了。

Watcher 說白了就是訂閱者,它接受 Dep 發過來的更新通知之后,就去執行視圖更新了。

它其實就是所謂的 watch 監聽器,變量改變之后,執行一個回調函數。

我們先按照圖例來創建我們的 Dep 類

根據我們的需求:

Dep 我們在前面也說了,每個屬性都應該有它自己的 Dep ,用來管理依賴。

所以,首先,如果我們在 Observer 中創建 Dep,那不就可以了。畢竟 Observer 會遍歷到每一個對象。

所以,很明顯,我們可以在 defineReactive 的 get 中收集依賴

因為有了 if(Dep.target) 的判斷,所以, 只有綁定 Watcher 的變量觸發 getter 時,才會添加依賴 。

這個 Dep.target 其實就是 Watcher 的實例

所以,很明顯,我們可以在 defineReactive 的 set 中收調用 notify() 方法告知 Watcher 實例,數據更新了。

至此, Dep 的所有職責,我們已經幫它完成了。

其實照道理應該有一個刪除依賴,我們這里就不再擴展了。

首先, Watcher 實例應該大家會相對而言更加好理解點,因為,我們有一個 watch 偵聽器,大家一定都很熟悉,這兩個其實一樣。

我們先按照圖例來創建我們的 Watcher 類

根據我們的需求:

這個 parsePath 需要單獨拎出來說一下,比方說我們現在有這么一個對象

我們要監聽到 a.b.c.d ,所以,我們需要下面的這種格式

所以,這個 get 很明顯就有點難度了。 我們需要通過循環 拿到 a.b 然后 .c 然后 .d。

我們將這個方法命名為 parsePath 。

入參接受我們的 b.c.d ,我們可以看到 第一句執行之后 segments=['b','c','d'] ,然后進行第二層,這是返回了一個方法,按照循環,那就是 obj=obj.b => obj=obj.c => obj=obj.d ,所以,就是返回一個對象的 obj.b.c.d,相當于是遍歷字符串中的屬性樹。

在執行 a.b.c.d=55; 的同時,我們的控制臺就會輸出 ok 55 10 。

【尚硅谷】Vue源碼解析之數據響應式原理

理解VUE2雙向數據綁定原理和實現

1.vue 雙向數據綁定是通過 數據劫持 結合 發布訂閱模式的方式來實現的, 也就是說數據和視圖同步,數據發生變化,視圖跟著變化,視圖變化,數據也隨之發生改變;

2.核心:關于VUE雙向數據綁定,其核心是 Object.defineProperty()方法;

3.介紹一下Object.defineProperty()方法

(1)Object.defineProperty(obj, prop, descriptor) ,這個語法內有三個參數,分別為 obj (要定義其上屬性的對象) prop (要定義或修改的屬性) descriptor (具體的改變方法)

(2)簡單地說,就是用這個方法來定義一個值。當調用時我們使用了它里面的get方法,當我們給這個屬性賦值時,又用到了它里面的set方法;

這樣我們就能實現js的雙向數據綁定,也對這個方法有初步的了解 ;

這個例子實現的效果是:隨著文本框輸入文字的變化,span中會同步顯示相同的文字內容;這樣就實現了 model => view 以及 view => model 的雙向綁定。

通過添加事件監聽keyup來觸發set方法,而set再修改了訪問器屬性的同時,也修改了dom樣式,改變了span標簽內的文本。

1.實現效果

先來看一下vue雙向數據綁定是如何進行的,以便我們確定好思考方向

2.任務拆分

拆分任務可以讓我們的思路更加清晰:

(1)將vue中的data中的內容綁定到輸入文本框和文本節點中

(2)當文本框的內容改變時,vue實例中的data也同時發生改變

(3)當data中的內容發生改變時,輸入框及文本節點的內容也發生變化

3.開始任務1——綁定內容

我們先了解一下 DocuemntFragment(碎片化文檔) 這個概念,你可以把他認為一個dom節點收容器,當你創造了10個節點,當每個節點都插入到文檔當中都會引發一次瀏覽器的回流,也就是說瀏覽器要回流10次,十分消耗資源。

而使用碎片化文檔,也就是說我把10個節點都先放入到一個容器當中,最后我再把容器直接插入到文檔就可以了!瀏覽器只回流了1次。

注意:還有一個很重要的特性是,如果使用appendChid方法將原dom樹中的節點添加到DocumentFragment中時,會刪除原來的節點。

舉個例子:

可以看到,我的app中有兩個子節點,一個元素節點,一個文本節點

但是,當我通過DocumentFragment 劫持數據一下后

注意:我的碎片化文檔是將子節點都劫持了過來,而我的id為app的div內已經沒有內容了。<

搜索关键词: