Vue對象的單層劫持圖文詳細講解

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

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

一，前言

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

回顧一下，主要涉及以下幾個核心點：

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

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

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

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

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

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

即下圖中 Data 部分：

三，對象的劫持

1，initData 中獲取 data

data 在 options 中，而 options 已被 vm 實例共享

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

2，處理 data 的兩種情況

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

因此，后邊邏輯需要對 data 進行一次處理

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

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

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

測試：

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

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

3，處理 this 的指向問題

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

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

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

測試：

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

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

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

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

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

通過 Object.defineProperty，重寫 data 上的所有屬性

這就需要遍歷 data 對象拿到每一個屬性，再逐一通過 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 方法觀測數(shù)據(jù)，實現(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 實現(xiàn) data 數(shù)據(jù)的響應(yīng)式
}

經(jīng)過這次處理后，此時的 data 一定是一個對象

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

// src/utils
/**
 * 判斷是否為對象：類型是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 不是對象，就不需要觀測了，直接 return
  if(!isObject(value)){
    return;
  }
}

5，Observer 類：對【對象】進行觀測

完成的邏輯是這樣的：

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

Observer 類：
遍歷對象屬性，使用 Object.defineProperty 重新定義 data 對象中的屬性

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

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

問題：為什么使用類而不使用函數(shù)？

TODO

問題：Object.defineProperty 中 get 為什么不用 obj[key] 來獲??？

TODO

6，測試

在 data 進行初始化的 initData 方法中，

通過 observe 方法觀測 data 數(shù)據(jù)，實現(xiàn)對 data 屬性的劫持

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

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

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

7，備注：安裝插件

// 不會自動到observe找index入口文件
import { observe } from "./observe";
// 需要指定index.js
import { observe } from "./observe/index";
// 安裝包：@rollup/plugin-node-resolve，實現(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/**'
        })
    ]
}