从零手写 Vue2 部分#

import babel from "rollup-plugin-babel";
//rollup默认可以导出一个对象 作为打包的配置文件
export default {
  input: "./src/index.js", //入口
  output: {
    file: "./dist/vue.js", //出口
    format: "umd", //打包模式  常见有esm  es6模块  commonjs模块    iife自执行函数  umd统一模块规范(commonjs && amd)
    name: "Vue", // global.Vue
    sourcemap: true, //希望可以调试代码
  },
  plugins: [
    babel({
      exclude: "node_modules/**", //排除node_modules所有的文件
    }),
  ], //插件
};

//将所有的方法耦合在一起
import { initMixin } from "./init";

function Vue(options) {
  //options就是用户的选项
  this._init(options); //初始化操作
}

initMixin(Vue); //扩展了init方法

export default Vue;

import { initState } from "./state";

export function initMixin(Vue) {
  //给Vue 增加init方法
  Vue.prototype._init = function (options) {
    //用于初始化操作
    //vue vm.$options 就是获取用户的配置
    const vm = this; //
    vm.$options = options; //把用户配置赋值给vm.,挂载到vm身上 使用$标识表示这是vue里面的

    //初始化状态
    initState(vm);
  };
}

import { observe } from "./observe/index";
export function initState(vm) {
  const opts = vm.$options; //获取所有的选项
  if (opts.data) {
    //如果有data选项那么初始化data
    initData(vm);
  }
}

function initData(vm) {
  let data = vm.$options.data; //data可能是函数，可能是对象
  // debugger;
  data = typeof data === "function" ? data.call(vm) : data; //call进行执行函数\
  vm._data = data; //将data挂载到vm._data
  //对数据进行劫持，Vue2使用defineProperty
  observe(data);
}

class Observer {
  constructor(data) {
    //Object.defineProperty只能劫持已经存在的
    this.walk(data);
  }
  walk(data) {
    //循环对象   对属性依次劫持
    //  "重新定义"属性
    Object.keys(data).forEach((key) => defineReactive(data, key, data[key]));
  }
}

export function defineReactive(data, key, val) {
  //形成闭包，值不会消失
  observe(val); //这里是递归处理对象，如果data的属性中存在对象，那么就会继续递归下去处理，因此Vue2的数据劫持性能较低，但是数组还没有处理
  Object.defineProperty(data, key, {
    get() {
      //取值会执行get
      return val;
    },
    set(newVal) {
      if (newVal !== val) {
        val = newVal;
        console.log("数据被修改了");
      }
    },
  });
}
export function observe(data) {
  if (typeof data !== "object" || data === null) return; //只对对象劫持
  //如果一个对象被劫持了，那么就不需要再被劫持了（判断一个对象是否被劫持过，可以添加一个实例，用实例进行判定）
  return new Observer(data);
}

function proxy(vm, target, key) {
  Object.defineProperty(vm, key, {
    get() {
      return vm[target][key];
    },
    set(newVal) {
      vm[target][key] = newVal;
    },
  });
}

//.....省略了一些东西
function initData(vm) {
  //...
  observe(data);

  for (let key in data) {
    //将vm._data用vm进行代理
    proxy(vm, "_data", key);
  }
}

function initData(vm) {
  //...
  observe(data);
  proxy(vm, "_data");
}

function proxy(vm, target) {
  Object.keys(target).forEach((key) => {
    Object.defineProperty(vm, key, {
      get() {
        return vm[target][key];
      },
      set(newVal) {
        vm[target][key] = newVal;
      },
    });
  });
}

