建站
咨詢
售后
建站咨詢
新聞中心
在Vue中，其中最最最核心的一個(gè)知識(shí)點(diǎn)就是數(shù)據(jù)響應(yīng)式原理，數(shù)據(jù)響應(yīng)式原理歸結(jié)起來就包含兩大部分：偵測(cè)數(shù)據(jù)變化、依賴收集，了解這兩個(gè)知識(shí)點(diǎn)就了解到了數(shù)據(jù)響應(yīng)式原理的精華。
創(chuàng)新互聯(lián)建站-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性價(jià)比東明網(wǎng)站開發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫,直接使用。一站式東明網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設(shè)找我們，業(yè)務(wù)覆蓋東明地區(qū)。費(fèi)用合理售后完善，十年實(shí)體公司更值得信賴。
一、偵測(cè)數(shù)據(jù)變化
能夠幀聽到數(shù)據(jù)變化是數(shù)據(jù)響應(yīng)式原理的前提，因?yàn)閿?shù)據(jù)響應(yīng)式正是基于監(jiān)聽到數(shù)據(jù)變化后來觸發(fā)一系列的更新操作。本次介紹數(shù)據(jù)響應(yīng)式原理將基于Vue2.x進(jìn)行，其將數(shù)據(jù)變?yōu)榭杀粋蓽y(cè)數(shù)據(jù)時(shí)主要采用了Object.defineProperty()。
1.1 非數(shù)組對(duì)象
下面先舉一個(gè)非數(shù)組對(duì)象的例子
- const obj = {
- a: {
- m: {
- n: 5
- }
- },
- b: 10
- };
觀察上面的對(duì)象，可以發(fā)現(xiàn)其是存在包含關(guān)系的(即一個(gè)對(duì)象中可能包含另一個(gè)對(duì)象)，那么自然會(huì)想到通過遞歸的方式實(shí)現(xiàn)，在Vue中為了保證代碼較高的可讀性，引入了三個(gè)模塊實(shí)現(xiàn)該邏輯：observe、Observer、defineReactive，其調(diào)用關(guān)系如下所示：
1.1.1 observe
這個(gè)函數(shù)是幀聽數(shù)據(jù)變化的入口文件，通過調(diào)用該函數(shù)一方面觸發(fā)了其幀聽對(duì)象數(shù)據(jù)變化的能力;另一方面定義了何時(shí)遞歸到最內(nèi)層的終止條件。
- import Observer from './Observer';
- export default function (value) {
- // 如果value不是對(duì)象，什么都不做(表示該遞歸到的是基本類型，其變化可被幀聽的）
- if (typeof value !== 'object') {
- return;
- }
- // Observer實(shí)例
- let ob;
- // __ob__是value上的屬性，其值就是對(duì)應(yīng)的Observer實(shí)例（表示其已經(jīng)是可幀聽的狀態(tài)）
- if (typeof value.__ob__ !== 'undefined') {
- ob = value.__ob__;
- }
- else {
- // 是對(duì)象且該上屬性還是未能夠幀聽狀態(tài)的
- ob = new Observer(value);
- }
- return ob;
- }
1.1.2 Observer
這個(gè)函數(shù)的目的主要有兩個(gè)：一個(gè)是將該實(shí)例掛載到該對(duì)象value的__ob__屬性上(observe上用到了該屬性，通過判斷是否有該屬性判斷是否已經(jīng)屬于幀聽狀態(tài));另一個(gè)是遍歷該對(duì)象上的所有屬性，然后將該屬性均變?yōu)榭蓭牭?通過調(diào)用defineReactive實(shí)現(xiàn))。
- export default class Observer {
- constructor(value) {
- // 給實(shí)例添加__ob__屬性
- def(value, '__ob__', this, false);
- // 檢查是數(shù)組還是對(duì)象
- if (!Array.isArray(value)) {
- // 若為對(duì)象，則進(jìn)行遍歷，將其上的屬性變?yōu)轫憫?yīng)式的
- this.walk(value);
- }
- }
- // 對(duì)于對(duì)象上的屬性進(jìn)行遍歷，將其變?yōu)轫憫?yīng)式的
- walk(value) {
- for (let key in value) {
- defineReactive(value, key);
- }
- }
- }
1.1.3 defineReactive
這個(gè)方法主要是將Object.defineProperty封裝到一個(gè)函數(shù)中，做這一步操作的原因是因?yàn)镺bject.defineProperty設(shè)置set屬性時(shí)需要一個(gè)臨時(shí)變量來存儲(chǔ)變化前的值，通過封裝利用閉包的思想引入val，這樣就不需要在函數(shù)外面再設(shè)置臨時(shí)變量了。
- export default function defineReactive(data, key, val) {
- if (arguments.length === 2) {
- val = data[key];
- }
- // 子元素要進(jìn)行observe，至此形成了遞歸
- let childOb = observe(val);
- Object.defineProperty(data, key, {
- // 可枚舉
- enumerable: true,
- // 可配置
- configurable: true,
- // getter
- get() {
- console.log(`訪問${key}屬性`);
- return val;
- },
- // setter
- set(newValue) {
- console.log(`改變${key}的屬性為${newValue}`);
- if (val === newValue) {
- return;
- }
- val = newValue;
- // 當(dāng)設(shè)置了新值，這個(gè)新值也要被observe
- childOb = observe(newValue);
- }
- });
- }
1.2 數(shù)組
Object.defineProperty不能直接監(jiān)聽數(shù)組內(nèi)部的變化，那么數(shù)組內(nèi)容變化應(yīng)該怎么操作呢?Vue主要采用的是改裝數(shù)組方法的方式(push、pop、shift、unshift、splice、sort、reverse)，在保留其原有功能的前提下，將其新添加的項(xiàng)變?yōu)轫憫?yīng)式的。
- // array.js文件
- // 得到Array的原型
- const arrayPrototype = Array.prototype;
- // 以Array.prototype為原型創(chuàng)建arrayMethods對(duì)象，并暴露
- export const arrayMethods = Object.create(arrayPrototype);
- // 要被改寫的7個(gè)數(shù)組方法
- const methodsNeedChange = [
- 'push',
- 'pop',
- 'shift',
- 'unshift',
- 'splice',
- 'sort',
- 'reverse'
- ];
- methodsNeedChange.forEach(methodName => {
- //備份原來的方法
- const original = arrayMethods[methodName];
- // 定義新的方法
- def(arrayMethods, methodName, function () {
- // 恢復(fù)原來的功能
- const result = original.apply(this, arguments);
- // 將類數(shù)組對(duì)象轉(zhuǎn)換為數(shù)組
- const args = [...arguments];
- // 數(shù)組不會(huì)是最外層，所以其上已經(jīng)添加了Observer實(shí)例
- const ob = this.__ob__;
- // push/unshift/splice會(huì)插入新項(xiàng)，需要將插入的新項(xiàng)變成observe的
- let inserted = [];
- switch (methodName) {
- case 'push':
- case 'unshift': {
- inserted = args;
- break;
- }
- case 'splice': {
- inserted = args.slice(2);
- break;
- }
- }
- // 對(duì)于有插入項(xiàng)的，讓新項(xiàng)變?yōu)轫憫?yīng)的
- if (inserted.length) {
- ob.observeArray(inserted);
- }
- ob.dep.notify();
- return result;
- }, false);
- });
除了改裝其原有數(shù)組方法外，Observer函數(shù)中也將增加對(duì)數(shù)組的處理邏輯。
- export default class Observer {
- constructor(value) {
- // 給實(shí)例添加__ob__屬性
- def(value, '__ob__', this, false);
- // 檢查是數(shù)組還是對(duì)象
- if (Array.isArray(value)) {
- // 改變數(shù)組的原型為新改裝的內(nèi)容
- Object.setPrototypeOf(value, arrayMethods);
- // 讓這個(gè)數(shù)組變?yōu)閛bserve
- this.observeArray(value);
- }
- else {
- // 若為對(duì)象，則進(jìn)行遍歷，將其上的屬性變?yōu)轫憫?yīng)式的
- this.walk(value);
- }
- }
- // 對(duì)于對(duì)象上的屬性進(jìn)行遍歷，將其變?yōu)轫憫?yīng)式的
- walk(value) {
- for (let key in value) {
- defineReactive(value, key);
- }
- }
- // 數(shù)組的特殊遍歷
- observeArray(arr) {
- for (let i = 0, l = arr.length; i < l; i++) {
- // 逐項(xiàng)進(jìn)行observe
- observe(arr[i]);
- }
- }
- }
二、依賴收集
目前對(duì)象中所有的屬性已經(jīng)變成可幀聽狀態(tài)，下一步就進(jìn)入了依賴收集階段,其整個(gè)流程如下所示：
其實(shí)看了這張神圖后，由于能力有限還不是很理解，經(jīng)過自己的拆分，認(rèn)為可以分成兩個(gè)步驟去理解。
1.getter中(Object.defineProperty中的get屬性)進(jìn)行收集依賴后的狀態(tài)
2. 緊接著就是觸發(fā)依賴，該過程是在setter中進(jìn)行，當(dāng)觸發(fā)依賴時(shí)所存儲(chǔ)在Dep中的所有Watcher均會(huì)被通知并執(zhí)行，通知其關(guān)聯(lián)的組件更新，例如數(shù)據(jù)更新的位置是與Dep1所關(guān)聯(lián)的數(shù)據(jù)，則其上的Watcher1、Watcher2、WatcherN均會(huì)被通知并執(zhí)行。
說了這么多，其中最核心的內(nèi)容無外乎Dep類、Watcher類、defineReactive函數(shù)中的set和get函數(shù)。
2.1 Dep類
Dep類用于管理依賴，包含依賴的添加、刪除、發(fā)送消息，是一個(gè)典型的觀察者模式。
- export default class Dep {
- constructor() {
- console.log('DEP構(gòu)造器');
- // 數(shù)組存儲(chǔ)自己的訂閱者，這是Watcher實(shí)例
- this.subs = [];
- }
- // 添加訂閱
- addSub(sub) {
- this.subs.push(sub);
- }
- // 添加依賴
- depend() {
- // Dep.target指定的全局的位置
- if (Dep.target) {
- this.addSub(Dep.target);
- }
- }
- // 通知更新
- notify() {
- const subs = this.subs.slice();
- for (let i = 0, l = subs.length; i < l; i++) {
- subs[i].update();
- }
- }
- }
2.2 Watcher類
Watcher類的實(shí)例就是依賴，在其實(shí)例化階段會(huì)作為依賴存儲(chǔ)到Dep中，在對(duì)應(yīng)的數(shù)據(jù)改變時(shí)會(huì)更新與該數(shù)據(jù)相關(guān)的Watcher實(shí)例，進(jìn)行對(duì)應(yīng)任務(wù)的執(zhí)行，更新對(duì)應(yīng)組件。
- export default class Watcher {
- constructor(target, expression, callback) {
- console.log('Watcher構(gòu)造器');
- this.target = target;
- this.getter = parsePath(expression);
- this.callback = callback;
- this.value = this.get();
- }
- update() {
- this.run();
- }
- get() {
- // 進(jìn)入依賴收集階段，讓全局的Dep.target設(shè)置為Watcher本身，就進(jìn)入依賴收集階段
- Dep.target = this;
- const obj = this.target;
- let value;
- try {
- value = this.getter(obj);
- }
- finally {
- Dep.target = null;
- }
- return value;
- }
- run() {
- this.getAndInvoke(this.callback);
- }
- getAndInvoke(cb) {
- const value = this.get();
- if (value !== this.value || typeof value === 'object') {
- const oldValue = this.value;
- this.value = value;
- cb.call(this.target, value, oldValue);
- }
- }
- }
- function parsePath(str) {
- const segments = str.split('.');
- return obj =>{
- for (let i = 0; i < segments.length; i++) {
- if (!obj) {
- return;
- }
- obj = obj[segments[i]];
- }
- return obj;
- };
- }
2.3 defineReactive函數(shù)中的set和get函數(shù)
Object.defineProperty中的getter階段進(jìn)行收集依賴，setter階段觸發(fā)依賴。
- export default function defineReactive(data, key, val) {
- const dep = new Dep();
- if (arguments.length === 2) {
- val = data[key];
- }
- // 子元素要進(jìn)行observe，至此形成了遞歸
- let childOb = observe(val);
- Object.defineProperty(data, key, {
- // 可枚舉
- enumerable: true,
- // 可配置
- configurable: true,
- // getter
- get() {
- console.log(`訪問${key}屬性`);
- // 如果現(xiàn)在處于依賴收集階段
- if (Dep.target) {
- dep.depend();
- // 其子元素存在的時(shí)候也要進(jìn)行依賴收集(個(gè)人認(rèn)為主要是針對(duì)數(shù)組）
- if (childOb) {
- childOb.dep.depend();
- }
- }
- return val;
- },
- // setter
- set(newValue) {
- console.log(`改變${key}的屬性為${newValue}`);
- if (val === newValue) {
- return;
- }
- val = newValue;
- // 當(dāng)設(shè)置了新值，這個(gè)新值也要被observe
- childOb = observe(newValue);
- // 發(fā)布訂閱模式，通知更新
- dep.notify();
- }
- });
- }
名稱欄目：一文搞定數(shù)據(jù)響應(yīng)式原理
網(wǎng)站地址：http://m.5511xx.com/article/djjgcjd.html
