鎵嬪啓Vue2.0婧愮爜锛堝洓锛?娓叉煋鏇存柊鍘熺悊

Posted 2021-07-18 鍓嶇椴ㄩ奔鍝?/a> 鎵嬪

銆?馃専  鍝堝柦~ 杩欓噷鏄?/span> 銆?/span>鍓嶇椴ㄩ奔鍝ャ€?/strong>

鍔卞織璁╂瘡浣嶅皬浼欎即濡傞波楸拣煢?nbsp; 鑸湪鑱屽満涓€滄í鍐茬洿鎾炩€濓紒銆?/span>

鍓嶈█

姝ょ瘒涓昏鎵嬪啓 Vue2.0 婧愮爜-鍒濆娓叉煋鍘熺悊

涓婁竴绡囧挶浠富瑕佷粙缁嶄簡 Vue 妯℃澘缂栬瘧鍘熺悊 瀹冩槸 Vue 鐢熸垚铏氭嫙 dom 鐨勫熀纭€ 妯℃澘缂栬瘧鏈€鍚庤浆鍖栨垚浜?render 鍑芥暟 涔嬪悗鍙堝浣曡兘鐢熸垚鐪熷疄鐨?dom 鑺傜偣鍘绘浛鎹㈡帀 el 閫夐」閰嶇疆鍛?閭ｄ箞閫氳繃姝ょ瘒鐨勫涔犲氨鍙互鐭ラ亾 Vue 鍒濆娓叉煋鐨勬祦绋?姝ょ瘒涓昏鍖呭惈铏氭嫙 dom 浠ュ強鐪熷疄 dom 鐨勭敓鎴?/p>

閫傜敤浜虹兢锛?/strong> 娌℃椂闂村幓鐪嬪畼鏂规簮鐮佹垨鑰呯湅婧愮爜鐪嬬殑姣旇緝鎳佃€屼笉鎯冲幓鐪嬬殑鍚屽

---

姝ｆ枃

1.缁勪欢鎸傝浇鍏ュ彛

// src/init.js

Vue.prototype.$mount = function (el) {
  const vm = this;
  const options = vm.$options;
  el = document.querySelector(el);

  // 濡傛灉涓嶅瓨鍦╮ender灞炴€?/span>
  if (!options.render) {
    // 濡傛灉瀛樺湪template灞炴€?/span>
    let template = options.template;

    if (!template && el) {
      // 濡傛灉涓嶅瓨鍦╮ender鍜宼emplate 浣嗘槸瀛樺湪el灞炴€?nbsp;鐩存帴灏嗘ā鏉胯祴鍊煎埌el鎵€鍦ㄧ殑澶栧眰html缁撴瀯锛堝氨鏄痚l鏈韩 骞朵笉鏄埗鍏冪礌锛?/span>
      template = el.outerhtml;
    }

    // 鏈€缁堥渶瑕佹妸tempalte妯℃澘杞寲鎴恟ender鍑芥暟
    if (template) {
      const render = compileToFunctions(template);
      options.render = render;
    }
  }

  // 灏嗗綋鍓嶇粍浠跺疄渚嬫寕杞藉埌鐪熷疄鐨別l鑺傜偣涓婇潰
  return mountComponent(vm, el);
};

鎺ョ潃鐪?mount 鏂规硶 鎴戜滑涓昏鍏虫敞鏈€鍚庝竴鍙ヨ瘽 mountComponent 灏辨槸缁勪欢瀹炰緥鎸傝浇鐨勫叆鍙ｅ嚱鏁?杩欎釜鏂规硶鏀惧湪婧愮爜鐨?lifecycle 鏂囦欢閲岄潰 浠ｈ〃浜嗕笌鐢熷懡鍛ㄦ湡鐩稿叧 鍥犱负鎴戜滑缁勪欢鍒濆娓叉煋鍓嶅悗瀵瑰簲鏈?beforeMount 鍜?mounted 鐢熷懡鍛ㄦ湡閽╁瓙

2.缁勪欢鎸傝浇鏍稿績鏂规硶 mountComponent

