快捷導(dǎo)航

vue3源碼剖析之簡單實(shí)現(xiàn)方法

更新時間：2021年09月07日 11:51:58 作者：ClyingDeng

源碼的重要性相信不用再多說什么了吧,特別是用Vue 框架的,一般在面試的時候面試官多多少少都會考察源碼層面的內(nèi)容,下面這篇文章主要給大家介紹了關(guān)于vue3源碼剖析之簡單實(shí)現(xiàn)的相關(guān)資料,需要的朋友可以參考下

前言

最近，由于我的第一個vue3 + ts的正式項(xiàng)目，已經(jīng)進(jìn)入驗(yàn)收階段。聽你們老說vue3、vue3的，我就想著去看看vue3到底和vue2有啥區(qū)別。🤷🏻‍♀️🤷🏻‍♀️🤷🏻‍♀️

文章主要闡述vue3的API用法，以及簡單地實(shí)現(xiàn)一個vue3。帶大家感受一下vue3與之前vue2的區(qū)別。以及簡單帶大家揭秘源碼中vue3初始化的一個流程。

🍹準(zhǔn)備工作

要想看看vue3內(nèi)部的源碼是咋搞得，首先跟vue2源碼剖析一樣，先從github上下一份源碼到本地。

接著就是安裝依賴：

yarn --ignore-scripts

在你執(zhí)行命令的時候可能會遇到node版本過低的錯誤：

解決此問題可以升級自己的node版本，或者忽略該engine。

如果選擇忽略的話可以設(shè)置

yarn config set --ignore-engines true

然后執(zhí)行依賴安裝。

依賴安裝完成后，編譯打包生成vuejs文件：

yarn dev

需要調(diào)試的話，可以在packages\vue\examples文件下建立測試文件。引用打包后的vue文件，可以應(yīng)用packages\vue\dist\vue.global.js。

🍲vue3用法

vue3的特性我就不多闡述了，就vue3的用法而言，更傾向于函數(shù)式編程，通過對外暴露Vue中的createApp()API，以工廠函數(shù)的方式創(chuàng)建了一個應(yīng)用程序?qū)嵗Ｏ啾容^vue2的new Vue實(shí)例，更加貼切。

在源碼文件中，我們新建一個init.html文件。

<script src="../dist/vue.global.js"></script>
 <body>
  <div id="app">{{name}}</div>
  <script>
    const { createApp } = Vue
    const app1 = createApp({
      data() {
        return {
          name: 'clying'
        }
      },
      setup() {
        return {
          name: 'deng'
        }
      }
    }).mount('#app')
  </script>
</body>

根據(jù)上例，我們可以看出vue3是即支持Composition API,也支持Options API，兩者可以同時使用。

但是，我們可以看到在data和setup中，我同時使用了一個name變量進(jìn)行賦值。那么頁面中會展示哪一個呢？

3！2！1！上答案：

可以明顯看出composition-api中setup優(yōu)先級更高。

當(dāng)然也可以在源碼中的packages\runtime-core\src\componentPublicInstance.ts看到，通過switch先判斷setup中的變量是否存在，然后再去判斷data中的變量。所以setup中變量的優(yōu)先級會高于data中的變量。

🍖實(shí)現(xiàn)

通過上面的用法，我們可以知道vue3中會對外暴露一個Vue變量，內(nèi)部存在createApp、reactive等方法。

在此，我們先實(shí)現(xiàn)vue3的初始化框架。就createApp而言，它會接收用戶傳入的參數(shù)：data()、setup()等，最后進(jìn)行實(shí)例掛載mount。所以在createApp中會接收一些參數(shù)options、內(nèi)部還會存在mount方法。

const Vue = {
    createApp(options) {
      return {
        mount(selector) { //解析、獲取render、掛載
        }
      }
    }
}

在mount中通過selector獲取到宿主元素。

接下來就是對模板的編譯，由于將template編譯AST后，依舊要轉(zhuǎn)成render函數(shù)。在此我們簡化操作，在編譯時直接返回一個render。

mount(selector) { //解析、獲取render、掛載
  const parent = document.querySelector(selector)
  console.log(parent);
  if (!options.render) {
    // 編譯返回render
    options.render = this.compileToFunction(parent.innerHTML)
  }
},
compileToFunction(template) {
  return function render() {
    const h = document.createElement('div')
    h.textContent = this.name
    return h
  }
}

拿到render之后，執(zhí)行它，將其添加到宿主元素中，將老的節(jié)點(diǎn)刪除。

在執(zhí)行render的時候，我們需要注意它的this指向。如果給它綁定data，那么它展示的就會使data中的name。

mount(selector) { //解析、獲取render、掛載
  const parent = document.querySelector(selector)
  console.log(parent);
  if (!options.render) {
    // 編譯返回render
    options.render = this.compileToFunction(parent.innerHTML)
  }
  // 執(zhí)行render 
  const el = options.render.call(options.data())
  parent.innerHTML = ''
  parent.appendChild(el)
},

可以看到頁面上展示的是clying。反之，如果綁定的是options.setup()，那么頁面上出現(xiàn)的就是deng。

對于vue3的用法，我們知道setup的優(yōu)先級是高于data的。那我們可以使用代理啊，將兩者的屬性變量，通過代理的方式，糅合到一起，優(yōu)先考慮setup。當(dāng)訪問相同name時，實(shí)際訪問的就是setup中的name。

mount(selector) { //解析、獲取render、掛載
  const parent = document.querySelector(selector)
  console.log(parent);
  if (!options.render) {
    // 編譯返回render
    options.render = this.compileToFunction(parent.innerHTML)
  }
  if (options.setup) {
    this.setupState = options.setup()
  }
  if (options.data) {
    this.data = options.data()
  }
  this.proxy = new Proxy(this, {
    get(target, key) {
      if (key in target.setupState) {
        return target.setupState[key]
      } else if (key in target.data) {
        return target.data[key]
      }// 還可能存在props、watch等其他同名變量
    }, 
    set(target, key, value, newVal) {
      console.log(target, key, value, newVal);
    }
  })
  // 執(zhí)行render  this.proxy就是整合setup和data的上下文
  const el = options.render.call(this.proxy)
  console.log(el, options.render);
  parent.innerHTML = ''
  parent.appendChild(el)
},

在proxy的get中，先看setup中是否存在目標(biāo)屬性，如果存在的話返回的就是setup中的屬性變量，否則就是data中的。在渲染的時候，直接將整合的變量集傳入即可。當(dāng)然proxy中也會存在set方法，需要先代理，然后在外部獲取變量做值得修改才能觸發(fā)，在此有興趣的同學(xué)可以自行研究哦！