Questions之Vuejs

[pengjielee]

Q1. What is Vue.js? What are the advantages of it?
Q2. What are all the life cycle hooks in Vue instance?
Q3. What is the difference between v-show and v-if directives?
Q4. What is key in Vue.js?
Q5. Why should not use if and for directives together on the same element?
Q6. What is the difference between comptuted properties and methods?
Q7. What is $parent in Vue?
Q8. What is the role of ref in Vue.js?
Q9. Why do we need local registration?
Q10. What is Mixins?
Q11. How Vue.js track changes?
Q12. What are Async Components?
Q13. What are filters in Vue.js?
Q14. What is Vue Router?

https://medium.com/@vigowebs/frequently-asked-vue-js-interview-questions-and-answers-3e8b97da8d5d

1 What is VueJS
2 What are the major features of VueJS
3 What are the lifecycle methods of VueJS
4 What are the conditional directives
5 What is the difference between v-show and v-if directives
6 What is the purpose of v-for directive?
7 What is vue instance?
8 How do you achieve conditional group of elements?
9 How do you reuse elements with key attribute?
10 Why should not use if and for directives together on the same element?
11 Why do you need to use key attribute on for directive?
12 What are the array detection mutation methods?
13 What are the array detection non mutation methods?
14 What are the caveats of array changes detection?
15 What are the caveats of object changes detection?
16 How do you use for directive with a range?
17 How do you use for directive on template?
18 How do you use event handlers?
19 What are the event modifiers provided by vue?
20 What are key modifiers?
21 How do you define custom key modifier aliases?
22 What are the supported System Modifier Keys?
23 What are the supported Mouse Button Modifiers?
24 How do you implement two way binding?
25 What are the supported modifiers on model?
26 What are components and give an example?
27 What are props?
28 When component needs a single root element?
29 How do you communicate from child to parent using events?
30 How do you implement model on custom input components?
31 What are slots?
32 What is global registration in components?
33 Why do you need local registration?
34 What is the difference between local and global registration in module system?
35 What are possible prop types?
36 What is the data flow followed by props?
37 What are non prop attributes?
38 Describe about validations available for props?
39 How do you customize model directive for a component?
40 What are the possible ways to provide transitions?
41 What is vue router and their features?
42 What are the steps to use vue router and give an example?
43 What is dynamic route matching?
44 How to make router param changes as reactive?
45 What is route matching priority?
46 What are nested routes?
47 What are single file components?
48 Is Single File Components violating separation of concerns?
49 What are the problems solved by Single File Components?
50 What are filters?
51 What are the different ways to create filters?
52 How do you chain filters
53 Is it possible to pass parameters for filters?
54 What are plugins and their various services?
55 How to create a plugin?
56 How to use a plugin?
57 What are mixins?
58 What are global mixins?
59 How do you use mixins in CLI?
60 What are the merging strategies in mixins?
61 What are custom options merging strategies?
62 What are custom directives?
63 How do you register directives locally?
64 What are the hook functions provided by directives?
65 What are the directive Hook Arguments?
66 How do you pass multiple values to a directive?
67 What is function shorthand in directive hooks?
68 What is the benefit of render functions over templates?
69 What is a render function?
70 Explain the structure of createElement with arguments
71 How can you write duplicate virtual nodes in a component?
72 List down the template equivalents in render functions?
73 What are functional components?
74 What are the similarities between VueJS and ReactJS?
75 What is the difference between VueJS and ReactJS?
76 What are the advantages of VueJS over ReactJS?
77 What are the advantages of ReactJS over VueJS?
78 What are the differences between VueJS and AngularJS?
79 What are dynamic components?
80 What is the purpose of keep alive tag?
81 What are async components?
82 What is the structure of async component factory?
83 What are inline templates?
84 What are X Templates?
85 What are recursive components?
86 How do you resolve circular dependencies between components?
87 How do you make sure vue application is CSP complaint?
88 What is the difference between full and runtime only builds?
89 List down different builds of vuejs?
90 How do you configure vuejs in webpack?
91 What is the purpose of vuejs compiler?
92 What is Dev Tools and its purpose?
93 What is the browser support of VueJS?
94 How do you use various CDNs?
95 How do you force update?
96 What is the purpose of vuejs once directive?
97 How do you access the root instance?
98 List out top 10 organizations using Vuejs?
99 What is the purpose of renderError?
100 How do you access parent instance?
101 What is vuex?
102 What are the major components of State Management Pattern?
103 How do you represent one way data flow in vuex?
104 What is a vuejs loader?
105 How do you configure vue loader in webpack?
106 What are asset url transform rules?
107 How do you work with preprocessors using vue loader?
108 What is scoped CSS?
109 Is it possible to mix both local and global styles?
110 How do you use deep selectors?
111 Is parent styles leaked into child components in scoped css?
112 How do you style dynamic generated content using scoped css?
113 Is CSS modules supported in Vuejs?
114 Can I use runtime builds for all templates?
115 How to use CSS modules in vuejs?
116 Can I use CSS modules for preprocessors?
117 Is it possible to use custom inject name for CSS modules?
118 What is hot reloading in vue loader?
119 What is the default behavior of hot reloading?
120 How do you disable hot reloading explicitly?
121 How do you use hot reloading?
122 What are state preservation rules in hot reloading?
123 How to create functional components using vue loader?
124 How do you access global properties of functional components?
125 How do you perform testing in vuejs?
126 How do you apply linting for css?
127 How do you use eslint plugin?
128 What is the purpose of eslint loader?
129 What is CSS extraction?
130 What are custom blocks?
131 What are the features of stylelint?
132 What are the principles for vuex application structure?
133 Is Vuex supports hot reloading?
134 What is the purpose of hotUpdate API of vuex store?
135 How do you test mutations?
136 How do you test your getters?
137 What is the procedure to run tests in node?
138 What is the procedure to run tests in browser?
139 What is the purpose of strict mode in vuex?
140 Can I use strict mode in production environment?
141 What is vuex plugin?
142 How do you mutate state in plugins?
143 What is vuex store?
144 What are the differences of vuex store and plain global object?
145 What is the reason not to update the state directly?
146 What is Single state tree?
147 How do you install vuex?
148 Do I need promise for vuex?
149 How do you display store state in vue components?
150 How do you inject store into child components?
151 What is mapState helper?
152 How do you combine local computed properties with mapState helper?
153 Do you need to replace entire local state with vuex?
154 What are vuex getters?
155 What is a property style access?
156 What is a method style access?
157 What is mapGetter helper?
158 What are mutations?
159 How do you commit with payload?
160 What is object style commit?
161 What are the caveats with vuex mutations?
162 Why mutations should be synchronous?
163 How do you perform mutations in components?
164 Is it mandatory to use constants for mutation types?
165 How do you perform asynchronous operations?
166 What are differences between mutations and actions?
167 Give an example usage of actions?
168 How do you dispatch actions?
169 Can you dispatch an action using payload or object?
170 Can I use styled components in vuejs?
171 How do you dispatch actions in components?
172 How do you compose actions?
173 What are modules in vuex?
174 What is module local state?
175 What is namespacing in vuex
176 What is the default namespace behavior in vuex?
177 When do you reuse modules?
178 What are the principles enforced by vuex?
179 Can I perform mutations directly in strict mode?
180 How to use model directive with two way computed property?
181 What is Vue CLI?
182 What are the features provided by Vue CLI?
183 What is instant prototyping?
184 How do you create project using Vue CLI?
185 How do you create project using GUI?
186 What are plugins in vue CLI?
187 How do you install plugins in an existing Vue CLI project?
188 How to access local plugins in a project?
189 How do you create UI plugins kind of behavior?
190 What are presets?
191 What is the versioning behavior in preset plugins?
192 How do you allow plugin prompts?
193 What are remote presets?
194 Can I use local presets?
195 What is the purpose of browserslist option?
196 How do you find VueJS version using API?
197 How do you create reactive objects
198 What is the purpose new slot directive?
199 What is the use of compile method?
200 What does nextTick do in VueJS?
201 What is async error handling?
202 What are Dynamic Directive Arguments?
203 What are the drawbacks of dynamic directive arguments?
204 What is the special handling for null values in dynamic directive arguments?
205 Can I use dynamic directive null value for slots?
206 What is Vue I18n plugin?
207 What are the types of formatting?
208 What is custom formatting?
209 How do you handle Pluralization?
210 How to implement DateTime localization?
211 How do you implement Number localization?
212 How do you perform locale changing
213 What is Lazy loading translations?