// src/lifecycle.js
export function mountComponent(vm, el) {
  // 涓婁竴姝ユā鏉跨紪璇戣В鏋愮敓鎴愪簡render鍑芥暟
  // 涓嬩竴姝ュ氨鏄墽琛寁m._render()鏂规硶 璋冪敤鐢熸垚鐨剅ender鍑芥暟 鐢熸垚铏氭嫙dom
  // 鏈€鍚庝娇鐢╲m._update()鏂规硶鎶婅櫄鎷焏om娓叉煋鍒伴〉闈?/span>

  // 鐪熷疄鐨別l閫夐」璧嬪€肩粰瀹炰緥鐨?el灞炴€?nbsp;涓轰箣鍚庤櫄鎷焏om浜х敓鐨勬柊鐨刣om鏇挎崲鑰佺殑dom鍋氶摵鍨?/span>
  vm.$el = el;
  //   _update鍜?_render鏂规硶閮芥槸鎸傝浇鍦╒ue鍘熷瀷鐨勬柟娉?nbsp; 绫讳技_init
  vm._update(vm._render());
}

鏂板缓 lifecycle.js 鏂囦欢 琛ㄧず鐢熷懡鍛ㄦ湡鐩稿叧鍔熻兘 鏍稿績瀵煎嚭 mountComponent 鍑芥暟 涓昏浣跨敤 vm._update(vm._render())鏂规硶杩涜瀹炰緥鎸傝浇

3.render 鍑芥暟杞寲鎴愯櫄鎷?dom 鏍稿績鏂规硶 _render

// src/render.js

import { createElement, createTextNode } from "./vdom/index";

export function renderMixin(Vue) {
  Vue.prototype._render = function () {
    const vm = this;
    // 鑾峰彇妯℃澘缂栬瘧鐢熸垚鐨剅ender鏂规硶
    const { render } = vm.$options;
    // 鐢熸垚vnode--铏氭嫙dom
    const vnode = render.call(vm);
    return vnode;
  };

  // render鍑芥暟閲岄潰鏈塤c _v _s鏂规硶闇€瑕佸畾涔?/span>
  Vue.prototype._c = function (...args) {
    // 鍒涘缓铏氭嫙dom鍏冪礌
    return createElement(...args);
  };

  Vue.prototype._v = function (text) {
    // 鍒涘缓铏氭嫙dom鏂囨湰
    return createTextNode(text);
  };
  Vue.prototype._s = function (val) {
    // 濡傛灉妯℃澘閲岄潰鐨勬槸涓€涓璞?nbsp; 闇€瑕丣SON.stringify
    return val == null
      ? ""
      : typeof val === "object"
      ? JSON.stringify(val)
      : val;
  };
}

涓昏鍦ㄥ師鍨嬪畾涔変簡_render 鏂规硶 鐒跺悗鎵ц浜?render 鍑芥暟 鎴戜滑鐭ラ亾妯℃澘缂栬瘧鍑烘潵鐨?render 鍑芥暟鏍稿績浠ｇ爜涓昏 return 浜?绫讳技浜巁c('div',{id:"app"},_c('div',undefined,_v("hello"+_s(name)),_c('span',undefined,_v("world"))))杩欐牱鐨勪唬鐮?閭ｄ箞鎴戜滑杩橀渶瑕佸畾涔変竴涓媉c _v _s 杩欎簺鍑芥暟鎵嶈兘鏈€缁堣浆鍖栨垚涓鸿櫄鎷?dom

// src/vdom/index.js

// 瀹氫箟Vnode绫?/span>
export default class Vnode {
  constructor(tag, data, key, children, text) {
    this.tag = tag;
    this.data = data;
    this.key = key;
    this.children = children;
    this.text = text;
  }
}

// 鍒涘缓鍏冪礌vnode 绛変簬render鍑芥暟閲岄潰鐨?nbsp;h=>h(App)
export function createElement(tag, data = {}, ...children) {
  let key = data.key;
  return new Vnode(tag, data, key, children);
}

// 鍒涘缓鏂囨湰vnode
export function createTextNode(text) {
  return new Vnode(undefined, undefined, undefined, undefined, text);
}