class Observe {
  constructor(data) {
    //数组单独处理
    data.__ob__ = this; //这里可以给data添加一个__ob__属性，这个属性指向Observer实例，这样就可以通过__ob__属性访问Observer实例了
    Object.defineProperty(data, "__ob__", {
      value: this,
      enumerable: false, //将ob变为不可枚举否则会陷入死循环，因为进入data后枚举到其__ob__属性（实际回到了本身），那么就会出现问题
    });
    // 同时给数据加了标识，数据上有ob那么对象被代理过，但是也需要其变成不可枚举属性
    if (Array.isArray(data)) {
      //这里我们可以重写数组中的七个编译方法，可以修改数组本身的。除此之外还有数组内的引用方法也应该劫持，比如一个对象作为数组的内容
      //同时保留其他的方法，因此需要在array.js里面重写
      data.__proto__ = newArrayProto;
      this.observeArray(data); //观测数组
    } else {
      this.walk(data);
    }
  }
  walk(data) {
    Object.keys(data).forEach((key) => defineReactive(data, key, data[key]));
  }
  observeArray() {
    data.forEach((item) => observe(item));
  }
  //剩下的和之前一样
}
//.....
export function observe(data) {
  if (typeof data !== "object" || data === null) return; //只对对象劫持
  //如果一个对象被劫持了，那么就不需要再被劫持了（判断一个对象是否被劫持过，可以添加一个实例，用实例进行判定）

  if (data.__ob__ instanceof Observer) {
    //说明被代理过 就不需要再次代理
    return data.__ob__;
  }
  return new Observer(data);
}

//重写数组的部分方法

let oldArrayProto = Array.prototype; //获取数组的原型
export let newArrayProto = Object.create(oldArrayProto); //将原有的原型加在新数组原型上

//找到所有的变异方法

let methods = ["push", "pop", "shift", "unshift", "splice", "sort", "reverse"];
methods.forEach((method) => {
  //arr.push(1,2,3)
  newArrayProto[method] = function (...args) {
    //调用原来的方法修改数组，函数的劫持，切片编程
    const result = oldArrayProto[method].call(this, ...args);
    // console.log('method',method);
    //对新增的数据再次进行劫持
    let inserted;
    let ob = this.__ob__;
    switch (method) {
      case "push":
      case "unshift":
        inserted = args;
        break;
      case "splice": //arr.splice(0,1,{a:1})//第一个是删除的位置，第二个是个数
        inserted = args.slice(2);
        break;
      default:
        break;
    }
    if (inserted) {
      //对新增内容再次进行观测,这是新的数组，可以使用observeArray进行观测，那么可以将Observer的实例对象，放在data的某一个值上
      ob.observeArray(inserted);
    }
    return result;
  };
});

const startTagOpen = new RegExp(`^<${qnameCapture}`); //它匹配到的分组是一个标签名<xxx> 匹配开始标签名
const endTag = new RegExp(`^<\\/${qnameCapture}[^>]*>`); //匹配的是</xxx> 最终匹配到结束标签名
const attribute =
  /^\s*([^\s"'<>\/=]+)(?:\s*(=)\s*(?:"([^"]*)"+|'([^']*)'+|([^\s"'=<>`]+)))?/; //匹配属性 a="xxxx" b  =  'xxx' c = xxx
//第一个分组是属性的key，value是分组3或分组4或者分组5
const startTagClose = /^\s*(\/?)>/; //可以匹配<div>或者<br/>
const defaultTagRE = /\{\{((?:.|\n)+?)\}\}/g; //匹配双括号，内容是表达式的变量

import { initState } from "./state";
import { compileToFunction } from "./compiler/index";
export function initMixin(Vue) {
  //给Vue 增加init方法
  Vue.prototype._init = function (options) {
    //用于初始化操作
    //vue vm.$options 就是获取用户的配置
    const vm = this; //
    vm.$options = options; //把用户配置赋值给vm.,挂载到vm身上 使用$标识表示这是vue里面的
    //初始化状态
    initState(vm);
    //判断是否由el属性
    if (options.el) {
      vm.$mount(options.el); //挂载
    }
  };
  Vue.prototype.$mount = function (el) {
    const vm = this;
    el = document.querySelector(el);
    let op = vm.$options;
    if (!op.render) {
      //如果没有render函数
      let template; //没有render看是否写了template。没有写template采用外部的template
      if (!op.template && el) {
        //没有模版但是有el
        template = el.outerHTML;
      } else {
        template = op.template; //如果有el则采用模版
      }
      // console.log(template);
      if (template) {
        //存在模版就对模版进行编译
        const render = compileToFunction(template);
        op.render = render; //把编译后的render函数赋值给render
      }
    }
    op.render;
    //script标签引用的vue.global.js这个编译过程是在浏览器进行的，runtime是不包含模版编译的，整个编译是打包的时候通过loader来转义.vue文件的
    //用runtime的时候不能使用template模版的
  };
}

import { parseHTML } from "./parse";
export function compileToFunction(template) {
  //1.将template转化为ast语法树
  let ast = parseHTML(template);
  // 2.生成render函数（render方法执行后返回的结果是虚拟DOM）
}

const ncname = `[a-zA-Z_][\\-\\.0-9_a-zA-Z]*`;
const qnameCapture = `((?:${ncname}\\:)?${ncname})`;

const startTagOpen = new RegExp(`^<${qnameCapture}`); //它匹配到的分组是一个标签名<xxx> 匹配开始标签名
const endTag = new RegExp(`^<\\/${qnameCapture}[^>]*>`); //匹配的是</xxx> 最终匹配到结束标签名 分组1是标签名
const attribute =
  /^\s*([^\s"'<>\/=]+)(?:\s*(=)\s*(?:"([^"]*)"+|'([^']*)'+|([^\s"'=<>`]+)))?/; //匹配属性 a="xxxx" b  =  'xxx' c = xxx