https://github.com/sudheerj/vuejs-interview-questions

Q1: What is Vue.js?

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。

https://cn.vuejs.org/v2/guide/index.html

Q2: How to create an instance of Vue.js?

var vm = new Vue({
  // 选项
})

var vm = new Vue({
  data: {
  	title: 'hello world'
  },
  beforeCreate: function(){
  	console.log('beforeCreate')
  },
  created: function(){
  	console.log('created')
  },
  beforeMount: function(){
  	console.log('beforeMount')
  },
  mounted: function(){
  	console.log('mounted')
  },
  beforeUpdate: function(){
  	console.log('beforeUpdate')
  },
  updated: function(){
  	console.log('updated')
  },
  beforeDestory: function(){
  	console.log('beforeDestory')
  },
  destoryed: function(){
  	console.log('destoryed')
  },
})

https://cn.vuejs.org/v2/guide/instance.html

Q3: Explain the differences between one-way data flow and two-way data binding?

Q4: How to create Two-Way Bindings in Vue.js?

用 v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。

https://cn.vuejs.org/v2/guide/forms.html

Q5: What are components props?

Prop 是你可以在组件上注册的一些自定义特性。当一个值传递给一个 prop 特性的时候，它就变成了那个组件实例的一个属性。

https://cn.vuejs.org/v2/guide/components-props.html

