日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

 提到“響應(yīng)式”三個字，大家立刻想到啥？響應(yīng)式布局？響應(yīng)式編程？

創(chuàng)新互聯(lián)是一家集網(wǎng)站建設(shè),長興企業(yè)網(wǎng)站建設(shè),長興品牌網(wǎng)站建設(shè),網(wǎng)站定制,長興網(wǎng)站建設(shè)報價,網(wǎng)絡(luò)營銷,網(wǎng)絡(luò)優(yōu)化,長興網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強(qiáng)企業(yè)競爭力?？沙浞譂M足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時我們時刻保持專業(yè)、時尚、前沿，時刻以成就客戶成長自我，堅持不斷學(xué)習(xí)、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實用型網(wǎng)站。

從字面意思可以看出，具有“響應(yīng)式”特征的事物會根據(jù)條件變化，使得目標(biāo)自動作出對應(yīng)變化。比如在“響應(yīng)式布局”中，頁面根據(jù)不同設(shè)備尺寸自動顯示不同樣式。

Vue.js 中的響應(yīng)式也是一樣，當(dāng)數(shù)據(jù)發(fā)生變化后，使用到該數(shù)據(jù)的視圖也會相應(yīng)進(jìn)行自動更新。

接下來我根據(jù)個人理解，和大家一起探索下 Vue.js 中的響應(yīng)式原理，如有錯誤，歡迎指點~~

一、Vue.js 響應(yīng)式的使用

現(xiàn)在有個很簡單的需求，點擊頁面中 “l(fā)eo” 文本后，文本內(nèi)容修改為“你好，前端自習(xí)課”。

我們可以直接操作 DOM，來完成這個需求：

 
 
 
 

  
  
  
  
leo  
 
 
 
 

 
 
 
 

  
  
  
  
const node = document.querySelector('#name')  
  
  
  
  
node.innerText = '你好，前端自習(xí)課'; 
 
 
 
 

實現(xiàn)起來比較簡單，當(dāng)我們需要修改的數(shù)據(jù)有很多時（比如相同數(shù)據(jù)被多處引用），這樣的操作將變得復(fù)雜。

既然說到 Vue.js，我們就來看看 Vue.js 怎么實現(xiàn)上面需求： 

觀察上面代碼，我們通過改變數(shù)據(jù)，來自動更新視圖。當(dāng)我們有多個地方引用這個 name 時，視圖都會自動更新。 

當(dāng)我們使用目前主流的前端框架 Vue.js 和 React 開發(fā)業(yè)務(wù)時，只需關(guān)注頁面數(shù)據(jù)如何變化，因為數(shù)據(jù)變化后，視圖也會自動更新，這讓我們從繁雜的 DOM 操作中解脫出來，提高開發(fā)效率。

二、回顧觀察者模式

前面反復(fù)提到“通過改變數(shù)據(jù)，來自動更新視圖”，換個說法就是“數(shù)據(jù)改變后，使用該數(shù)據(jù)的地方被動發(fā)生響應(yīng)，更新視圖”。

是不是有種熟悉的感覺？數(shù)據(jù)無需關(guān)注自身被多少對象引用，只需在數(shù)據(jù)變化時，通知到引用的對象即可，引用的對象作出響應(yīng)。恩，有種觀察者模式的味道？

關(guān)于觀察者模式，可閱讀我之前寫的《圖解設(shè)計模式之觀察者模式（TypeScript）》。

1. 觀察者模式流程

觀察者模式表示一種“一對多”的關(guān)系，n 個觀察者關(guān)注 1 個被觀察者，被觀察者可以主動通知所有觀察者。接下圖：

在這張圖中，粉絲想及時收到“前端自習(xí)課”最新文章，只需關(guān)注即可，“前端自習(xí)課”有新文章，會主動推送給每個粉絲。該過程中，“前端自習(xí)課”是被觀察者，每位“粉絲”是觀察者。

2. 觀察者模式核心

觀察者模式核心組成包括：n 個觀察者和 1 個被觀察者。這里實現(xiàn)一個簡單觀察者模式：

2.1 定義接口 

 
 
 
 

  
  
  
  