//第一个分组是属性的key，value是分组3或分组4或者分组5
const startTagClose = /^\s*(\/?)>/; //可以匹配<div>或者<br/>
const defaultTagRE = /\{\{((?:.|\n)+?)\}\}/g; //匹配双括号，内容是表达式的变量

export function parseHTML(html) {
  // html最开始肯定是一个<
  //最终需要转化为一颗抽象的语法树

  const ELEMENT_TYPE = 1; //元素类型1
  const TEXT_TYPE = 3; //文本类型3
  const stack = []; //存放标签的栈
  let currentParent = null; //指向栈中的最后一个
  let root = null; //根节点

  function createASTElement(tag, attrs) {
    return {
      tag: tag,
      type: ELEMENT_TYPE,
      children: [],
      attrs,
      parent: null,
    };
  }

  function start(tag, attrs) {
    //给标签名和属性
    const node = createASTElement(tag, attrs); //创造ast结点
    if (!root) {
      root = node; //如果树为空，则为根节点
    }
    if (currentParent) {
      node.parent = currentParent; //当前结点的父节点是当前的父节点
      currentParent.children.push(node); //把它父亲结点的儿子指向它；
    }
    stack.push(node); //把当前的标签名压入栈中
    currentParent = node;
  }
  function chars(text) {
    //文本放在当前结点中
    text = text.replace(/\s/g, ""); //如果空格超过两个以上就删除两个以上
    text &&
      currentParent.children.push({
        type: TEXT_TYPE,
        text,
        parent: currentParent,
      });
  }
  function end(tag) {
    stack.pop(); //弹出最后一个
    currentParent = stack[stack.length - 1];
  }
  function advance(len) {
    html = html.substring(len);
  }
  function parseStartTag() {
    const start = html.match(startTagOpen); //
    if (start) {
      const match = {
        tagName: start[1],
        attrs: [],
        // start: index
      };
      advance(start[0].length); //匹配上了就进行截取
      // console.log(match,html);
      let attr, end;
      while (
        !(end = html.match(startTagClose)) &&
        (attr = html.match(attribute))
      ) {
        advance(attr[0].length);
        match.attrs.push({
          name: attr[1],
          value: attr[3] || attr[4] || attr[5] || true,
        }); //true是为了弄disabled
      }
      if (end) advance(end[0].length); //结束的尖角号
      return match;
    }
    //如果不是开始标签的结束就一直匹配

    // console.log(html);
    return false;
  }
  while (html) {
    //如果textEnd为0，说明是一个开始标签或者结束标签   如果textEnd>0说明就是文本的结束位置
    let textEnd = html.indexOf("<"); //如果indexOf中的索引是0，则说明是个标签
    if (textEnd === 0) {
      const startTagMatch = parseStartTag(); //开始标签的匹配结果
      if (startTagMatch) {
        //解析到开始标签
        start(startTagMatch.tagName, startTagMatch.attrs);
        continue;
      }
      let endTagMatch = html.match(endTag); //匹配结束标签
      if (endTagMatch) {
        advance(endTagMatch[0].length);
        end(endTagMatch[1]);
        // console.log(endTagMatch);
        continue;
      }
    }
    if (textEnd > 0) {
      let text = html.substring(0, textEnd); //文本内容
      if (text) {
        chars(text); //将文本内容传递给chars
        advance(text.length);
      }
    }
  }
  // console.log(root);
  return root;
}

