Vue對(duì)象的單層劫持圖文詳細(xì)講解

更新時(shí)間：2023年01月06日 15:40:55 作者：BraveWangDev

這篇文章主要介紹了vue2.x對(duì)象單層劫持的原理實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

一，前言

上篇，介紹了 Vue 使用及數(shù)據(jù)初始化的流程

回顧一下，主要涉及以下幾個(gè)核心點(diǎn)：

initMixin 方法：原型方法 Vue.prototype._init
vm.$options：使 options 選項(xiàng)在 vm 實(shí)例上被共享
initState 方法： Vue 初始化時(shí)，對(duì)多種數(shù)據(jù)源做集中處理
initData 方法：data 數(shù)據(jù)的初始化

本篇，繼續(xù)對(duì) data 數(shù)據(jù)進(jìn)行初始化操作，對(duì)象的劫持（對(duì)象屬性的單層劫持）

二，Vue 的響應(yīng)式原理

問(wèn)題：Vue 的響應(yīng)式原理

Vue 的響應(yīng)式原理

核心是通過(guò) Object.defineProperty 為屬性添加 get、set 方法，從而實(shí)現(xiàn)對(duì)數(shù)據(jù)操的劫持…

即下圖中 Data 部分：

三，對(duì)象的劫持

1，initData 中獲取 data

data 在 options 中，而 options 已被 vm 實(shí)例共享

function initData(vm){
    let data = vm.$options.data;// 拿到 vue 初始化時(shí)，用戶(hù)傳入的data數(shù)據(jù)
    console.log("進(jìn)入 state.js - initData，數(shù)據(jù)初始化操作", data)
}

2，處理 data 的兩種情況

上篇說(shuō)了，data 有可能是函數(shù)，也有可能是對(duì)象

因此，后邊邏輯需要對(duì) data 進(jìn)行一次處理

// utils.js
export function isFunction(val){
  return typeof val == 'function'
}

如果 data 是函數(shù)，需要執(zhí)行拿到顳部返回的對(duì)象

// 如果 data 是函數(shù)，需要執(zhí)行 data 拿到它的返回值
if(isFunction(data)){
  data = data(); // 這樣執(zhí)行，this 不是 vm，而是window
}

測(cè)試：

let vm = new Vue({
  el: '#app',
  data() {
    console.log("打印 data函數(shù)執(zhí)行時(shí)，this的指向")
    console.log(this)
    return { message: 'Hello Vue' } // data 返回一個(gè)對(duì)象
  }
});

此時(shí)，data 函數(shù)執(zhí)行時(shí)，this 指向 window

3，處理 this 的指向問(wèn)題

在 Vue 中，data 函數(shù)執(zhí)行時(shí) this 應(yīng)指向當(dāng)前 vm 實(shí)例

所以，在 data 執(zhí)行時(shí)綁定 this 為當(dāng)前 vm 實(shí)例

if(isFunction(data)){
  data = data.call(vm);// data 執(zhí)行時(shí)，綁定this 為 vm
}

測(cè)試：

簡(jiǎn)化代碼：將 data 為對(duì)象或函數(shù)兩種情況的邏輯合并：

// data 可能是函數(shù)或?qū)ο?
//  如果 data 是函數(shù)，則需要讓 data 函數(shù)執(zhí)行，拿到它返回的對(duì)象
//  如果 data 是對(duì)象，不做處理
data = isFunction(data) ? data.call(vm) : data;

注意：只有根實(shí)例上的 data 可以是對(duì)象，組件必須為函數(shù)

4，核心模塊 observe：對(duì)數(shù)據(jù)進(jìn)行觀測(cè)

data 數(shù)據(jù)的響應(yīng)式原理是：

通過(guò) Object.defineProperty，重寫(xiě) data 上的所有屬性

這就需要遍歷 data 對(duì)象拿到每一個(gè)屬性，再逐一通過(guò) Object.defineProperty 重新定義

observe 模塊（文件夾）
observe 方法（入口）

創(chuàng)建入口文件 observe/index.js

// src/observe/index.js
export function observe(value) {
  console.log(value)
}

在 state.js 中引入并使用 observe 方法

調(diào)用 observe 方法觀測(cè)數(shù)據(jù)，實(shí)現(xiàn) data 數(shù)據(jù)的響應(yīng)式

import { observe } from "./observe";
import { isFunction } from "./utils";
export function initState(vm) {
    const opts = vm.$options;
    if (opts.data) {
        initData(vm);
    }
}
function initData(vm) {
    let data = vm.$options.data;
    data = isFunction(data) ? data.call(vm) : data;
    observe(data);  // 使用 observe 實(shí)現(xiàn) data 數(shù)據(jù)的響應(yīng)式
}

