Complete Vue Interview Guide
Questions
What is the difference between `v-bind` and `v-model` in Vue?
The Scenario
You are a frontend engineer at an e-commerce company. You are building a new form that allows users to update their profile information.
You need to bind the form inputs to the component’s data, and you are not sure whether to use the v-bind directive or the v-model directive.
The Challenge
Explain the difference between the v-bind and v-model directives in Vue. What are the pros and cons of each approach, and which one would you choose for this use case?
A junior engineer might think that they are interchangeable. They might not be aware of the difference between one-way and two-way data binding.
A senior engineer would be able to provide a detailed explanation of the differences between `v-bind` and `v-model`. They would also be able to explain the trade-offs between each approach and would have a clear recommendation for which one to use in this use case.
Step 1: Understand the Key Differences
| Feature | v-bind | v-model |
|---|---|---|
| Binding | One-way data binding. | Two-way data binding. |
| Syntax | :my-prop="myValue" | v-model="myValue" |
| Use Cases | When you need to pass data from a parent component to a child component. | When you need to create a two-way binding between a form input and a component’s data. |
Step 2: Choose the Right Tool for the Job
For our use case, we should use the v-model directive. This is because we need to create a two-way binding between the form inputs and the component’s data.
Step 3: Code Examples
Here are some code examples that show the difference between the two approaches:
v-bind:
<input :value="myValue" @input="myValue = $event.target.value">v-model:
<input v-model="myValue">As you can see, v-model is just syntactic sugar for v-bind and @input.
Practice Question
You are building a custom component that needs to have a two-way binding with a parent component. Which of the following would you use?