предисловие

В последнее время я готовлю несколько статей и видео из серии Vue.Я несколько раз читал исходный код Vue, но никогда не писал статей по теме, поэтому планирую написать одну недавно.

Цель

Освоение принципов исходного кода стека технологий Vue — конечная цель этой серии статей.

Во-первых, он будет интерпретирован из исходного кода Vue, после чего будет подготовлена ​​серия статей и видеороликов, от подробного анализа исходного кода до手写 Vue 1.0иVue 2.0. После этого будет произведен анализ исходного кода и рукописный ряд окружающих экологических библиотек, таких как: vuex, vue-router, vue-cli и т. д.

Я считаю, что после этой серии серьезных исследований каждый может написать это в своем резюме:Знание принципа исходного кода стека технологий Vue.

подходит для толпы

• Опыт использования стека технологий Vue для ежедневной разработки (добавление, удаление, изменение и проверка)

• Хотите глубже понять принцип реализации фреймворка

• Студенты, которые хотят сменить работу или повысить зарплату с начальником (добавление, удаление, изменение и проверка ничего не стоят)

как научиться

Для серии статей, естественно, лучше всего подходит последовательное обучение, но если у вас есть некоторое представление об исходном коде или вас особенно интересует какая-то часть, вы также можете непосредственно прочитать соответствующие статьи.

Многие привыкли использовать для учебы разрозненное время.Конечно, со статьями о фаст-фуде проблем нет, но если вы хотите заниматься углубленно, то рекомендуется сесть перед компьютером и использовать весь отрезок времени для изучите его сами.

Помните: вы не можете практиковать поддельный дескриптор, просто глядя на него, поэтому вы должны быть усердны в процессе обучения, а не писать или читать, например, заметки, интеллект-карты, примеры кодов, написание комментариев к исходному коду, отладка отладки и т. д. , Нельзя быть ленивым.

Если вы считаете, что эта серия статей полезна для вас, добро пожаловать всемкак,обрати внимание на, и добро пожаловать, чтобы поделиться им с друзьями.

Подготовить

Теперь номер последней версии Vue 22.6.12, поэтому я анализирую и изучаю текущую версию кода.

Скачать исходный код Vue

• git команда

  git clone https://github.com/vuejs/vue.git
  

• идти сgithubСкачать и разархивировать вручную

упаковка

воплощать в жизньnpm iУстановите зависимости, вы можете напрямую установить их в инструменты сквозного тестирования.ctrl + cЭто не повлияет на последующее изучение исходного кода.

source map

Добавьте команду dev в package.json -> скрипты--sourcemap, чтобы можно было просмотреть расположение текущего кода в исходном коде при отладке исходного кода в браузере.

{
  "scripts": {
    "dev": "rollup -w -c scripts/config.js --sourcemap --environment TARGET:web-full-dev"
  }
}

Разработка и отладка

Выполните следующую команду, чтобы запустить среду разработки:

npm run dev

См. следующий эффект, и вdistсоздается в каталогеvue.js.mapфайл, это означает успех. На этом все подготовительные работы завершены, но не меняйте текущую командную строкуctrl + cКогда вы читаете исходный код, вам нужно будет добавить комментарии к исходному коду или даже изменить исходный код.Текущая команда может отслеживать изменения исходного кода, и если какие-либо изменения будут найдены, они будут автоматически упакованы, если вы закроете текущую командную строку, вы обнаружите, что с вашими комментариями Когда код будет написан, будут отклонения от отображения исходного кода при отладке исходного кода в браузере. Так что не выключайте его для лучшего опыта отладки.

Грамотность

воплощать в жизньnpm run buildПосле команды он будет найден вdistВ каталоге создается куча файлов со специальными именами.vue.*.jsфайл, что означают эти специальные имена?

Построить классификацию файлов

	UMD	CommonJS	ES Module
Full	vue.js	vue.common.js	vue.esm.js
Runtime-only	vue.runtime.js	vue.runtime.common.js	vue.runtime.esm.js
Full (production)	vue.min.js	vue.common.prod.js
Runtime-only (production)	vue.runtime.min.js	vue.runtime.common.prod.js

Глоссарий

• Full: Это полный пакет, включающий компилятор (compiler) и время выполнения (runtime).

• Compiler: компилятор, который отвечает за компиляцию строки шаблона (то есть кода шаблона написанного вами html-подобного синтаксиса) в функцию рендеринга синтаксиса JavaScript.

• Runtime: Отвечает за создание экземпляров Vue, функции рендеринга, исправление виртуального DOM и другого кода, в основном весь код, кроме компилятора, относится к коду среды выполнения.

