2019 Vue interview questions summary (Update ...)
1. vue in MVVM pattern
即Model-View-ViewModel。
Vue is a data-driven, self-Vue and the DOM data binding, once created bindings, DOM, and data will be synchronized whenever the data changes, changes in DOM will follow.
ViewModel is the core of the Vue, it is an instance of Vue. When Vue scope instance, the HTML element may be an HTML element on the body, it may be an id of the referenced element.
DOM Listeners and Data Bindings are key to achieving a two-way binding. Changes in DOM Listeners monitor all page View layer DOM element, when a change occurs, the data values change with the Model layer; Data Bindings monitor data Model layer, when the data changes, the DOM element View layer changes.
2. v-show instruction, v-if the difference
Conditions rendering command, and v-if the difference is that v-show whether it is true or false, the elements are present in the HTML code; v-if and only if the value is true, the element will not exist in the HTML code . v-show style instruction set only the value of the element of the CSS
3. How to make css only work in the current component
In each vue component can define their own css, js, if you want to write in assembly css only on the current assembly work, only you need to write scoped in style, namely:
<style scoped></style>复制代码4. Instruction keep-alive
In vue-router that says keep-alive, the meaning of keep-alive:
If the switched-out assembly remains in memory, or can retain its status to avoid re-rendering. For this purpose, a keep-alive add instruction
<component :is='curremtView' keep-alive></component>
5. Vuejs assembly
vuejs building component uses
Vue.component('componentName',{
/*component*/
})；
// 这里注意一点，组件要先注册再使用
Vue.component('mine',{
template:'#mineTpl',
props:['name','title','city','content'] }); var v=new Vue({ el:'#vueInstance', data:{ name:'zhang', title:'this is title', city:'Beijing', content:'these are some desc about Blog' } });复制代码6. Routing Nested
Routing will be nested within other components to render the component, rather than the entire page jump router-view itself is a component rendered to that position, want to make the jump page, the page will render the root component, starting at Configuring routing start time wrote:
var App = Vue.extend({ root });
router.start(App,'#app');复制代码Here the root component is first registered in, for routing configured to render the pages out, then the assembly mounted on the root #app matching elements.
7. Use of an instruction v-el
Sometimes we just want to use jquery like to access an element, then you can use the v-el instructions, go to the element register an index for easy access to this element by $ el-owned instance.
note
HTML is not case sensitive, so the v-el: someEl converted to lowercase. You can use v-el: some-el then set this $ el.someEl..
Examples
<span v-el:msg>hello</span>
<span v-el:other-msg>world</span>
this.$els.msg.textContent //-> "hello"
this.$els.otherMsg.textContent// -> "world"
this.$els.msg//-><span>hello</span>复制代码8. vue.js using event name
In vuejs, we often want to bind some of the events, sometimes to the DOM element is bound, sometimes bind to the component. Binding events in HTML with v-on: click- "event", then evet names do not appear in uppercase, because it is not case sensitive 1.x, so if we write v-on in HTML: click = " myEvent "in js wrote myEvent on an error, so vuejs 1.x binding events of the time, we should try to avoid using capital letters. Without this restriction in 2.0!
What is 9. Vue.js
Vue.js (progressive frame is constructed of a user interface. Heavyweight other frame is different, Vue bottom-up design of the core library incremental development concern only .Vue view layer, and is very easy to learn, very easy integration with other libraries or existing projects. On the other hand, Vue is fully capable of driving the use of complex one-page application libraries developed single-file assemblies and Vue ecosystem supports.
Vue.js goal is to achieve a view of data and a binding response by a combination of components as simple API
10. VueJS characteristics:
I: MVVM mode (variable data (Model) change the view (view) is also changed, the view (view) changed data variable (Model) is also changed)
Using MVVM pattern has several benefits:
1. The low-coupling. View Model can be independent of changes and modifications can be bound to a ViewModel different View, when the Model View can change the same, when the Model View can also change the time constant.
2. reusability. You can put some logic in view of the ViewModel inside, so many View reuse this view logic.
3. The independent development. Developers can focus on developing business logic and data (ViewModel). Designers can focus on the interface (View) design.
4. testability. You can test the interface (View) for ViewModel
II: componentization
Instruction III
IIII: vue2.0 began to support virtual dom
vue1.0 Yes really dom operating elements and not virtual
Virtual dom: the page refresh rate can improve
Virtual DOM advantages and disadvantages.
A: size - one of which is more functional code package means that more lines of code. Fortunately, Vue.js 2.0 is still relatively small (the current version 21.4kb), and
And also delete a lot of things.
B: Memory - Similarly, virtual DOM need to save in memory the copy of the existing DOM, this is a tradeoff in the DOM updating the speed and memory usage.
C: does not apply in all cases - if the virtual DOM can be modified batch-time is very good. But if it is a single, rare update it? Any such
DOM updates are virtual DOM will bring meaningless pre-calculated
11. Vue.js Features
Simple: by the page template + Json data + Vue example HTML composition
Data-driven: automatically calculates properties and tracking template-dependent expression
Components of: a reusable, the decoupling components to construct the page
Lightweight: a small amount of code, independent of other libraries
Fast: DOM accurately and efficiently batch update
Template friendly: through a variety of ways npm, bower and other installation, easy to integrate into
12. What is the difference between the Vue.js and AngularJS that?
Here are some choice Vue instead Angular possible causes;
Vue.js is a more flexible and open solution. It allows you to organize the way you want your application, rather than at any time must follow the rules Angular making. It is just a view layer, so you can embed it into an existing page and do not have to make a huge one-page application. In combination with other aspects of the library it gives you more space, but appropriate, you also need to do more architectural decisions. For example, Vue.js core does not include a default routing and ajax function, and generally assume you use an external application module constructed system. This is probably the most important difference
In the API and interior design, Vue.js much simpler than Angular, so you can quickly grasp all its properties and put into development.
Vue.js have better performance because it does not use dirty checking. As more and more for a long time watcher, Angular becomes slower and slower, because every time data changes in scope, all watcher need to be re-evaluated. Vue is no problem, because it uses a dependent tracking system based on observation, so all data changes are independent of the trigger, unless there is a clear dependence between them.
Concept Vue.js instructions and components make this clearer distinction. DOM operation instruction is only responsible for the package, while the component represents a self-contained separate unit - with its own logic and data view. In Angular there are many conceptual confusion between both of them.
13. Vue.js and React.js What is the difference?
React.js and Vue.js does have some similar - they all provide a data driver, may be combined view of the assembly of structures. However, their internal implementation is completely different. React is based Virtual DOM-- DOM tree data structure for describing the state in memory. React data is usually regarded as immutable, and DOM operations is through the Virtual DOM of the diff calculated. In contrast, the default data Vue.js is variable, and change data directly starting corresponding DOM updates. Compared to Virtual DOM, Vue.js using the actual DOM as a template for data binding and maintains a reference to the real nodes.
Virtual DOM provides a functional description view of the method, it is very cool. Because it does not use the data observation mechanism, each update will re-render the entire application, thus ensuring the synchronization of data with the view through the definition. It also opens up the possibility of isomorphic JavaScript applications.
Tell the truth, my own design ideas to React is also very appreciated. But React One problem is that the logic and view of the assembly tightly bound. For some developers, they might think this is an advantage, but for those who, like me, both in design and development, it still prefers templates because they allow us to think better design and CSS visually. JSX mix of logic and JavaScript code interfered with my thought process is mapped to the design. Instead, Vue.js by adding a lightweight in the template DSL (instruction), in exchange for a still visual templates, and can be packaged into logical commands and filters.
Another problem is that React: Since the DOM updates entirely up to the Virtual DOM management, when you really want to control their own DOM is a bit tricky (although in theory you can, but you do so in essence fighting React design thought). For animation requires complex control time limit for this becomes a very annoying. In this regard, Vue.js allow for more flexibility, and there are many examples of rich interaction with Vue.js built
14. Please detail under your understanding of the life cycle of Vue?
Total is divided into eight stages before the creation / after, before loading / after update before / after the destruction before / after.
After you create before /: in beforeCreate stage, mount element el vue instance yet.
Before loading / rear: in beforeMount stage, vue $ el instances and data are initialized, but still before the dom mounted as a virtual node, data.message has not been replaced. In the mounted stage, vue example of the mount is completed, data.message successfully rendered.
Before updating / rear: When data changes, it will trigger beforeUpdate and updated methods.
Destruction before / after: After the implementation of the destroy method, changes to the data will no longer trigger periodic function, examples illustrate this point vue been unbound and event listeners as well as the dom, dom but the structure still exists
How to pass a value between 15 components?
Parent component and subassembly traditional values: Props
Subassembly pass data to parent element: $ subassembly by EMIT method of transmission parameters, the trigger event parent component
16. vue-router, which has several navigation hook?
Global Navigation hook
router.beforeEach(to, from, next),
router.beforeResolve(to, from, next),
router.afterEach(to, from ,next)
Within the assembly hook
beforeRouteEnter,
beforeRouteUpdate,
beforeRouteLeave
Routing exclusive component alone
beforeEnter
17. vue What is the principle of two-way binding
vue.js is the use of data in conjunction with hijacking a publisher - way mode subscribers to hijack each attribute by Object.defineProperty () setter, getter, posted a message to subscribers when data changes, triggering the corresponding listener callback.
What are the characteristics of mutation and 18. vuex action is? What's the difference?
mutation for modifying state data is synchronized.
action similar muation, except that: action is submitted mutation, rather than directly change state
action can include any asynchronous operation
Why write key in the assembly 19. The write React / Vue project, what is its role?
During development, we need to ensure that a key element is unique in its sibling elements. In the Diff algorithm will come to judge the value of the element by means of Key element is the element from being moved or newly created, thereby reducing unnecessary re-rendering elements.
20. computed and watched the difference between:
calculation is computed attributes, other attributes dependent on the calculated value, and the computed values are cached, the content will return only when the calculated value change.
watch will listening to a callback change values, logical operations may be performed in a number of callback.
So in general need to rely on other attributes to dynamically get value when you can use computed, for listening to the change in the value we need to do some complicated business logic can use the watch.