// 觀察目標(biāo)接口  
  
  
  
  
interface ISubject {  
  
  
  
  
    addObserver: (observer: Observer) => void; // 添加觀察者  
  
  
  
  
    removeObserver: (observer: Observer) => void; // 移除觀察者  
  
  
  
  
    notify: () => void; // 通知觀察者  
  
  
  
  
}  
  
  
  
  
// 觀察者接口  
  
  
  
  
interface IObserver {  
  
  
  
  
    update: () => void;  
  
  
  
  
} 
 
 
 
 

2.2 實現(xiàn)被觀察者類 

 
 
 
 

  
  
  
  
// 實現(xiàn)被觀察者類  
  
  
  
  
class Subject implements ISubject {  
  
  
  
  
    private observers: IObserver[] = [];  
  
  
  
  
    public addObserver(observer: IObserver): void {  
  
  
  
  
        this.observers.push(observer);  
  
  
  
  
    }  
  
  
  
  
    public removeObserver(observer: IObserver): void {  
  
  
  
  
        const idx: number = this.observers.indexOf(observer);  
  
  
  
  
        ~idx && this.observers.splice(idx, 1);  
  
  
  
  
    }  
  
  
  
  
    public notify(): void { 
  
  
  
  
         this.observers.forEach(observer => {  
  
  
  
  
            observer.update();  
  
  
  
  
        });  
  
  
  
  
    }  
  
  
  
  
} 
 
 
 
 

2.3 實現(xiàn)觀察者類 

 
 
 
 

  
  
  
  
// 實現(xiàn)觀察者類  
  
  
  
  
class Observer implements IObserver {  
  
  
  
  
    constructor(private name: string) { }  
  
  
  
  
    update(): void {  
  
  
  
  
        console.log(`${this.name} has been notified.`);  
  
  
  
  
    }  
  
  
  
  
} 
 
 
 
 

2.4 測試代碼 

 
 
 
 

  
  
  
  
function useObserver(){  
  
  
  
  
    const subject: ISubject = new Subject();  
  
  
  
  
    const Leo = new Observer("Leo");  
  
  
  
  
    const Robin = new Observer("Robin");  
  
  
  
  
    const Pual = new Observer("Pual");  
  
  
  
  
    subject.addObserver(Leo);  
  
  
  
  
    subject.addObserver(Robin);  
  
  
  
  
    subject.addObserver(Pual);  
  
  
  
  
    subject.notify();  
  
  
  
  
    subject.removeObserver(Pual);  
  
  
  
  
    subject.notify();  
  
  
  
  
}  
  
  
  
  
useObserver();  
  
  
  
  
// [LOG]: "Leo has been notified."   
  
  
  
  
// [LOG]: "Robin has been notified."   
  
  
  
  
// [LOG]: "Pual has been notified."   
  
  
  
  
// [LOG]: "Leo has been notified."   
  
  
  
  
// [LOG]: "Robin has been notified."  
 
 
 
 

三、回顧 Object.defineProperty()

Vue.js 的數(shù)據(jù)響應(yīng)式原理是基于 JS 標(biāo)準(zhǔn)內(nèi)置對象方法 Object.defineProperty() 方法來實現(xiàn)，該方法不兼容 IE8 和 FF22 及以下版本瀏覽器，這也是為什么 Vue.js 只能在這些版本之上的瀏覽器中才能運(yùn)行的原因。

理解 Object.defineProperty() 對我們理解 Vue.js 響應(yīng)式原理非常重要。

Vue.js 3 使用 proxy 方法實現(xiàn)響應(yīng)式，兩者類似，我們只需搞懂Object.defineProperty() ， proxy 也就差不多理解了。

1. 概念介紹

Object.defineProperty() 方法會直接在一個對象上定義一個新屬性，或者修改一個對象的現(xiàn)有屬性，并返回此對象。

語法如下： 

 
 
 
 

  
  
  
  
Object.defineProperty(obj, prop, descriptor) 
 
 
 
 

•  入?yún)⒄f明：

obj ：要定義屬性的源對象；

prop ：要定義或修改的屬性名稱或 Symbol；

descriptor ：要定義或修改的屬性描述符，包括 configurable、enumerable、value、writable、get、set，具體的可以去參閱文檔；