• UMD: совместимый со спецификациями CommonJS и AMD, vue.js, представленный через CDN, представляет собой код спецификации UMD, включая компилятор и среду выполнения.

• CommonJS: типичные приложения, такие как пакеты спецификаций nodeJS, CommonsJS, предназначены для использования более старыми сборщиками, такими как browserify и webpack 1. Их входной файл по умолчаниюvue.runtime.common.js.

• ES Module: современная спецификация JavaScript, пакеты спецификации модуля ES предназначены для использования современными сборщиками, такими как webpack 2 и rollup. Эти сборщики по умолчанию используют пакет только для выполнения.vue.runtime.esm.jsдокумент.

Среда выполнения + компилятор против только среды выполнения

Если вам нужно динамически компилировать шаблоны (например: передать строковый шаблон вtemplateили напишите html-шаблон, предоставив элемент mount), вам понадобится компилятор и, следовательно, полный пакет сборки.

когда вы используетеvue-loaderилиvueifyчас,*.vueШаблоны в файле компилируются в функции рендеринга JavaScript во время сборки. Таким образом, вам не нужен полный пакет, содержащий компилятор, просто используйте пакет, содержащий только среду выполнения.

Пакет только для выполнения на 30% меньше, чем полный пакет. Поэтому старайтесь использовать пакеты, которые содержат только среду выполнения.Если вам нужно использовать полные пакеты, вам нужно настроить их следующим образом:

webpack

module.exports = {
  // ...
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    }
  }
}

Rollup

const alias = require('rollup-plugin-alias')

rollup({
  // ...
  plugins: [
    alias({
      'vue': 'vue/dist/vue.esm.js'
    })
  ]
})

Browserify

Add to your project's package.json:

{
  // ...
  "browser": {
    "vue": "vue/dist/vue.common.js"
  }
}

Структура исходного каталога

Прочитав структуру каталогов, вы сможете получить общее представление об исходном коде и узнать, что искать.

├── benchmarks                  性能、基准测试
├── dist                        构建打包的输出目录
├── examples                    案例目录
├── flow                        flow 语法的类型声明
├── packages                    一些额外的包，比如：负责服务端渲染的包 vue-server-renderer、配合 vue-loader 使用的的 vue-template-compiler，还有 weex 相关的
│   ├── vue-server-renderer
│   ├── vue-template-compiler
│   ├── weex-template-compiler
│   └── weex-vue-framework
├── scripts                     所有的配置文件的存放位置，比如 rollup 的配置文件
├── src                         vue 源码目录
│   ├── compiler                编译器
│   ├── core                    运行时的核心包
│   │   ├── components          全局组件，比如 keep-alive
│   │   ├── config.js           一些默认配置项
│   │   ├── global-api          全局 API，比如熟悉的：Vue.use()、Vue.component() 等
│   │   ├── instance            Vue 实例相关的，比如 Vue 构造函数就在这个目录下
│   │   ├── observer            响应式原理
│   │   ├── util                工具方法
│   │   └── vdom                虚拟 DOM 相关，比如熟悉的 patch 算法就在这儿
│   ├── platforms               平台相关的编译器代码
│   │   ├── web
│   │   └── weex
│   ├── server                  服务端渲染相关
├── test                        测试目录
├── types                       TS 类型声明

Сопутствующее видео

Интерпретация исходного кода Vue (1) — Предисловие

Поиск внимания

Приветствую всех, чтобы следовать за мнойСчет наггетсиСтанция Б, если контент полезен для вас, ставьте лайк, добавляйте в избранное + подписывайтесь

Ссылка на сайт

• Интерпретация исходного кода Vue (1) — Предисловие

• Интерпретация исходного кода Vue (2) — процесс инициализации Vue

• Интерпретация исходного кода Vue (3) — адаптивный принцип

• Интерпретация исходного кода Vue (4) — асинхронное обновление

• Интерпретация исходного кода Vue (5) — глобальный API

• Интерпретация исходного кода Vue (6) — метод экземпляра

• Интерпретация исходного кода Vue (7) — Hook Event

• Интерпретация исходного кода Vue (8) — анализ компилятора

• Интерпретация исходного кода Vue (9) — оптимизация компилятора

• Интерпретация исходного кода Vue (10) — Функция рендеринга, сгенерированная компилятором

• Интерпретация исходного кода Vue (11) — помощник рендеринга

• Интерпретация исходного кода Vue (12) - патч

группа по обмену знаниями

Ссылка на сайт