Часть 4. Экземпляр Vue и жизненный цикл приложения

FR : французская версия disponible ici !

В предыдущей части мы создали то, что я назвал

Экземпляр Vue

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

var vm = new vue({  // options })

Инициалы VM означают "ViewModel", следует знать, что Vue.js сильно вдохновлен шаблоном "MVVM. strong>» (имеется в виду модель-представление-представление-модель»), созданный Microsoft, что позволяет использовать знаменитый «MVC» (представление модели контроллер), который позволяет разделить представление бизнес-логики.

Вы можете легко себе представить, что когда ОПЦИИ указываются в качестве параметра этого экземпляра, это означает, как мы видели, что эти опции на самом деле являются ДАННЫМИ, которые будут передаваться по всему приложению. В нашем примере мы предоставляем доступ к нашему маршрутизатору и магазину через все приложение через этот экземпляр f Vue.js
Конечно. , поскольку Vue — это приложение под названием Reactive, изменение одного из этих элементов приведет к обновлению этих данных во всех компонентах, которые будут его использовать.
Однако есть один способ: Я никогда не использовал это, чтобы использоватьсинтаксис

Object.freeze(obj)

где obj — это объект, передаваемый в качестве параметра нашему экземпляру Vue через опцию данных (данные приложения):

new Vue({
  el: '#app'
  data: obj
})

Этот синтаксиспредотвращает изменение существующих свойств.
Последнее замечание относительно экземпляра Vue: он также делает доступными некоторые методы и свойства, весьма полезные с использованием синтаксиса вм.$METHOD_NAME

Вот небольшой список:
- vm.$ data
- vm.$ props
- vm.$ el
- vm.$ options
- vm.$ parent
- vm.$ root
- vm.$ children
… и т. д. у нас будет время вернуться к этим методам

просто знайте, что для использования вы можете просто использовать следующий синтаксис:

vm.$el    
We will return "example" If we declared our instance this way
var vm = new Vue({
  el: #example',
  data: data
})

Жизненный цикл экземпляра

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

Небольшое напоминание для тех, кто не знает, что такое «DOM» в области Интернета: DOM = объектная модель документа — это программный интерфейс, который позволяет сценариям проверять и изменять содержимое веб-браузера. По сути, DOM представляет собой композицию HTMLдокументации(чаще всего), состоящую из объектов, связанных в так называемую древовидную структуру. Как вы знаете, HTML теги включены друг в друга. Ну, все это формирует DOM страницы: это так или иначе HTML и все данные, которые вводятся.

Чтобы вернуться в Vue. Таким образом, каждый экземпляр представления проходит несколько шагов для инициализации:
– Настройка наблюдения за данными
– Компиляция нашего шаблона
– Монтирование экземпляра в известном DOM
– Обновление этот DOM с каждой модификацией данных
- … и т.д.

Но что нас больше всего интересует, так это то, как эти фазы связаны и как извлечь из них пользу.
Это довольно хорошо сделано, потому что по пути экземпляр представления также вызывает так называемые перехватчики цикла представления, которые на самом деле являются методами. что даст нам возможность выполнять персонифицированную логику на каждом этапе своего существования

Структура жизненного цикла экземпляра Vue с разными хуками

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

  • перед созданием()
  • создано()
  • перед монтированием()
  • установлено()
  • перед обновлением()
  • обновлено()
  • перед уничтожением()
  • уничтожено()

Это методы, которые мы можем использовать в нашем приложении. Остальное ориентировочные комментарии. Небольшой случай для beforeDestroy, который будет вызываться только после использования метода $destroy экземпляра представления
Использование этих методов будет очень простым внутри нашего приложения будет достаточно выполнить такую ​​функцию:

created:() => console.log("Instance créée")

СПАСИБО 😊

Следующий шаг:первый HTMLсинтаксис с интерполяцией, использование JavaScriptв шаблоне HTML, первые директивы и динамическиеэлементы (связывание) Part.5 Доступно здесьe (французский), английский скоро !

CLAP This Article — ОТПРАВЬТЕ ПО ЭЛЕКТРОННОЙ ПОЧТЕ МНЕ ([email protected])

— СВЯЖИТЕСЬ СО МНОЙ ПО LINKEDIN — ПОДЕЛИТЕСЬ ЭТОЙ СТАТЬЕЙ

😀 😀 😀 😀 😀 😀 😀 😀 😀 😀 😀 😀 😀 😀 😀 😀 😀 😀 😀 😀 😀