•  出參說明：

修改后的源對象。

舉個簡單例子： 

 
 
 
 

  
  
  
  
const leo = {};  
  
  
  
  
Object.defineProperty(leo, 'age', {  
  
  
  
  
    value: 18,  
  
  
  
  
    writable: true  
  
  
  
  
})  
  
  
  
  
console.log(leo.age); // 18  
  
  
  
  
leo.age = 22;  
  
  
  
  
console.log(leo.age); // 22 
 
 
 
 

2. 實現(xiàn) getter/setter

我們知道 Object.defineProperty() 方法第三個參數(shù)是屬性描述符（descriptor），支持設(shè)置 get 和 set 描述符：

•  get 描述符：當(dāng)訪問該屬性時，會調(diào)用此函數(shù)，默認(rèn)值為 undefined ；
•  set 描述符：當(dāng)修改該屬性時，會調(diào)用此函數(shù)，默認(rèn)值為 undefined 。

一旦對象擁有了 getter/setter 方法，我們可以簡單將該對象稱為響應(yīng)式對象。

這兩個操作符為我們提供攔截數(shù)據(jù)進(jìn)行操作的可能性，修改前面示例，添加 getter/setter 方法： 

 
 
 
 

  
  
  
  
let leo = {}, age = 18;  
  
  
  
  
Object.defineProperty(leo, 'age', {   
  
  
  
  
    get(){  
  
  
  
  
        // to do something  
  
  
  
  
          console.log('監(jiān)聽到請求數(shù)據(jù)');  
  
  
  
  
        return age;  
  
  
  
  
    },  
  
  
  
  
    set(newAge){  
  
  
  
  
        // to do something  
  
  
  
  
          console.log('監(jiān)聽到修改數(shù)據(jù)');  
  
  
  
  
        age = newAge > age ? age : newAge  
  
  
  
  
    }  
  
  
  
  
})  
  
  
  
  
leo.age = 20;  // 監(jiān)聽到修改數(shù)據(jù)  
  
  
  
  
console.log(leo.age); // 監(jiān)聽到請求數(shù)據(jù)  // 18  
  
  
  
  
leo.age = 10;  // 監(jiān)聽到修改數(shù)據(jù)  
  
  
  
  
console.log(leo.age); // 監(jiān)聽到請求數(shù)據(jù)  // 10 
 
 
 
 

訪問 leo 對象的 age 屬性，會通過 get 描述符處理，而修改 age 屬性，則會通過 set 描述符處理。

四、實現(xiàn)簡單的數(shù)據(jù)響應(yīng)式

通過前面兩個小節(jié)，我們復(fù)習(xí)了“觀察者模式”和“Object.defineProperty()” 方法，這兩個知識點在 Vue.js 響應(yīng)式原理中非常重要。

接下來我們來實現(xiàn)一個很簡單的數(shù)據(jù)響應(yīng)式變化，需求如下：點擊“更新數(shù)據(jù)”按鈕，文本更新。

接下來我們將實現(xiàn)三個類：

•  Dep 被觀察者類，用來生成被觀察者；
•  Watcher 觀察者類，用來生成觀察者；
•  Observer 類，將普通數(shù)據(jù)轉(zhuǎn)換為響應(yīng)式數(shù)據(jù)，從而實現(xiàn)響應(yīng)式對象。

用一張圖來描述三者之間關(guān)系，現(xiàn)在看不懂沒關(guān)系，這小節(jié)看完可以再回顧這張圖：

1. 實現(xiàn)精簡觀察者模式

這里參照前面復(fù)習(xí)“觀察者模式”的示例，做下精簡： 

 
 
 
 

  
  
  
  