鏂板缓 vdom 鏂囦欢澶?浠ｈ〃铏氭嫙 dom 鐩稿叧鍔熻兘 瀹氫箟 Vnode 绫?浠ュ強 createElement 鍜?createTextNode 鏂规硶鏈€鍚庨兘杩斿洖 vnode

4.铏氭嫙 dom 杞寲鎴愮湡瀹?dom 鏍稿績鏂规硶 _update

// src/lifecycle.js

import { patch } from "./vdom/patch";
export function lifecycleMixin(Vue) {
  // 鎶奯update鎸傝浇鍦╒ue鐨勫師鍨?/span>
  Vue.prototype._update = function (vnode) {
    const vm = this;
    // patch鏄覆鏌搗node涓虹湡瀹瀌om鏍稿績
    patch(vm.$el, vnode);
  };
}

// src/vdom/patch.js

// patch鐢ㄦ潵娓叉煋鍜屾洿鏂拌鍥?nbsp;浠婂ぉ鍙粙缁嶅垵娆℃覆鏌撶殑閫昏緫
export function patch(oldVnode, vnode) {
  // 鍒ゆ柇浼犲叆鐨刼ldVnode鏄惁鏄竴涓湡瀹炲厓绱?/span>
  // 杩欓噷寰堝叧閿?nbsp; 鍒濇娓叉煋 浼犲叆鐨剉m.$el灏辨槸鍜变滑浼犲叆鐨別l閫夐」  鎵€浠ユ槸鐪熷疄dom
  // 濡傛灉涓嶆槸鍒濆娓叉煋鑰屾槸瑙嗗浘鏇存柊鐨勬椂鍊?nbsp; vm.$el灏辫鏇挎崲鎴愪簡鏇存柊涔嬪墠鐨勮€佺殑铏氭嫙dom
  const isRealElement = oldVnode.nodeType;
  if (isRealElement) {
    // 杩欓噷鏄垵娆℃覆鏌撶殑閫昏緫
    const oldElm = oldVnode;
    const parentElm = oldElm.parentNode;
    // 灏嗚櫄鎷焏om杞寲鎴愮湡瀹瀌om鑺傜偣
    let el = createElm(vnode);
    // 鎻掑叆鍒?nbsp;鑰佺殑el鑺傜偣涓嬩竴涓妭鐐圭殑鍓嶉潰 灏辩浉褰撲簬鎻掑叆鍒拌€佺殑el鑺傜偣鐨勫悗闈?/span>
    // 杩欓噷涓嶇洿鎺ヤ娇鐢ㄧ埗鍏冪礌appendChild鏄负浜嗕笉鐮村潖鏇挎崲鐨勪綅缃?/span>
    parentElm.insertBefore(el, oldElm.nextSibling);
    // 鍒犻櫎鑰佺殑el鑺傜偣
    parentElm.removeChild(oldVnode);
    return el;
  }
}
// 铏氭嫙dom杞垚鐪熷疄dom 灏辨槸璋冪敤鍘熺敓鏂规硶鐢熸垚dom鏍?/span>
function createElm(vnode) {
  let { tag, data, key, children, text } = vnode;
  //   鍒ゆ柇铏氭嫙dom 鏄厓绱犺妭鐐硅繕鏄枃鏈妭鐐?/span>
  if (typeof tag === "string") {
    //   铏氭嫙dom鐨別l灞炴€ф寚鍚戠湡瀹瀌om
    vnode.el = document.createElement(tag);
    // 瑙ｆ瀽铏氭嫙dom灞炴€?/span>
    updateProperties(vnode);
    // 濡傛灉鏈夊瓙鑺傜偣灏遍€掑綊鎻掑叆鍒扮埗鑺傜偣閲岄潰
    children.forEach((child) => {
      return vnode.el.appendChild(createElm(child));
    });
  } else {
    //   鏂囨湰鑺傜偣
    vnode.el = document.createTextNode(text);
  }
  return vnode.el;
}