經(jīng)過(guò)這次處理后，此時(shí)的 data 一定是一個(gè)對(duì)象

所以，對(duì) data 進(jìn)行檢測(cè)，如果不是對(duì)象就直接 return 結(jié)束

// src/utils
/**
 * 判斷是否為對(duì)象：類(lèi)型是object，且不能為 null
 * @param {*} val 
 * @returns 
 */
export function isObject(val) {
  return typeof val == 'object' && val !== null
}

// src/observe/index.js
import { isObject } from "../utils";
export function observe(value) {
  // 如果 value 不是對(duì)象，就不需要觀測(cè)了，直接 return
  if(!isObject(value)){
    return;
  }
}

5，Observer 類(lèi)：對(duì)【對(duì)象】進(jìn)行觀測(cè)

完成的邏輯是這樣的：

// src/observe/index.js
export function observe(value) {
  if(!isObject(value)){
    return;
  }
  // 觀測(cè) value 對(duì)象，實(shí)現(xiàn)數(shù)據(jù)響應(yīng)式
  return new Observer(value);
}

Observer 類(lèi)：
遍歷對(duì)象屬性，使用 Object.defineProperty 重新定義 data 對(duì)象中的屬性

// src/observe/index.js
class Observer {
  constructor(value){
    // 如果value是對(duì)象，遍歷對(duì)象中的屬性，使用 Object.defineProperty 重新定義
    this.walk(value); // 循環(huán)對(duì)象屬性
  }
  // 循環(huán) data 對(duì)象，使用 Object.keys 不循環(huán)原型方法
  walk(data){
    Object.keys(data).forEach(key => { 
      // 使用 Object.defineProperty 重新定義 data 對(duì)象中的屬性
      defineReactive(data, key, data[key]);
    });
  }
}
/**
 * 給對(duì)象Obj，定義屬性key，值為value
 *  使用Object.defineProperty重新定義data對(duì)象中的屬性
 *  由于Object.defineProperty性能低，所以vue2的性能瓶頸也在這里
 * @param {*} obj 需要定義屬性的對(duì)象
 * @param {*} key 給對(duì)象定義的屬性名
 * @param {*} value 給對(duì)象定義的屬性值
 */
function defineReactive(obj, key, value) {
  Object.defineProperty(obj, key, {
    get(){ // 閉包
      return value;	// 問(wèn)題：這里的 value 為什么不用 obj[key]獲??？
    },
    set(newValue) {
      if (newValue === value) return
      value = newValue;
    }
  })
}

至此，obj 中的所有屬性都通過(guò) defineProperty 重新定義，具有 get、set 方法

問(wèn)題：為什么使用類(lèi)而不使用函數(shù)？

TODO

問(wèn)題：Object.defineProperty 中 get 為什么不用 obj[key] 來(lái)獲??？

TODO

6，測(cè)試

在 data 進(jìn)行初始化的 initData 方法中，

通過(guò) observe 方法觀測(cè) data 數(shù)據(jù)，實(shí)現(xiàn)對(duì) data 屬性的劫持

function initData(vm) {
    console.log("進(jìn)入 state.js - initData，數(shù)據(jù)初始化操作")
    let data = vm.$options.data;
    data = isFunction(data) ? data.call(vm) : data;
    // data 數(shù)據(jù)的響應(yīng)式：遍歷對(duì)象拿到所有屬性，再通過(guò)Object.defineProperty 重寫(xiě) data 中的所有屬性  
    observe(data); // 觀測(cè)數(shù)據(jù)
    console.log(data)
}

打印被觀測(cè)后的 data 對(duì)象，查看執(zhí)行效果：

至此，就實(shí)現(xiàn)了對(duì) data 屬性的劫持，但僅完成了第一層屬性的劫持

7，備注：安裝插件

// 不會(huì)自動(dòng)到observe找index入口文件
import { observe } from "./observe";
// 需要指定index.js
import { observe } from "./observe/index";
// 安裝包：@rollup/plugin-node-resolve，實(shí)現(xiàn) node 方式解析文件
// npm i @rollup/plugin-node-resolve

使用插件：修改 rollup 配置文件

import babel from 'rollup-plugin-babel'
import resolve from 'rollup-plugin-node-resolve'; // 引入插件
export default {
    input:'./src/index.js',
    output:{
        file:'dist/vue.js',
        format:'umd',
        name:'Vue',
        sourcemap:true,
    },
    plugins:[
        resolve(),  // 使用插件
        babel({
            exclude:'node_modules/**'
        })
    ]
}