Кардинг жизненного цикла Vue

Node.js внешний интерфейс JavaScript Vue.js

предисловие

В процессе разработки Vue мы часто сталкиваемся с проблемами жизненного цикла, но для того, что делает каждая функция-ловушка, сценарий приложения относительно неясен, и я надеюсь прояснить себе это прочесывание. Я впервые пишу статью, и надеюсь, вы поправите меня, если я ошибаюсь!

1. процесс создания экземпляра vue

Начиная с создания экземпляра vue, мы создадим его через новый Vue, чтобы увидеть исходный код Определено в src/core/instance/init.js Рекомендуется для тех, кто использует vscodeПоиск плагина node_modulesВ node_modules намного проще найти плагины, маме больше не нужно беспокоиться о том, что я потеряюсь

Vue.prototype._init = function (options?: Object) {
  // ... 省略代码
  initLifecycle(vm)
  initEvents(vm)
  initRender(vm)
  callHook(vm, 'beforeCreate')
  initInjections(vm) // resolve injections before data/props
  initState(vm)
  initProvide(vm) // resolve provide after data/props
  callHook(vm, 'created')

  /* istanbul ignore if */
  if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
    vm._name = formatComponentName(vm, false)
    mark(endTag)
    measure(`vue ${vm._name} init`, startTag, endTag)
  }

  if (vm.$options.el) {
    vm.$mount(vm.$options.el)
  }
}

Инициализация Vue в основном делает несколько вещей: слияние конфигурации, инициализация жизненного цикла, инициализация центра событий, инициализация рендеринга, инициализация данных, свойств, вычислений, наблюдателя и т. д. Vue разделяет различную функциональную логику на несколько отдельных функций для выполнения.

Мы заметили, что вставка функций-ловушек в этот процесс предоставляет разработчикам возможность вызова. В конце инициализации, если обнаруживается наличие атрибута el, вызывается метод vm.$mount для монтирования виртуальной машины, и целью монтирования является отрисовка шаблона в окончательный DOM.

2. Крючки жизненного цикла

  1. Перехватчики жизненного цикла автоматически привязывают this к экземпляру, поэтому вы можете получить доступ к данным и методам через операцию this. Обратите внимание, что стрелочные функции, такие как следующий код, использовать нельзя, потому что this внешнего слоя привязки стрелочной функции всегда будет искать вверх.
created:()=>{// ...代码}
  1. Следующее используется для печати узлов el, data, dom в каждом жизненном цикле.
export default {
  name: 'App',
  data() {
    return {
      title: '标题'
    }
  },
   methods: {
    onDestoryClick() {
      this.$destroy()
    }
  },
  beforeCreate() {
    console.log(
      `\n\nbeforeCreate打头\n$el    :${this.$el}\n$data     :${JSON.stringify(
        this.$data
      )}\n$refs.head   :${JSON.stringify(
        this.$refs.head
      )}\nbeforeCreate结尾\n\n`
    )
    console.log(this.$vnode)
  },
  created() {
    console.log(
      `\n\ncreated打头\n$el    :${this.$el}\n$data     :${JSON.stringify(
        this.$data
      )}\n$refs.head   :${JSON.stringify(this.$refs.head)}\ncreated结尾\n\n`
    )
    console.log(this.$vnode)
  },
  beforeMount() {
    console.log(
      `\n\nbeforeMount打头\n$el    :${this.$el}\n$data     :${JSON.stringify(
        this.$data
      )}\n$refs.head   :${JSON.stringify(this.$refs.head)}\nbeforeMount结尾\n\n`
    )
    console.log(this.$vnode)
  },
  mounted() {
    console.log(
      `\n\nmounted打头\n$el    :${this.$el}\n$data     :${JSON.stringify(
        this.$data
      )}\n$refs.head   :${JSON.stringify(this.$refs.head)}\nmounted结尾\n\n`
    )
    console.log(this.$vnode)
  }
}

结果图
Его можно найти

  1. В beforeCreate нет доступных данных, он вызывается после инициализации экземпляра, перед конфигурацией наблюдателя данных и события/события наблюдателя.

  2. Данные в data уже можно получить в created, но dom еще не смонтирован. Он рассудит, есть ли эл, и если эл нет, последующий монтаж шаблона будет остановлен.

    Вызывается сразу после завершения создания экземпляра. На этом этапе экземпляр завершил следующую настройку: наблюдатель данных, работа со свойствами и методами и обратный вызов событий наблюдения/события.

    Сценарий использования: ajax-запрос и инициализация страницы

  3. beforeMount и created получают одни и те же данные и вызываются до начала монтирования: связанная функция рендеринга вызывается в первый раз.

  4. Дом, созданный el inmount, был обновлен, и в объекте экземпляра vue есть параметр параметра шаблона, затем он скомпилирован как шаблон в функцию рендеринга, а параметры функции рендеринга приоритета компиляции> параметр шаблона

    Сценарии использования: обычно используется для получения информации и операций VNode, запросов ajax.

    Обратите внимание, что смонтированный не обещает, что все дочерние компоненты также будут смонтированы вместе. Если вы хотите дождаться рендеринга всего представления, замените mount на vm.$nextTick

  5. Так как beforeUpdate и updated используются реже, они обычно заменяются вычисляемыми свойствами и просмотром, поэтому здесь они не объясняются.

  6. уничтожено Вызывается после уничтожения экземпляра Vue. После вызова все, на что указывает экземпляр Vue, будет развязано, все прослушиватели событий будут удалены, а все дочерние экземпляры уничтожены.

Процесс рендеринга клиента

  1. Обработка разметки HTML и построение дерева DOM.
  2. Обработка разметки CSS и построение дерева CSSOM.
  3. Объедините DOM и CSSOM в единое дерево рендеринга.
  4. Разложите по дереву рендеринга, чтобы рассчитать геометрию каждого узла.
  5. Нарисуйте каждый узел на экране.

использованная литература

  1. vue.js
  2. процесс рендеринга в браузере

код

гитхаб-адрес

Категории