import { parseHTML } from "./parse";

function genProps(attrs) {
  let str = "";
  for (let i = 0; i < attrs.length; i++) {
    let attr = attrs[i];
    if (attr.name === "style") {
      //  color:red ==> {color:'red'}
      let obj = {};
      attr.value.split(";").forEach((item) => {
        //qs库
        let [key, value] = item.split(":");
        obj[key] = value;
      });
      attr.value = obj;
    }
    str += `${attr.name}:${JSON.stringify(attr.value)},`;
  }
  return `{${str.slice(0, -1)}}`; //去掉最后一个逗号
}

const defaultTagRE = /\{\{((?:.|\r?\n)+?)\}\}/g; //匹配双括号，内容是表达式的变量
function gen(node) {
  if (node.type === 1) {
    //说明是元素
    return codegen(node);
  } else {
    //文本两种情况
    let text = node.text;
    if (!defaultTagRE.test(text)) {
      //纯文本
      return `_v(${JSON.stringify(text)})`;
    } else {
      //_v(_s(name)+'hello'+_s(age))
      let tokens = [];
      let match;
      defaultTagRE.lastIndex = 0; //从文本开头执行匹配,每次exec后,lastIndex都会更新为下一次匹配开始的位置
      let lastIndex = 0; //最后匹配的位置
      while ((match = defaultTagRE.exec(text))) {
        //使用正则来捕获文本
        let index = match.index; //匹配的位置
        if (index > lastIndex) {
          //比如 {{name}} hello {{age}},取得就是 hello 这段
          tokens.push(JSON.stringify(text.slice(lastIndex, index)));
        }
        tokens.push(`_s(${match[1].trim()})`);
        lastIndex = index + match[0].length; //更新最后匹配的位置
      }
      // 防止插入语法后面还存在一些文本
      if (lastIndex < text.length) {
        tokens.push(JSON.stringify(text.slice(lastIndex)));
      }
      return `_v(${tokens.join("+")})`;
    }
  }
}

function genChildren(children) {
  return children.map((item) => gen(item));
}

function codegen(ast) {
  let children = genChildren(ast.children);
  let code = `_c('${ast.tag}',${
    ast.attrs.length > 0 ? genProps(ast.attrs) : "null"
  }${ast.children.length > 0 ? `,${children}` : ",null"})`;
  return code;
}

export function compileToFunction(template) {
  //1.将template转化为ast语法树
  let ast = parseHTML(template);
  // console.log(ast);
  // 2.生成render函数（render方法执行后返回的结果是虚拟DOM）
  //将ast树生成为类似于下面的字符串
  //  _c('div',{id:'app'},_c('div',{style:{color:'red'}},_v(_s(name)+'hello'),_c('span',undefine,_v(_s(age)))))
  //
  let code = codegen(ast);
  code = `with(this){return ${code}}`;
  let render = new Function(code); //根据代码生成render函数
  return render;
}

export function compileToFunction(template) {
  //1.将template转化为ast语法树
  let ast = parseHTML(template);
  // console.log(ast);
  // 2.生成render函数（render方法执行后返回的结果是虚拟DOM）
  //将ast树生成为类似于下面的字符串
  //  _c('div',{id:'app'},_c('div',{style:{color:'red'}},_v(_s(name)+'hello'),_c('span',undefine,_v(_s(age)))))
  //
  let code = codegen(ast);
  code = `with(this){return ${code}}`;
  let render = new Function(code); //根据代码生成render函数
  return render;
}

import { mountComponent } from "./lifeCycle";
//...
Vue.prototype.$mount = function (el) {
  //....
  mountComponent(vm, el);
};

export function initLifeCycle(Vue) {
  Vue.prototype._updata = function (vnode) {};
  Vue.prototype._render = function () {};
}