Q6: How to deploy Vue.js app?

https://cn.vuejs.org/v2/guide/deployment.html

Q7: What are Components in Vue.js?

https://cn.vuejs.org/v2/guide/components.html

Q8: What is filters in Vue.js?

https://cn.vuejs.org/v2/guide/filters.html

Q9: How can you redirect to another page in Vue.js?

If you are using vue-router, you should use router.go(path) to navigate to any particular route. The router can be accessed from within a component using this.$router. router.go() changed in VueJS 2.0. You can use router.push({ name: "yourroutename"})or just router.push("yourroutename") now to redirect.

Q10: Explain the basic logical Vue.js app organisation.

A Vue.js application consists of a root Vue instance created with new Vue, optionally organized into a tree of nested, reusable components. For example, a todo app’s component tree might look like this:
Root Instance
└─ TodoList
   ├─ TodoItem
   │  ├─ DeleteTodoButton
   │  └─ EditTodoButton
   └─ TodoListFooter
      ├─ ClearTodosButton
      └─ TodoListStatistics

Q11: List some features of Vue.js.

Templates
Reactivity
Components
Transitions
Routing

Q12: How can I fetch query parameters in Vue.js?

console.log(this.$route.query.test)

Q13: What is the difference v-bind and v-model? Provide some code example.

v-model is a two-way binding for form inputs. It combines v-bind, which brings a js value into the markup, and v-on:input to update the js value.


<input v-model="something">

<input
   v-bind:value="something"
   v-on:input="something = $event.target.value"
>

Q14: How to pass an argument to Vue.js filters?

filters: {
  capitalize: function (value) {
    if (!value) return ''
    value = value.toString()
    return value.charAt(0).toUpperCase() + value.slice(1)
  }
}

{{ message | filterA | filterB }}

{{ message | filterA('arg1', arg2) }}

https://cn.vuejs.org/v2/guide/filters.html

Q15: How to use Gulp with Vue.js?

Vueify

Q16: What's the equivalent of Angular Service in Vue.js?

There are 4 ways:
- Stateless service: then you should use mixins
- Statefull service: use Vuex
- Export service and import from a vue code
- any javascript global object

Q17: What is Vuex?

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

https://vuex.vuejs.org/zh/

Q18: Why we need Vue.js mixins?

混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。 

https://cn.vuejs.org/v2/guide/mixins.html

Q19: What is the best way to create a constant, that can be accessible from entire application in VueJs ?

//config.js
export default {
	c1: 'Constant 1',
	c2: 'Constant 2'
}

import config from './config';

Q20: What is a proper way to communicate between sibling components in vuejs 2.0?"

https://www.fullstack.cafe/blog/20-top-vue-js-interview-questions-2018-updated