// 瑙ｆ瀽vnode鐨刣ata灞炴€?nbsp;鏄犲皠鍒扮湡瀹瀌om涓?/span>
function updateProperties(vnode) {
  let newProps = vnode.data || {};
  let el = vnode.el; //鐪熷疄鑺傜偣
  for (let key in newProps) {
    // style闇€瑕佺壒娈婂鐞嗕笅
    if (key === "style") {
      for (let styleName in newProps.style) {
        el.style[styleName] = newProps.style[styleName];
      }
    } else if (key === "class") {
      el.className = newProps.class;
    } else {
      // 缁欒繖涓厓绱犳坊鍔犲睘鎬?nbsp;鍊煎氨鏄搴旂殑鍊?/span>
      el.setAttribute(key, newProps[key]);
    }
  }
}

_update 鏍稿績鏂规硶灏辨槸 patch 鍒濆娓叉煋鍜屽悗缁洿鏂伴兘鏄叡鐢ㄨ繖涓€涓柟娉?鍙槸浼犲叆鐨勭涓€涓弬鏁颁笉鍚?鍒濆娓叉煋鎬讳綋鎬濊矾灏辨槸鏍规嵁铏氭嫙 dom(vnode) 璋冪敤鍘熺敓 js 鏂规硶鍒涘缓鐪熷疄 dom 鑺傜偣骞舵浛鎹㈡帀 el 閫夐」鐨勪綅缃?/p>

5._render 鍜宊update 鍘熷瀷鏂规硶鐨勬贩鍏?/h4>

// src/index.js

import { initMixin } from "./init.js";
import { lifecycleMixin } from "./lifecycle";
import { renderMixin } from "./render";
// Vue灏辨槸涓€涓瀯閫犲嚱鏁?nbsp;閫氳繃new鍏抽敭瀛楄繘琛屽疄渚嬪寲
function Vue(options) {
  // 杩欓噷寮€濮嬭繘琛孷ue鍒濆鍖栧伐浣?/span>
  this._init(options);
}
// _init鏂规硶鏄寕杞藉湪Vue鍘熷瀷鐨勬柟娉?nbsp;閫氳繃寮曞叆鏂囦欢鐨勬柟寮忚繘琛屽師鍨嬫寕杞介渶瑕佷紶鍏ue
// 姝ゅ仛娉曟湁鍒╀簬浠ｇ爜鍒嗗壊
initMixin(Vue);

// 娣峰叆_render
renderMixin(Vue);
// 娣峰叆_update
lifecycleMixin(Vue);
export default Vue;

鏈€鍚庡氨鏄妸瀹氫箟鍦ㄥ師鍨嬬殑鏂规硶寮曞叆鍒?Vue 涓绘枃浠跺叆鍙?杩欐牱鎵€鏈夌殑瀹炰緥閮借兘鍏变韩鏂规硶浜?/p>

6.妯℃澘缂栬瘧鐨勬€濈淮瀵煎浘

鍒濆娓叉煋

灏忕粨

鑷虫 Vue 鐨勫垵濮嬫覆鏌撳師鐞嗗凡缁忓畬缁?缁撳悎鍓嶄袱绡囧搷搴斿紡鏁版嵁鍜屾ā鏉跨紪璇?閭ｄ箞杩欐椂鍊欐垜浠凡缁忓彲浠ユ妸鑷繁鍐欏ソ鐨勬ā鏉挎覆鏌撳埌椤甸潰浜?澶у鍙互鐪嬬潃鎬濈淮瀵煎浘鑷繁鍔ㄦ墜鍐欎竴閬嶆牳蹇冧唬鐮佸搱 閬囧埌涓嶆噦鎴栬€呮湁浜夎鐨勫湴鏂规杩庤瘎璁虹暀瑷€

鍝堝柦, 鎴戞槸銆?span class="mq-285">鍓嶇椴ㄩ奔鍝?/span>銆?/span>

绂绘垚涓哄墠绔ぇ鐗涳紝鍙樊涓€涓?span class="mq-289">鍏虫敞鍟?~

娆㈣繋鑱旂郴鎴戯紝鑾峰彇鏇村璧勬簮涓庡悎浣?nbsp;~

馃専

杩欒繕涓?span class="mq-333">銆屽垎浜€佺偣璧炪€佸湪鐪嬨€?/strong>涓夎繛鍑诲槢