Building components Flashcards
How do you make the template to reflect the change of a variable defined in setup?
By making it reactive (using ref or reactive).
What is the difference between ref() and reactive()? (when to use ref() and when to use reactive())
ref() can take as arguments primitives (most common: Boolean, String and Number) as well as Objects, while reactive() can only take Objects as arguments. Developers use reactive() mostly for convenience (to avoid using .value all over the code).
What can you use to have a value that recomputes every time one or more reactive properties change?
A computed function.
What can you use when you want to perform some actions when some reactive properties changed?
Watch or watchEffect.
What is the difference between watch and watchEffect?
- In watchEffect you don’t have to provide the reactive variables on which it will depend. But in the watch method, you have to specify the list of reactive variables as its first argument.
- The watch method runs lazily by default. It does not get executed when the component mounts. But watchEffect runs once when the component mounts then it executes the callback function for the change of dependency variables.
- In the watch method, you can access the updated and previous values of the dependent reactive variables inside the callback function. But the watchEffect does not give the updated or previous values.
How a components receives data from outside (from the parent component) ?
Via props
Define a required prop of type Student with the default name: Alexa.
props: {
student: {
type: Object as PropType<Student>,
required: true,
default: () => ({ name: Alexa })
}
}</Student>
Is the types validation executed when the application is running in production mode?
No, all these runtime checks (types, required, validation) are omitted when running the application in production mode.
Can you modify a received prop?
No, you cannot modify a prop.
How can you emit an event from the setup function?
defineCOmponent({
….
emits: {
eventName: (argument) => validator();
},
setup(props , { emit }) {
emit(‘customEventName’);
}
})
What lifecycle hook is called after component has been mounted (inserted in the DOM)?
onMounted
What lifecycle hook is called before mounting the component?
onBeforeMount
What lifecycle hook is called when there is an error in one of the descendent components?
onErrorCaptured
What lifecycle hook is called when something changed and the component has been rerendered?
onUpdated
What lifecycle hook is called before rerendering the component?
onBeforeUpdate
