Анализ исходного кода Vue с помощью console.log

Vue.js

предисловие

Эта статья проходитconsole.logнекоторые особенности в сочетании сvue.jsИсходный код на простом примере позволяет понятьVueизменения в каждом процессе.
Рендеринг вывода консоли

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

Подготовить

vue-console.htmlсоздание

скачатьvue.jsфайл, вvue-console.htmlПредставленный в , я написал простой пример, охватывающий: инициализировать представление -> обновить представление после нажатия (включая различные функции ловушек)
код показывает, как показано ниже:

  <script src="./vue.js"></script>
  <div id="app">
    <div id="hi" @click="changeName">{{name}}</div>
  </div>
  </div>
    <script>
    var style = 'font-size: 20px;color: blue'
    var vm = new Vue({
      el:'#app',
      data() {
        return {
          name: '点我',
        }
      },
      beforeCreate () {
        console.log('%cI am beforeCreate------ 我在选项里写的', style)
      },
      created () {
        console.log('%cI am created------ 我在选项里写的', style)
      },
      beforeMount () {
        console.log('%cI am beforeMount------ 我在选项里写的', style)
      },
      mounted () {
        console.log('%cI am mounted------ 我在选项里写的', style)
      },
      beforeUpdate () {
        console.log('%cI am beforeUpdate------ 我在选项里写的',style)
      },
      updated () {
        console.log('%cI am updated------ 我在选项里写的', style)
      },
      methods: {
        changeName () {   // 点击是文本发生变化
          this.name = 'jike'
        } 
      }
    })  
  </script>

Конфигурация в стиле console.log


var tagLeftStyle = [
  'color: #fff',
  'border-top-left-radius:3px',
  'border-bottom-left-radius:3px',
  'background-color: #564b4f',
  'padding: 5px'
].join(';')

var tagRightStyle = function (color) {
  color = color?color:'#0BCF1B'
  return [
    'color: #fff',
    'border-top-right-radius:3px',
    'border-bottom-right-radius:3px',
    `background-color: ${color}`,
    'padding: 5px'
  ].join(';')
}
// ...
// 一些样式省略,具体可以去看源码
var tagVariable = function (obj, tag, desc, num, detail, color) {
  console.log(`%c${lineNo} %o%c<---%c${tag}%c${desc}  %c源码${num}行 %c说明: %o`, noStyle, obj, arrowStyle ,tagLeftStyle, tagRightStyle(color), sourceNoStyle, detailStyle, detail)
  lineNo++
}
// %c代表后面的文本,使用css样式,%o代表对象输出

Приведенный выше код просто вызываетtagVariable(...)Путем передачи параметров реализуется эффект метки изображения выше, Достаточно хорошоconsole.logОтобразите изображение и добавьте поясняющую диаграмму для облегчения понимания;

Вызывая функцию, инкапсулированную выше вvue.jsЗвоните в определенное время, чтобы добиться хороших результатов

процесс проекта

Весь процесс я разделил на четыре этапа:构造函数阶段,初始化阶段,挂载阶段,更新阶段, будет проходить через примеры, упомянутые выше

этап конструктора

Обычно мы используемVue, оба используютnew Vue({}), по сути, заключается в вызове его конструктора для создания экземпляра, как показано ниже.

фаза инициализации

перейдет к намdata,methodsи другую обработку, удобную для более позднего этапа вызова и реализации некоторых функций как примерdataизnameбудет представленvmэкземпляр, поэтому мы можем использоватьthis.nameпередача

data() {
  return {
    name: '点我',
  }
}

горная сцена

<div id="app">
  <div id="hi" @click="changeName">{{name}}</div>
</div>

поставлю вышеhtmlРендеринг в представление (включая функции рендеринга, реализацию виртуального дома и т. д.)

фаза обновления

Обновления происходят при нажатии на текст на странице, и этот процесс включает в себя:wathcerвызывать,patchАлгоритмы сравнивают старые и новыеvnode,продлитьdom

иллюстрировать

В частности, вы можете посмотреть исходный код вgithubНа, если вы думаете, что можете, помогите звезде

Справочная статья:Инсайдер технологии Vue Анализ исходного кода Vue.js

Категории