├── .gitignore ├── README.md └── images ├── DevTools.png ├── custom-directives.svg ├── flow.png ├── vuelifecycle.png └── vuex-app-structure.png /.gitignore: -------------------------------------------------------------------------------- 1 | # Cruft 2 | .DS_Store 3 | npm-debug.log 4 | .idea 5 | *.idea/ 6 | .idea/workspace.xml -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Вопросы для собеседования VueJS разработчика 2 | Список из вопросов и ответов для проведения собеседования (интервью) по VueJS 3 | 4 | > Жми :star:, если тебе пригодился этот список. Если увидите ошибку, сообщите об этом в "Issues". 5 | 6 | Источник: [https://github.com/sudheerj/vuejs-interview-questions](https://github.com/sudheerj/vuejs-interview-questions) 7 | Перевод и редактура: [Владислав Гриценко](https://vk.com/abyss_dnb) - [Magisters](https://magisters.cc/) 8 | 9 | ### Содержание 10 | ------------------------------------------------------------------- 11 | | № | Вопрос | 12 | |-- | ------ 13 | |1 | [Что такое VueJS](#what-is-vuejs) | 14 | |2 | [Какие основные фичи у VueJS](#what-are-the-major-features-of-vuejs) | 15 | |3 | [Какие у VueJS методы жизненного цикла](#what-are-the-lifecycle-methods-of-vuejs)| 16 | |4 | [Какие есть директивы условного рендера во VueJS](#what-are-the-conditional-directives)| 17 | |5 | [В чем разница между директивами v-show и v-if](#what-is-the-difference-between-v-show-and-v-if-directives)| 18 | |6 | [Для чего используют директиву v-for](#what-is-the-purpose-of-v-for-directive)| 19 | |7 | [Расскажите об экземпляре класса Vue](#what-is-vue-instance)| 20 | |8 | [Как добиться условного рендеринга группы элементов или компонентов?](#how-do-you-achieve-conditional-group-of-elements)| 21 | |9 | [В каком случае вы переиспользуете элемент с атрибутом "key"?](#how-do-you-reuse-elements-with-key-attribute)| 22 | |10 | [Почему не стоит использовать директивы v-for и v-if на одном и том же элементе?](#why-should-not-use-if-and-for-directives-together-on-the-same-element)| 23 | |11 | [Почему нам нужно использовать атрибут key вместе с директивой v-for?](#why-do-you-need-to-use-key-attribute-on-for-directive)| 24 | |12 | [Какие методы массивов во vue запускают обновление отображения?](#what-are-the-array-detection-mutation-methods)| 25 | |13 | [Какие методы массивов во vue не запускают обновление отображения?](#what-are-the-array-detection-non-mutation-methods)| 26 | |14 | [Каковы особенности обнаружения изменений в массиве?](#what-are-the-caveats-of-array-changes-detection)| 27 | |15 | [Каковы особенности обнаружения изменений в объекте?](#what-are-the-caveats-of-object-changes-detection)| 28 | |16 | [How do you use for directive with a range?](#how-do-you-use-for-directive-with-a-range)| 29 | |17 | [How do you use for directive on template?](#how-do-you-use-for-directive-on-template)| 30 | |18 | [How do you use event handlers?](#how-do-you-use-event-handlers)| 31 | |19 | [What are the event modifiers provided by vue?](#what-are-the-event-modifiers-provided-by-vue)| 32 | |20 | [What are key modifiers?](#what-are-key-modifiers)| 33 | |21 | [How do you define custom key modifier aliases?](#how-do-you-define-custom-key-modifier-aliases)| 34 | |22 | [What are the supported System Modifier Keys?](#what-are-the-supported-system-modifier-keys)| 35 | |23 | [What are the supported Mouse Button Modifiers?](#what-are-the-supported-mouse-button-modifiers)| 36 | |24 | [How do you implement two way binding?](#how-do-you-implement-two-way-binding)| 37 | |25 | [What are the supported modifiers on model?](#what-are-the-supported-modifiers-on-model)| 38 | |26 | [What are components and give an example?](#what-are-components-and-give-an-example)| 39 | |27 | [What are props?](#what-are-props)| 40 | |28 | [When component needs a single root element?](#when-component-needs-a-single-root-element)| 41 | |29 | [How do you communicate from child to parent using events?](#how-do-you-communicate-from-child-to-parent-using-events)| 42 | |30 | [How do you implement model on custom input components?](#how-do-you-implement-model-on-custom-input-components)| 43 | |31 | [What are slots?](#what-are-slots)| 44 | |32 | [What is global registration in components?](#what-is-global-registration-in-components)| 45 | |33 | [Why do you need local registration?](#why-do-you-need-local-registration)| 46 | |34 | [What is the difference between local and global registration in module system?](#what-is-the-difference-between-local-and-global-registration-in-module-system)| 47 | |35 | [What are possible prop types?](#what-are-possible-prop-types)| 48 | |36 | [What is the data flow followed by props?](#what-is-the-data-flow-followed-by-props)| 49 | |37 | [What are non prop attributes?](#what-are-non-prop-attributes)| 50 | |38 | [Describe about validations available for props?](#describe-about-validations-available-for-props)| 51 | |39 | [How do you customize model directive for a component?](#how-do-you-customize-model-directive-for-a-component)| 52 | |40 | [What are the possible ways to provide transitions?](#What-are-the-possible-ways-to-provide-transitions)| 53 | |41 | [What is vue router and their features?](#what-is-vue-router-and-their-features)| 54 | |42 | [What are the steps to use vue router and give an example?](#what-are-the-steps-to-use-vue-router-and-give-an-example)| 55 | |43 | [What is dynamic route matching?](#what-is-dynamic-route-matching)| 56 | |44 | [How to make router param changes as reactive?](#how-to-make-router-param-changes-as-reactive)| 57 | |45 | [What is route matching priority?](#what-is-route-matching-priority)| 58 | |46 | [What are nested routes?](#what-are-nested-routes)| 59 | |47 | [What are single file components?](#what-are-single-file-components)| 60 | |48 | [Is Single File Components violating separation of concerns?](#is-single-file-components-violating-separation-of-concerns)| 61 | |49 | [What are the problems solved by Single File Components?](#what-are-the-problems-solved-by-single-file-components)| 62 | |50 | [What are filters?](#what-are-filters)| 63 | |51 | [What are the different ways to create filters?](#what-are-the-different-ways-to-create-filters)| 64 | |52 | [How do you chain filters](#how-do-you-chain-filters)| 65 | |53 | [Is it possible to pass parameters for filters?](#is-it-possible-to-pass-parameters-for-filters)| 66 | |54 | [What are plugins and their various services?](#what-are-plugins-and-their-various-services)| 67 | |55 | [ How to create a plugin?](#how-to-create-a-plugin)| 68 | |56 | [How to use a plugin?](#how-to-use-a-plugin)| 69 | |57 | [What are mixins?](#what-are-mixins)| 70 | |58 | [What are global mixins?](#what-are-global-mixins)| 71 | |59 | [How do you use mixins in CLI?](#how-do-you-use-mixins-in-cli)| 72 | |60 | [What are the merging strategies in mixins?](#what-are-the-merging-strategies-in-mixins)| 73 | |61 | [What are custom options merging strategies?](#what-are-custom-options-merging-strategies)| 74 | |62 | [What are custom directives?](#what-are-custom-directives)| 75 | |63 | [How do you register directives locally?](#how-do-you-register-directives-locally)| 76 | |64 | [What are the hook functions provided by directives?](#what-are-the-hook-functions-provided-by-directives)| 77 | |65 | [What are the directive Hook Arguments?](#what-are-the-directive-hook-arguments)| 78 | |66 | [How do you pass multiple values to a directive?](#how-do-you-pass-multiple-values-to-a-directive)| 79 | |67 | [What is function shorthand in directive hooks?](#what-is-function-shorthand-in-directive-hooks)| 80 | |68 | [What is the benefit of render functions over templates?](#what-is-the-benefit-of-render-functions-over-templates)| 81 | |69 | [What is a render function?](#What-is-a-render-function)| 82 | |70 | [Explain the structure of createElement with arguments](#explain-the-structure-of-createelement-with-arguments)| 83 | |71 | [How can you write duplicate virtual nodes in a component?](#how-can-you-write-duplicate-virtual-nodes-in-a-component)| 84 | |72 | [List down the template equivalents in render functions?](#list-down-the-template-equivalents-in-render-functions)| 85 | |73 | [What are functional components?](#what-are-functional-components)| 86 | |74 | [What are the similarities between VueJS and ReactJS?](#what-are-the-similarities-between-vuejs-and-reactjs)| 87 | |75 | [What is the difference between VueJS and ReactJS?](#what-is-the-difference-between-vuejs-and-reactjs)| 88 | |76 | [What are the advantages of VueJS over ReactJS?](#what-are-the-advantages-of-vuejs-over-reactjs)| 89 | |77 | [What are the advantages of ReactJS over VueJS?](#what-are-the-advantages-of-reactjs-over-vuejs)| 90 | |78 | [What are the differences between VueJS and AngularJS?](#What-are-the-differences-between-vuejs-and-angularjs)| 91 | |79 | [What are dynamic components?](#what-are-dynamic-components)| 92 | |80 | [What is the purpose of keep alive tag?](#what-is-the-purpose-of-keep-alive-tag)| 93 | |81 | [What are async components?](#what-are-async-components)| 94 | |82 | [What is the structure of async component factory?](#what-is-the-structure-of-async-component-factory)| 95 | |83 | [What are inline templates?](#what-are-inline-templates)| 96 | |84 | [What are X Templates?](#what-are-x-templates)| 97 | |85 | [What are recursive components?](#what-are-recursive-components)| 98 | |86 | [How do you resolve circular dependencies between components?](#how-do-you-resolve-circular-dependencies-between-components)| 99 | |87 | [How do you make sure vue application is CSP complaint?](#how-do-you-make-sure-vue-application-is-csp-complaint)| 100 | |88 | [What is the difference between full and runtime only builds?](#what-is-the-difference-between-full-and-runtime-only-builds)| 101 | |89 | [List down different builds of vuejs?](#list-down-different-builds-of-vuejs)| 102 | |90 | [How do you configure vuejs in webpack?](#how-do-you-configure-vuejs-in-webpack)| 103 | |91 | [What is the purpose of vuejs compiler?](#what-is-the-purpose-of-vuejs-compiler)| 104 | |92 | [What is Dev Tools and its purpose?](#what-is-dev-tools-and-its-purpose)| 105 | |93 | [What is the browser support of VueJS?](#what-is-the-browser-support-of-vuejs)| 106 | |94 | [How do you use various CDNs?](#how-do-you-use-various-cdns?)| 107 | |95 | [How do you force update?](#how-do-you-force-update)| 108 | |96 | [What is the purpose of vuejs once directive?](#what-is-the-purpose-of-vuejs-once-directive)| 109 | |97 | [How do you access the root instance?](#how-do-you-access-the-root-instance)| 110 | |98 | [List out top 10 organizations using Vuejs?](#list-out-top-10-organizations-using-vuejs)| 111 | |99 | [What is the purpose of renderError?](#what-is-the-purpose-of-rendererror)| 112 | |100| [How do you access parent instance?](#how-do-you-access-parent-instance)| 113 | |101| [What is vuex?](#what-is-vuex)| 114 | |102| [What are the major components of State Management Pattern?](#what-are-the-major-components-of-state-management-pattern)| 115 | |103| [How do you represent one way data flow in vuex?](#how-do-you-represent-one-way-data-flow-in-vuex)| 116 | |104| [What is a vuejs loader?](#what-is-a-vuejs-loader)| 117 | |105| [How do you configure vue loader in webpack?](#how-do-you-configure-vue-loader-in-webpack)| 118 | |106| [What are asset url transform rules?](#what-are-asset-url-transform-rules)| 119 | |107| [How do you work with preprocessors using vue loader?](#how-do-you-work-with-preprocessors-using-vue-loader)| 120 | |108| [What is scoped CSS?](#What-is-scoped-CSS)| 121 | |109| [Is it possible to mix both local and global styles?](#is-it-possible-to-mix-both-local-and-global-styles)| 122 | |110| [How do you use deep selectors?](#how-do-you-use-deepselectors)| 123 | |111| [Is parent styles leaked into child components in scoped css?](#is-parent-styles-leaked-into-child-components-in-scoped-css)| 124 | |112| [How do you style dynamic generated content using scoped css?](#how-do-you-style-dynamic-generated-content-using-scoped-css)| 125 | |113| [Is CSS modules supported in Vuejs?](#is-css-modules-supported-in-vuejs)| 126 | |114| [Can I use runtime builds for all templates?](#can-i-use-runtime-builds-for-all-templates)| 127 | |115| [How to use CSS modules in vuejs?](#how-to-use-css-modules-in-vuejs)| 128 | |116| [Can I use CSS modules for preprocessors?](#can-i-use-css-modules-for-preprocessors)| 129 | |117| [Is it possible to use custom inject name for CSS modules?](#is-it-possible-to-use-custom-inject-name-for-css-modules)| 130 | |118| [What is hot reloading in vue loader?](#what-is-hot-reloading-in-vue-loader)| 131 | |119| [What is the default behavior of hot reloading?](#what-is-the-default-behavior-of-hot-reloading)| 132 | |120| [How do you disable hot reloading explicitly?](#how-do-you-disable-hot-reloading-explicitly)| 133 | |121| [How do you use hot reloading?](#how-do-you-use-hot-reloading)| 134 | |122| [What are state preservation rules in hot reloading?](#what-are-state-preservation-rules-in-hot-reloading)| 135 | |123| [How to create functional components using vue loader?](#how-to-create-functional-components-using-vue-loader)| 136 | |124| [How do you access global properties of functional components?](#how-do-you-access-global-properties-of-functional-components)| 137 | |125| [How do you perform testing in vuejs?](#how-do-you-perform-testing-in-vuejs)| 138 | |126| [How do you apply linting for css?](#how-do-you-apply-linting-for-css)| 139 | |127| [How do you use eslint plugin?](#how-do-you-use-eslint-plugin)| 140 | |128| [What is the purpose of eslint loader?](#what-is-the-purpose-of-eslint-loader)| 141 | |129| [What is CSS extraction?](#what-is-css-extraction)| 142 | |130| [What are custom blocks?](#what-are-custom-blocks)| 143 | |131| [What are the features of stylelint?](#what-are-the-features-of-stylelint?)| 144 | |132| [What are the principles for vuex application structure?](#what-are-the-principles-for-vuex-application-structure)| 145 | |133| [Is Vuex supports hot reloading?](#is-vuex-supports-hot-reloading)| 146 | |134| [What is the purpose of hotUpdate API of vuex store?](#what-is-the-purpose-of-hotupdate-api-of-vuex-store)| 147 | |135| [How do you test mutations?](#how-do-you-test-mutations)| 148 | |136| [How do you test your getters?](#how-do-you-test-your-getters)| 149 | |137| [What is the procedure to run tests in node?](#what-is-the-procedure-to-run-tests-in-node)| 150 | |138| [What is the procedure to run tests in browser?](#what-is-the-procedure-to-run-tests-in-browser)| 151 | |139| [What is the purpose of strict mode in vuex?](#what-is-the-purpose-of-strict-mode-in-vuex)| 152 | |140| [Can I use strict mode in production environment?](#can-i-use-strict-mode-in-production-environment)| 153 | |141| [What is vuex plugin?](#what-is-vuex-plugin)| 154 | |142| [How do you mutate state in plugins?](#how-do-you-mutate-state-in-plugins)| 155 | |143| [What is vuex store?](#what-is-vuex-store)| 156 | |144| [What are the differences of vuex store and plain global object?](#what-are-the-differences-of-vuex-store-and-plain-global-object)| 157 | |145| [What is the reason not to update the state directly?](#what-is-the-reason-not-to-update-the-state-directly)| 158 | |146| [What is Single state tree?](#what-is-single-state-tree)| 159 | |147| [How do you install vuex?](#how-do-you-install-vuex)| 160 | |148| [Do I need promise for vuex?](#do-i-need-promise-for-vuex)| 161 | |149| [How do you display store state in vue components?](#how-do-you-display-store-state-in-vue-components)| 162 | |150| [How do you inject store into child components?](#how-do-you-inject-store-into-child-components)| 163 | |151| [What is mapState helper?](#what-is-mapstate-helper)| 164 | |152| [How do you combine local computed properties with mapState helper?](#how-do-you-combine-local-computed-properties-with-mapstate-helper)| 165 | |153| [Do you need to replace entire local state with vuex?](#do-you-need-to-replace-entire-local-state-with-vuex)| 166 | |154| [What are vuex getters?](#what-are-vuex-getters?)| 167 | |155| [What is a property style access?](#what-is-a-property-style-access)| 168 | |156| [What is a method style access?](#what-is-a-method-style-access)| 169 | |157| [What is mapGetter helper?](#what-is-mapgetter-helper)| 170 | |158| [What are mutations?](#what-are-mutations)| 171 | |159| [How do you commit with payload?](#how-do-you-commit-with-payload)| 172 | |160| [What is object style commit?](#what-is-object-style-commit)| 173 | |161| [What are the caveats with vuex mutations?](#what-are-the-caveats-with-vuex-mutations)| 174 | |162| [Why mutations should be synchronous?](#why-mutations-should-be-synchronous)| 175 | |163| [How do you perform mutations in components?](#how-do-you-perform-mutations-in-components)| 176 | |164| [Is it mandatory to use constants for mutation types?](#is-it-mandatory-to-use-constants-for-mutation-types)| 177 | |165| [How do you perform asynchronous operations?](#how-do-you-perform-asynchronous-operations)| 178 | |166| [What are differences between mutations and actions?](#what-are-differences-between-mutations-and-actions)| 179 | |167| [Give an example usage of actions?](#give-an-example-usage-of-actions?)| 180 | |168| [How do you dispatch actions?](#how-do-you-dispatch-actions)| 181 | |169| [Can you dispatch an action using payload or object?](#can-you-dispatch-an-action-using-payload-or-object)| 182 | |170| [Can I use styled components in vuejs?](#can-i-use-styled-components-in-vuejs)| 183 | |171| [How do you dispatch actions in components?](#how-do-you-dispatch-actions-in-components)| 184 | |172| [How do you compose actions?](#how-do-you-compose-actions)| 185 | |173| [What are modules in vuex?](#what-are-modules-in-vuex)| 186 | |174| [What is module local state?](#what-is-module-local-state)| 187 | |175| [What is namespacing in vuex](#what-is-namespacing-in-vuex)| 188 | 189 | 1. ### Что такое VueJS? 190 | **Vue.js** это прогрессивный open-source фреймворк для разработки пользовательских интерфейсов, который стремиться быть легко внедряемым в процесс разработки. Ядро библиотеки VueJS фокусируется только на "слое отображения", потому его можно легко интегрировать с множеством библиотек и внедрить в существующие проекты. 191 | 2. ### Какие основные фичи у VueJS? 192 | Ниже представлен список основных фич доступных во VueJS 193 | 1. **Виртуальный DOM:** VueJS использует виртульный DOM, такой же подход, как и у других существующих фреймворков (ReactJS, Ember и т.п.). Виртаульный DOM - это хранимая в памяти репрезентация оригинального HTML DOM-дерева, которая обновляется и изменяется не затрагивая при этом оригинальный DOM. 194 | 2. **Компоненты:** Используется для создания переиспользуемых компонентов в любых приложениях на VueJS. 195 | 3. **Шаблоны:** VueJS предоставляет возможности шаблонизации, которая связывает HTML-разметку с данными компонента и экземпляра класса Vue. 196 | 4. **Реактивность:** VueJS дает возможность создавать реактивные односторонние и двусторонние связи данных с их отображением. 197 | 5. **Роутинг:** Перемещение между страницами реализовано при помощи библиотеки vue-router 198 | 6. **Легковесный:** VueJS один из самых легковесных фреймворков в сравнении с другими 199 | 3. ### Какие у VueJS методы жизненного цикла? 200 | Методы жизненного цикла - это ответ на вопрос, как работает библиотека "за кулисами". Используя эти методы, вы знаете в какой момент ваш компонент создан, добавлен в DOM-дерево, обновлен или разрушен. Давайте посмотрим на эту диаграмму, перед тем как обсудить каждый метод отдельно, 201 | 202 | 203 | 204 | 1. **Создание (инициализация):** 205 | Методы, вызываемые до и во время создания компонента, позволяют выполнять действия до того, как компонент будет добавлен в DOM. Вы можете использовать эти методы если хотите установить какие-то данные или что-то настроить в момент рендера на клиенте или сервере. Методы создания, в отличие от остальных методов, вызываются в момент серверного рендера. 206 | 1. beforeCreate: 207 | Этот метод вызывается в самом начале инициализации компонента. В этот момент данные и события компонента готовятся к активации. На этом этапе данные еще не реактивны, а события все еще не установлены. 208 | ```javascript 209 | new Vue({ 210 | data: { 211 | count: 10 212 | }, 213 | beforeCreate: function () { 214 | console.log('Nothing gets called at this moment') 215 | // `this` указывает на VM (view-model) инстанс 216 | console.log('count is ' + this.count); // count = undefined 217 | } 218 | }) 219 | ``` 220 | 2. created: 221 | Этот метод вызывается когда Vue установил все события и наблюдает за данными. На этом этапе все события активны и имеют доступ к реактивным данным компонента, не смотря на то, что компонент еще не смонтирован или отрендерен. 222 | ```javascript 223 | new Vue({ 224 | data: { 225 | count: 10 226 | }, 227 | created: function () { 228 | // `this` указывает на VM (view-model) инстанс 229 | console.log('count is: ' + this.count) // count = 10 230 | } 231 | }) 232 | ``` 233 | **ВНИМАНИЕ:** Запомните, что вы не имеете доступа к DOM-элементу или целевому монтируемому элементу (this.$el) внутри методов создания компонента. 234 | 2. **Монтирование (вставка в DOM):** 235 | Методы монтирования самые используемые методы и позволяют получить доступ к компоненту непосредственно перед и после первого рендера. 236 | 1. beforeMount: 237 | Этот метод позволяет получить доступ к компоненту непосредственно перед его монтированием (первым рендером). 238 | ```javascript 239 | new Vue({ 240 | beforeMount: function () { 241 | // `this` points to the view model instance 242 | console.log(`this.$el вот-вот будет вмонтирован`); 243 | } 244 | }) 245 | ``` 246 | 2. mounted: 247 | Это самый популярный метод в котором вы имеете полный доступ к реактивным данным, компоненты, шаблону и отрендеренному DOM (через this.$el). Самое распространенное использование, это получение данных для компонента (например, через AJAX). 248 | ```javascript 249 |
250 |