export function mountComponent(vm, el) {
  //调用render方法产生虚拟DOM
  vm._updata(vm._render()); //vm.$options.render()渲染虚拟结点,vm._update()生成真实DOM
  // 根据虚拟DOM产生真实DOM
  // 3.插入到el元素中
}

import { createElementVNode } from "./vdom/index";
import { createTextNodeVNode } from "./vdom/index";

export function initLifeCycle(Vue) {
  Vue.prototype._updata = function (vnode) {
    //将虚拟DOM转化为真实DOM
    const vm = this;
    const el = vm.$el;
    //这里vnode是虚拟节点,是真实节点
    patch(el, vnode); //使用vnode,更新出真正的dom
    //patch既有初始化的功能,又有更新的功能
  };
  Vue.prototype._c = function () {
    return createElementVNode(this, ...arguments);
  };
  // _c('div',{},...children)
  Vue.prototype._v = function () {
    return createTextNodeVNode(this, ...arguments);
  };
  // _v(text)
  Vue.prototype._s = function (value) {
    if (typeof value !== "object") return value;
    return JSON.stringify(value);
  };
  Vue.prototype._render = function () {
    const vm = this;
    // 让with中的this指向vm
    // console.log(vm.name,vm.age);
    return vm.$options.render.call(vm); //通过ast语法转义后生成的render方法
  };
}

export function mountComponent(vm, el) {
  //这里的el是通过querySelector处理过的
  vm.$el = el;
  //调用render方法产生虚拟DOM
  vm._updata(vm._render()); //vm.$options.render()渲染虚拟结点,vm._update()生成真实DOM
  // 根据虚拟DOM产生真实DOM
  // 3.插入到el元素中
}

// h函数,_c函数都是调用这些
export function createElementVNode(vm, tag, data, ...children) {
  if (data == null) {
    data = {};
  }
  let key = data.key || null;
  if (key) {
    delete data.key;
  }
  return VNode(vm, tag, key, data, children);
}

// _v
export function createTextNodeVNode(vm, text) {
  return VNode(vm, undefined, undefined, undefined, undefined, text);
}
// 创建虚拟DOM,和ast一样吗?
// ast是做的语法上的转化,他描述的是语法本身(可以描述js css html)
// 虚拟DOM是描述的dom元素,可以增加一些自定义属性(描述dom)
function VNode(vm, tag, key, data, children, text) {
  return {
    vm,
    tag,
    key,
    data,
    children,
    text,
  };
}

function createElm(vnode) {
  let { tag, data, children, text } = vnode;
  if (typeof tag === "string") {
    //标签
    vnode.el = document.createElement(tag); // 这里将真实节点和虚拟节点对应起来，后续如果修改属性了
    patchProps(vnode.el, data); // 处理data
    children.forEach((child) => {
      vnode.el.appendChild(createElm(child));
    });
  } else {
    //就是创建文本
    vnode.el = document.createTextNode(text);
  }
  return vnode.el;
}

function patchProps(el, props) {
  for (let key in props) {
    //styly{color:'red'}
    if (key === "style") {
      for (let styleName in props.style) {
        el.style[styleName] = props.style[styleName];
      }
    } else {
      el.setAttribute(key, props[key]); //这里将属性都设置到真实dom上
    }
  }
}

function patch(oldVNode, vnode) {
  //初渲染和后面的diff渲染一样的
  const isRealElement = oldVNode.nodeType; //nodeType是js原生属性,如果是元素节点的那么值就是1
  if (isRealElement) {
    const elm = oldVNode; //这里oldVNode是真实dom
    const parentElm = elm.parentNode; //拿到真实元素

    let newElm = createElm(vnode);
    parentElm.insertBefore(newElm, elm); //将新节点插入到老节点后面
    parentElm.removeChild(elm); //删除老节点
    return newElm;
  } else {
    // diff算法
  }
}

export function mountComponent(vm, el) {
  //这里的el是通过querySelector处理过的
  vm.$el = el;
  //调用render方法产生虚拟DOM
  const updateComponent = vm._updata(vm._render()); //vm.$options.render()渲染虚拟结点,vm._update()生成真实DOM
  // 根据虚拟DOM产生真实DOM
  // 3.插入到el元素中
  new Watcher(vm, updateComponent, true); //这里的true标识着一个渲染过程
}

