Vue对象的单层劫持图文详细讲解

function initData(vm){
    let data = vm.$options.data;// 拿到 vue 初始化时，用户传入的data数据
    console.log("进入 state.js - initData，数据初始化操作", data)
}

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

// 如果 data 是函数，需要执行 data 拿到它的返回值
if(isFunction(data)){
  data = data(); // 这样执行，this 不是 vm，而是window
}

let vm = new Vue({
  el: '#app',
  data() {
    console.log("打印 data函数执行时，this的指向")
    console.log(this)
    return { message: 'Hello Vue' } // data 返回一个对象
  }
});

if(isFunction(data)){
  data = data.call(vm);// data 执行时，绑定this 为 vm
}

// data 可能是函数或对象
//  如果 data 是函数，则需要让 data 函数执行，拿到它返回的对象
//  如果 data 是对象，不做处理
data = isFunction(data) ? data.call(vm) : data;

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

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 实现 data 数据的响应式
}

// 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;
  }
}

// src/observe/index.js
export function observe(value) {
  if(!isObject(value)){
    return;
  }
  // 观测 value 对象，实现数据响应式
  return new Observer(value);
}

// src/observe/index.js
class Observer {
  constructor(value){
    // 如果value是对象，遍历对象中的属性，使用 Object.defineProperty 重新定义
    this.walk(value); // 循环对象属性
  }
  // 循环 data 对象，使用 Object.keys 不循环原型方法
  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;
    }
  })
}

function initData(vm) {
    console.log("进入 state.js - initData，数据初始化操作")
    let data = vm.$options.data;
    data = isFunction(data) ? data.call(vm) : data;
    // data 数据的响应式：遍历对象拿到所有属性，再通过Object.defineProperty 重写 data 中的所有属性  
    observe(data); // 观测数据
    console.log(data)
}

// 不会自动到observe找index入口文件
import { observe } from "./observe";
// 需要指定index.js
import { observe } from "./observe/index";
// 安装包：@rollup/plugin-node-resolve，实现 node 方式解析文件
// npm i @rollup/plugin-node-resolve

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/**'
        })
    ]
}