Это текст в компоненте

251 |
252 | new Vue({ 253 | el: ‘#app’, 254 | mounted: function() { 255 | console.log(this.$el.textContent); // "Это текст в компоненте" 256 | } 257 | }) 258 | ``` 259 | 3. **Обновление (поиск отличий и перерендер):** 260 | Методы обновления вызываются когда реактивные данные были изменены, или что-то еще вызвало перерендер. 261 | 1. beforeUpdate: 262 | Этот методы вызывается после изменений данных в компоненте, но перед применением этих изменений на DOM. 263 | ```javascript 264 |
265 |

{{counter}}

266 |
267 | ...// другой код 268 | new Vue({ 269 | el: '#app', 270 | data() { 271 | return { 272 | counter: 0 273 | } 274 | }, 275 | created: function() { 276 | setInterval(() => { 277 | this.counter++ 278 | }, 1000) 279 | }, 280 | 281 | beforeUpdate: function() { 282 | console.log(this.counter) // Логирует значение счетчика каждую секунду, перед обновлением DOM. 283 | } 284 | }) 285 | ``` 286 | 2. updated: 287 | This hook runs after data changes on your component and the DOM re-renders. 288 | ```javascript 289 |
290 |

{{counter}}

291 |
292 | ...// другой код 293 | new Vue({ 294 | el: '#app', 295 | data() { 296 | return { 297 | counter: 0 298 | } 299 | }, 300 | created: function() { 301 | setInterval(() => { 302 | this.counter++ 303 | }, 1000) 304 | }, 305 | updated: function() { 306 | console.log(+this.$refs['dom'].textContent === this.counter) // логирует true каждую секунду 307 | } 308 | }) 309 | ``` 310 | 4. **Демонтирование (отключение):** 311 | Методы демонтирования позволяют выполнять действия когда ваш компонент по каким-либо причинам демонтируется (например, из-за v-if). В эти моменты можно очистить какие-либо даные из памяти или отправить аналитические данные. 312 | 1. beforeDestroy: 313 | `beforeDestroy` вызывается прямо перед отключением. Если вы хотите очистить события или подписки на какие-либо реактивные данные, это пожалуй лучший момент чтобы сделать это. Ваш компонент все еще доступен и полностью функционирует. 314 | ```javascript 315 | new Vue ({ 316 | data() { 317 | return { 318 | message: 'Добро пожаловать в мир VueJS' 319 | } 320 | }, 321 | 322 | beforeDestroy: function() { 323 | this.message = null 324 | delete this.message 325 | } 326 | }) 327 | ``` 328 | 2. destroyed: 329 | Этот метод вызывается сразу после того, как компонент был полностью разрушен, директивы отвязаны и обработчики событий удалены. 330 | ```javascript 331 | new Vue ({ 332 | destroyed: function() { 333 | console.log(this) // Здесь нечего логировать 334 | } 335 | }) 336 | ``` 337 | 338 | 4. ### Какие есть директивы условного рендера во VueJS? 339 | VueJS предлагает набор директив для показа или скрытия HTML-элементов, компонентов в зависимости от условий. Доступны следующие директивы: **v-if, v-else, v-else-if and v-show** 340 | **1. v-if:** Эта директива добавляет или удаляет DOM елемент в зависимости от результата указанного выражения. Например, в коде ниже кнопка не будет показана, если в isLoggedIn записано false. 341 | ```javascript 342 | 343 | ``` 344 | Ты можешь также использовать эту директиву на нескольких элементах, обернув их в `