let id = 0;
class Dep {
  constructor() {
    this.id = id++; //属性的dep需要收集watcher
    this.subs = []; //存放着当前属性对应的watcher有哪些
  }
  depend() {
    //为了避免一个模板中使用两个数据导致重复收集,除了dep->watcher还希望watcher->dep
    // this.subs.push(Dep.target);//收集watcher这样写会重复

    Dep.target.addDep(this); //收集dep,先让watcher收集到dep,再让dep存储watcher
    // 一个组件中由多个属性组成(那么对应一个watcher监视多个dep)
  }
  addSub(watcher) {
    this.subs.push(watcher);
  }
  notify() {
    this.subs.forEach((watcher) => watcher.update()); //让视图去更新
  }
}

Dep.target = null;

export default Dep;

import Dep from "./dep";

let id = 0;

// 1)当我们创建渲染watcher的时候我们会把当前的渲染watcher放在Dep.target上
// 2)调用_render()会取值走到get上

class Watcher {
  //不同组件有不同的watcher
  constructor(vm, fn, options) {
    this.id = id++;
    this.renderWatcher = options;
    this.getter = fn; //getter意味调用这个函数可以发生取值操作
    this.deps = []; //收集依赖
    this.depsId = new Set(); //收集依赖的id
    this.get();
  }
  get() {
    Dep.target = this; //静态属性只有一份
    this.getter(); //会去vm上取值,当渲染时就会有取值操作触发getter,然后在getter里面操作
    Dep.target = null; //渲染完成就清空,只是在模板中收集的时候才会做依赖收集
  }
  addDep(dep) {
    //一个组件对应多个属性,重复的属性无需记录
    let id = dep.id;
    if (!this.depsId.has(id)) {
      this.deps.push(dep);
      this.depsId.add(id);
      dep.addSub(this);
    }
  }
  update() {
    this.get(); //重新更新
  }
}

//需要给每个属性添加一个dep,目的是收集watcher
// n个dep对应一个视图(一个watcher)
// 一个属性对应多个组件,一个dep对应多个watcher    所以两者关系是多对多

export default Watcher;

export function defineReactive(data, key, val) {
  //形成闭包，值不会消失
  //如果数据是对象那么再次递归处理进行劫持
  observe(val);
  let dep = new Dep(); //每一个属性都有dep
  Object.defineProperty(data, key, {
    get() {
      //取值会执行get
      if (Dep.target) {
        dep.depend(); //让这个属性的收集器记住当前的watcher
      }
      return val;
    },
    set(newVal) {
      if (newVal !== val) {
        val = newVal;
        dep.notify(); //值更新了，通知更新视图
      }
    },
  });
}

//.....以前的都一样,下面是改变内容
class Watcher {
  //.....
  update() {
    queueWatcher(this); //将该监视器放入调度队列中
  }
  run() {
    this.get(); //真正执行渲染操作
  }
}

let queue = []; //因为可能更新同一属性多次，那么需要去重，只保留最后一个
let has = {}; //使用对象去重，或者set去重
let pending = false; //进行防抖操作，无论调用多少次，只执行一次

function flushSchedulerQueue() {
  let flushQueue = queue.slice(0); //拷贝一下queue
  flushQueue.forEach((q) => q.run()); //在刷新过程中可能存在新的watcher，重新被放回在队列中
  queue = [];
  has = {};
  pending = false;
}

function queueWatcher(watcher) {
  let id = watcher.id; //取出每个监视器的唯一标识id
  if (has[id] == null) {
    queue.push(watcher);
    has[id] = true;
    //可能有多个组件不管update多少次，最终只执行一次刷新操作
    if (!pending) {
      nextTick(flushSchedulerQueue, 0); //刷新调度队列
      pending = true;
    }
  }
}

let callbacks = [];
let waiting = false;
function flushCallbacks() {
  waiting = false;
  let cbs = callbacks.slice(0);
  callbacks = [];
  cbs.forEach((cb) => cb());
}