// 實現(xiàn)被觀察者類  
  
  
  
  
class Dep {  
  
  
  
  
    constructor() {  
  
  
  
  
        this.subs = [];  
  
  
  
  
    }  
  
  
  
  
    addSub(watcher) {  
  
  
  
  
        this.subs.push(watcher);  
  
  
  
  
    }  
  
  
  
  
    notify(data) {  
  
  
  
  
        this.subs.forEach(sub => sub.update(data));  
  
  
  
  
    }  
  
  
  
  
}  
  
  
  
  
// 實現(xiàn)觀察者類  
  
  
  
  
class Watcher {  
  
  
  
  
    constructor(cb) {  
  
  
  
  
        this.cb = cb;  
  
  
  
  
    }  
  
  
  
  
    update(data) {  
  
  
  
  
        this.cb(data);  
  
  
  
  
    }  
  
  
  
  
} 
 
 
 
 

Vue.js 響應(yīng)式原理中，觀察者模式起到非常重要的作用。其中：

•  Dep 被觀察者類，提供用來收集觀察者（ addSub ）方法和通知觀察者（ notify ）方法；
•  Watcher 觀察者類，實例化時支持傳入回調(diào)（ cb ）方法，并提供更新（ update ）方法；

2. 實現(xiàn)生成響應(yīng)式的類

這一步需要實現(xiàn) Observer 類，核心是通過 Object.defineProperty() 方法為對象的每個屬性設(shè)置 getter/setter，目的是將普通數(shù)據(jù)轉(zhuǎn)換為響應(yīng)式數(shù)據(jù)，從而實現(xiàn)響應(yīng)式對象。

這里以最簡單的單層對象為例（下一節(jié)會介紹深層對象），如： 

 
 
 
 

  
  
  
  
let initData = {  
  
  
  
  
    text: '你好，前端自習(xí)課',  
  
  
  
  
    desc: '每日清晨，享受一篇前端優(yōu)秀文章。'  
  
  
  
  
}; 
 
 
 
 

接下來實現(xiàn) Observer 類： 

 
 
 
 

  
  
  
  
// 實現(xiàn)響應(yīng)式類（最簡單單層的對象，暫不考慮深層對象）  
  
  
  
  
class Observer {  
  
  
  
  
    constructor (node, data) {  
  
  
  
  
        this.defineReactive(node, data)  
  
  
  
  
    }  
  
  
  
  
    // 實現(xiàn)數(shù)據(jù)劫持（核心方法）  
  
  
  
  
    // 遍歷 data 中所有的數(shù)據(jù)，都添加上 getter 和 setter 方法  
  
  
  
  
    defineReactive(vm, obj) {  
  
  
  
  
        //每一個屬性都重新定義get、set  
  
  
  
  
        for(let key in obj){  
  
  
  
  
            let value = obj[key]， dep = new Dep();  
  
  
  
  
            Object.defineProperty(obj, key, {  
  
  
  
  
                enumerable: true,  
  
  
  
  
                configurable: true,  
  
  
  
  
                get() {  
  
  
  
  
                    // 創(chuàng)建觀察者  
  
  
  
  
                    let watcher = new Watcher(v => vvm.innerText = v);  
  
  
  
  
                    dep.addSub(watcher);  
  
  
  
  
                    return value;  
  
  
  
  
                },  
  
  
  
  
                set(newValue) {  
  
  
  
  
                    value = newValue;  
  
  
  
  
                    // 通知所有觀察者  
  
  
  
  
                    dep.notify(newValue);  
  
  
  
  
                }  
  
  
  
  
            })  
  
  
  
  
        }  
  
  
  
  
    }  
  
  
  
  
} 
 
 
 
 

上面代碼的核心是 defineReactive 方法，它遍歷原始對象中每個屬性，為每個屬性實例化一個被觀察者（Dep），然后分別調(diào)用 Object.defineProperty() 方法，為每個屬性添加 getter/setter。

•  訪問數(shù)據(jù)時，getter 執(zhí)行依賴收集（即添加觀察者），通過實例化 Watcher 創(chuàng)建一個觀察者，并執(zhí)行被觀察者的 addSub() 方法添加一個觀察者；
•  修改數(shù)據(jù)時，setter 執(zhí)行派發(fā)更新（即通知觀察者），通過調(diào)用被觀察者的 notify() 方法通知所有觀察者，執(zhí)行觀察者 update() 方法。

3. 測試代碼

為了方便觀察數(shù)據(jù)變化，我們?yōu)椤案聰?shù)據(jù)”按鈕綁定點擊事件來修改數(shù)據(jù)：