The Vue Instance

Question 1

How does every Vue application start and what is the code for it?

Answer 1

By creating a new Vue instance with the Vue function

`const vm = new Vue({

//options

})`

Question 2

Vue’s design was partly inspired by…

Answer 2

the MVMM pattern

Question 3

What variable is often used for the Vue instance and why?

Answer 3

vm because it stands for ViewModel in MVMM

Question 4

What does a Vue application consist of?

Answer 4

• A root Vue instance (created with `new Vue)
• Optional nested, reusable components

Question 5

How do you configure a Vue instance to behave how you want?

Answer 5

By passing it an options object, which controls all behaviors of the instance

Question 6

In essence, what are vue components?

Answer 6

Vue components are also vue instances, that accept (almost) all the same options

Question 7

What happens when a Vue instance is created in relation to its data object?

Answer 7

Vue adds all the properties in the data object to Vue’s reactivity system

Question 8

What is the one condition for ensuring properties in data are reactive?

Answer 8

Properties must exist when the instance is created. Adding a new property after creation will not make it reactive.

This is the reason you must set properties to an empty initial value.

Question 9

What is one way to halt Vue’s reactivity abilities?

Answer 9

Before passing an object into the data option, call Object.freeze(obj), and then pass it in.

A frozen object will not react to changes, nor will Vue be able to track changes.

Question 10

Name two properties Vue instances expose.

Answer 10

$data - Access to the data object that the Vue instance is observing

$el - The root DOM element that the Vue instance is managing

Question 11

What are 4 initialization steps that the Vue instance goes through?

Answer 11

• Setting up data observation
• Compiling the template
• Mounting the instance
• Updating the DOM when data changes

Question 12

Describe what’s going on during the beforeCreate hook.

Answer 12

• Events are initialized and the the lifecycle has began

Question 13

Describe what’s happening during the created hook.

Answer 13

• Injections are available, and reactivity has been initialized
• No template has been compiled yet

Question 14

Describe what’s happening around the beforeMount hook.

Answer 14

• The template has been rendered but has not been placed in the DOM

Question 15

Describe what’s happening around the mounted hook?

Answer 15

• The template has been compiled and mounted into the DOM
• Everything is ready

Question 16

What’s happening around the beforeUpdate hook?

Answer 16

• A re-render is about to happen because the reactivity system has received a change in the data it monitors

Question 17

Describe the updated hook.

Answer 17

• A re-render and patch has taken place because some data has been altered, and thus triggered the reactivity system

Question 18

Describe the beforeDestroy hook.

Answer 18

• Happens right after vm.$destroy() is called
• Nothing has been torn down yet

Question 19

Describe the destroyed hook.

Answer 19

• The watchers, child components, and event listeners have been torn down