let timerFunc;
if (Promise) {
  timerFunc = (flushCallbacks) => {
    Promise.resolve().then(flushCallbacks);
  };
} else if (MutationObserver) {
  let observer = new MutationObserver(flushCallbacks); //这里传入的回调是异步执行的
  let textNode = document.createTextNode(1);
  observer.observe(textNode, {
    characterData: true,
  }); //让observer监控文本,如果数据变化,那么就执行cb任务
  timerFunc = () => {
    textNode.textContent = 2;
  };
} else if (setImmediate) {
  timerFunc = () => {
    setImmediate(flushCallbacks);
  };
} else {
  timerFunc = () => {
    setTimeout(flushCallbacks, 0);
  };
}

//nextTick中没有直接使用某个api,而是采用优雅降级的方式
// 内部采用promise(ie不兼容)降级为MutationObserver(h5的api) 可以再降级为ie专享setImmediate   降级为 setTimeout
export function nextTick(cb) {
  //先内部还是先用户
  callbacks.push(cb); //维护nextTick中的callback方法,同步操作
  if (!waiting) {
    // debugger;
    timerFunc();
    waiting = true;
  }
}

//...在其中的改变一些东西
class Observer{
    constructor(data){
        //添加一个依赖收集器,其他和上面一样
        this.dep = new Dep();
    }
}
//然后再defineProperty里面进行一些改变
export default defineProperty(date,key,val){
    let childOb = observe(val);//observe函数返回的Observer对象
    let dep = new Dep();//每一个属性都有dep
  Object.defineProperty(data,key,{
    get(){//取值会执行get
      if(Dep.target){
        dep.depend();//让这个属性的收集器记住当前的watcher
        if(childOb){//比如对象,数组类
          childOb.dep.depend();//让数组或者对象本身进行依赖收集
          if(Array.isArray(val)){//如果值还是数组
              dependArray(val);
          }
        }
      }
      return val;
    }//set这些和之前一样
  })
}
//多一个函数
function dependArray(val){
    for(let i = 0; i < val.length; i ++){
        let current = val[i];
        current.__ob__.dep.depend();//__ob__是Observer的实例对象，上面有dep收集器，调用其依赖收集的方法
        if(Array.isArray(current)){
            dependArray(current);//如果对象里面套对象再套对象
        }
    }
}

methods.forEach((method) => {
  newArrayProto[method] = function (...args) {
    //上面和之前一样
    ob.dep.notify(); //ob是数组的实例对象,然后在上面添加了dep属性
    return result;
  };
});

new Vue({
  el: "#app",
  data: {
    firstname: "赤",
    lastname: "橙",
  },
  computed: {
    fullname() {
      return this.firstname + this.lastname;
    },
  },
});

//添加一些方法,在暴露之前
let stack = [];
export function pushTarget(watcher){
    let stack = [];
export function pushTarget(watcher){
  stack.push(watcher);
  Dep.target = watcher;
  // 渲染时会将watcher入栈，渲染完就出栈
}

export function popTarget(){
  stack.pop();
  Dep.target = stack[stack.length - 1];
}
export default Dep;

class Watcher{
    constructor(vm,fn,options){
        //和之前一样
        this.lazy = options.lazy;
        this.dirty = this.lazy;//缓存值
        this.lazy?undefined:this.get();
        this.vm = vm;//防止在计算属性取得getter时,调用的this不是对应的this
    }
  	//方法只是修改了get和update,其他没有改变,添加了evaluate
    get(){
        pushTarget();
        let val = this.getter().call(this.vm);//因为调用this.firstname时不使用回调,this会丢失
        popTarget();
        return value;
    }
    evaluate(){
        this.value = this.get();//缓存存储值,多次用到而没有修改的计算属性时,就是拿到的缓存值
        this.dirty = false;
    }
    update(){
        if(this.lazy){//如果是计算属性,依赖属性变化了,就标识是脏值
          this.dirty = true;
        }else{
          queueWatcher(this);//暂存watcher
        // this.get();//重新更新
     }
     depend(){
         let i = this.deps.length;
         while(i--){
             this.deps[i].depend();//让计算属性watcher也收集渲染watcher
         }
     }
  }
}