You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: README.md
+49-5Lines changed: 49 additions & 5 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -412,6 +412,12 @@ List of 300 VueJS Interview Questions
412
412
413
413
**[⬆ Back to Top](#table-of-contents)**
414
414
415
+
4. ### What are the different API styles available?
416
+
The Vue components can be created in two different API styles
417
+
1.**Options API:** The Options API uses component logic using an object of options such as `data`, `props`, `computed`, `methods` and life cycle methods etc. The properties will be accessible inside functions using component instance(i.e, `this`).
418
+
419
+
2.**Composition API:** The Composition API uses component logic using imported APIfunctions. The Single FileComponents(SFCs) requires `setup`attribute(`<script setup>`) to use imported variables and functions directly inside template section.
420
+
415
421
4. ### What are the conditional directives?
416
422
VueJS provides set of directives to show or hide elements based on conditions. The available directives are:**v-if, v-else, v-else-if and v-show**
417
423
@@ -4976,7 +4982,16 @@ List of 300 VueJS Interview Questions
4976
4982
4977
4983
**[⬆ Back to Top](#table-of-contents)**
4978
4984
4979
-
229. ### How to use composition API in Vue2.0?
4985
+
229. ### What is the best way to re-render a component?
4986
+
The best way to force Vue to re-render a component is to set a `:key` on the component. i.e, Whenever the component to be re-rendered, just change the value of the key then Vue will re-render the component.
4987
+
**[⬆ Back to Top](#table-of-contents)**
4988
+
4989
+
230. ### How does reactivity works with ref?
4990
+
VueJS automatically detects the changes to ref's value and updates the DOM with a dependency-tracking based reactivity system.
4991
+
1. When a component is rendered for the first time, it tracks every ref that was used during the render.
4992
+
2. Whenever a ref is mutated, it will trigger a re-render of the component.
4993
+
4994
+
230. ### How to use composition API in Vue2.0?
4980
4995
Even though the Composition API is a part of Vue 3, it has been made available for Vue 2 as well by installing `@vue/composition-api` as a plugin via `Vue.use()`.
4981
4996
4982
4997
Let's see the usage in step by step instructions,
@@ -5005,11 +5020,40 @@ List of 300 VueJS Interview Questions
5005
5020
5006
5021
**[⬆ Back to Top](#table-of-contents)**
5007
5022
5008
-
230. ### What is composition API?
5023
+
231. ### What is composition API?
5009
5024
Composition API is a set of additive, function-based APIs that allow flexible composition of component logic.
5010
5025
5011
5026
**[⬆ Back to Top](#table-of-contents)**
5012
-
5013
-
231. ### What is the best way to re-render a component?
5014
-
The best way to force Vue to re-render a component is to set a `:key` on the component. i.e, Whenever the component to be re-rendered, just change the value of the key then Vue will re-render the component.
5027
+
5028
+
232. ### What are the benefits of composition API?
5029
+
The composition API provides several benefits over the traditional Options API as listed below.
5030
+
1. Better logic reuse and code organization:
5031
+
2. Better typescript support:
5032
+
3. Easier testing
5033
+
4. Smaller production bundles
5034
+
5035
+
**[⬆ Back to Top](#table-of-contents)**
5036
+
5037
+
233. ### What are composition functions?
5038
+
Composition API is a set of additive, function-based APIs that allow flexible composition of component logic.
5039
+
5040
+
**[⬆ Back to Top](#table-of-contents)**
5041
+
5042
+
234. ### What is teleport?
5043
+
Composition API is a set of additive, function-based APIs that allow flexible composition of component logic.
5044
+
5045
+
**[⬆ Back to Top](#table-of-contents)**
5046
+
5047
+
235. ### What is the purpose of html directive?
5048
+
The `v-html` directive is used to update the inner html of a DOM element with latest data. It is similar to innerHTML property in DOM.
5049
+
5050
+
The example usage of this directive as shown below,
5051
+
```javascript
5052
+
<div id="app">
5053
+
<div>{{ htmlContent }}</div>
5054
+
<div v-html="htmlContent"></div>
5055
+
</div>
5056
+
```
5057
+
**Note:** This directive should be used with trused content only but not on user provided content. Otherwise it can leads to XSS vulnerabilities.
0 commit comments