1. Vue. Js is introduced
Vue. Js is a lightweight, high-performance, componentized MVVM library with a very easy to use API. Vue.js is a library for building data-driven Web interfaces. Vue.js is a set of progressive frameworks for building user interfaces. Unlike other heavyweight frameworks, Vue is designed with bottom-up incremental development. Vue’s core library focuses only on the view layer and is very easy to learn and integrate with other libraries or existing projects. Vue, on the other hand, is fully capable of driving complex single-page applications developed with single-file components and libraries supported by the Vue ecosystem. Data-driven + componentized front-end development. In short: Vue.js is an incremental framework for building data-driven Web interfaces. The goal of vue.js is to implement data binding and composite view components for responses through the simplest POSSIBLE API. The core is a responsive data binding system.
2. What is MVVM?
MVVM stands for model-view-ViewModel. MVVM is a design idea. The Model layer represents the data Model, where you can also define the business logic for data modification and manipulation; A View represents the UI component that is responsible for converting the data Model into a UI presentation. A ViewModel is an object that synchronizes the View and Model.
3. Briefly describe the responsivity principle of Vue
When a Vue instance is created, Vue iterates over the properties of the data option, turning them into getters/setters with Object.defineProperty and internally tracking the dependencies, notifying the properties of changes when they are accessed and modified. Each component instance has a corresponding Watcher program instance, which records properties as dependencies during component rendering and then, when setters for dependencies are called, tells Watcher to recalculate, causing its associated components to be updated.
4. Vue. Js characteristics
Concise: Pages are composed of HTML templates +Json data +Vue instances Data-driven: automatically calculates attributes and tracks dependent template expressions componentalization: Constructs pages with reusable and decouple components Lightweight: Small code, independent of other libraries Fast: Accurate and effective batch DOM updates Template friendly: Can be installed through NPM, BOwer, etc., easy to integrate
5. What is SCSS?
Preprocessing CSS, write the CSS current function, define variables, nested.
6. Understanding the vUE life cycle?
There are 8 stages: before/after creation, before/after load, before/after update, and before/after destruction. Before/After: In the beforeCreate phase, the mount element EL of the Vue instance does not exist yet. Before/After loading: In the beforeMount phase, the vue instance’s $EL and data are initialized, but the previously virtual DOM node is still mounted, and data.message has not been replaced. In mounted phase, vue instance is mounted and data.message is successfully rendered. Before/After update: When data changes, the beforeUpdate and updated methods are triggered. Before/after destroy: Changes to data do not trigger periodic functions after destroy, indicating that the vue instance has been unbound from event listening and the DOM structure still exists.
7. Why must data be a function in Vue?
The object is a reference type. When reusing components, data objects point to the same data object. When modifying data in one component, data in other reusable components will be modified at the same time. A function that returns an Object does not have this problem because it returns a new Object (an instance of Object) at a different reference address.
Which component is an active-class property?
Router-link component of vue-router module.
9. What kinds of navigation hooks does vue-Router have?
Three. One is the global navigation hook: route. beforeEach(to,from,next), which intercepts before jumping. Second: hooks within components; Third: separate route exclusive component
10. Name at least four vUE commands and their usage.
V-if: determines whether to hide. V-for: data loop out; V-bind :class: to bind a property; V-model: implements bidirectional binding
11. What is vue-loader? What are the uses for it?
A loader that parses.vue files and converts them into JS modules with template/js/style.
12. Name the use of each folder and file in the SRC directory in vue.cli project.
The assets folder contains static resources. Components; Router defines routing configurations. View; App. vue is an application main component; Main.js is the entry file
13. Calculate the difference between properties and Watch
We certainly use computed properties computed and watch when we use VUE. Computed properties are used to declaratively describe a value that depends on another value. When you bind data to a calculated property in a template, Vue updates the DOM when any of its dependent values cause the calculated property to change. This is a powerful feature that makes your code more declarative, data-driven, and easy to maintain. Watch listens to the variables you define and calls the corresponding methods when the values of the variables you define change. If num is changed in watch, the function of num is called. If num is changed in watch, the function of num is called. If num is changed in watch, the function of num is called. With computed attributes, which count values dependent on Name, it cannot count variables already defined in data.
Prop validation, and default values
Prop can pass a number, a Boolean, an array, an object, and all the properties of an object. A component can specify validation requirements for props. If validation requirements are not specified, Vue will issue a warning such as passing data of type number, setting its default value with defalt, and issuing a warning if validation fails.
props: {
visible: {
default: true.type: Boolean,
required: true}},Copy the code15. Vue component communication
Parent pass child Parent: custom attribute name + Data (to be passed) => :value=” data “child: props [” Custom attribute name on parent”] => to receive data.) The child pass parent registers the child component in the parent and binds listeners to custom events on the child component tag. Child: this.$emit(‘ custom event name ‘, data) child: @ custom event name =’ callback function ‘parent: methods: Let bus = new Vue() A: methods :{function {bus.$emit(‘ custom event name ‘, data)} send B: Created () {bus.$on(‘A sends custom event name ‘, function)
16. Vue route transmission parameters
This.$route.query = this.$route.query Arguments passed in params are accepted with this.$route.params
17. What is vuex? What are the properties?
Vuex is a state management mode developed specifically for vue.js applications. State, getter, mutation, action, and Module vuex store Vuex is a repository of objects. Where, state is where data source is stored, corresponding to the general VUE object datastate stores the data is responsive, vUE component reads data from store, if the data in store changes, Components that depend on this data also get updates that map global state and getters via mapState to the computed property of the current component. What is the getter for vuex? Getters can evaluate state, it’s a evaluated property of store and you can evaluate property of a component, but you can reuse getters across multiple inputs if a state is only used within one component, What is the mutation of Getters vuex? The only way to change the state in the store of Vuex is to submit what is the action for mutation Vuex? Action is similar to muation except that: Actions can contain any asynchronous operation. Should the Ajax request code in vUE be written in the component’s methods or vuex’s actions? In the face of complex applications, there are many states to manage. We need to split vuex’s Store object into modules.
If the requested data is not intended to be shared by other components, but is only used within the requested component, it does not need to be put into the state of the VUEX. If it is reused elsewhere, put the request into an action for reuse and return it as a promise
18. What are the similarities and differences between V-show and V-IF directives?
The V-show directive changes the displayCSS property of an element to show or hide it. The V-if directive destroys and reconstructs the DOM directly to show and hide the element
19. How do I make CSS work only in the current component?
Modify the current component
20.<keep-alive></keep-alive>What is the function of?
Caches inactive component instances when wrapping dynamic components, mainly to preserve component state or avoid re-rendering. In plain English: for example, if there is a list and a detail, then the user will often execute open details => return to the list => Open details… If both the list and the details are on a very frequent page, then the list component can be cached using
so that each time the user returns the list, it can be quickly rendered from the cache, rather than re-rendered
21. What is the difference between delete and vue. delete?
Delete simply changes the deleted element to empty/undefined and the other elements’ keys remain the same. Vue.delete directly deletes the array and changes its key value.
Var a = [1, 2, 3, 4] var b = [1, 2, 3, 4] delete a [0] the console. The log (a) / / [empty, 2 and 4] this.$delete(b, 0) to the console. The log (b) / / (2 and 4]Copy the code22.$nextTickWhat is?
Vue implements responsiveness rather than immediately changing the DOM after data changes, but updating the DOM according to a certain strategy. $nextTick is a deferred callback performed after the next DOM update cycle, and when you use $nextTick after modifying the data, you can retrieve the updated DOM in the callback
23. Can V-ON listen for multiple methods?
You can.
<input type="text" :value="name" @input="onInput" @focus="onFocus" @blur="onBlur" />
Copy the code24. V-on common modifier
The.stop modifier prevents events from bubbling up. In the same way as calling the event.stopPropagation() method.prevent this decorator prevents the default behavior of the current event. In the same way as calling the event.preventDefault() method.self the directive fires the callback only if the event is fired from the event-bound element itself. The once modifier indicates that the bound event will only be fired once
25. V-for key
When Vue is updating a rendered element list with V-for, it defaults to a “reuse in place” strategy. If the order of data items is changed, instead of moving DOM elements to match the change in data items, Vue simply reuses each element here and ensures that it displays every element that has been rendered under a specific index. To give Vue a hint that it can track the identity of each node to reuse and reorder existing elements, you need to provide a unique key attribute for each item. The type of the key attribute can only be string or number. The special attribute of key is mainly used in the virtual DOM algorithm of Vue to identify VNodes when comparing old and new nodes. If keys are not used, Vue uses an algorithm that minimizes dynamic elements and tries to repair/reuse the same type of elements as much as possible. With a key, it rearranges elements based on the change in the key and removes elements where the key does not exist.
26. Priority of V-for and V-IF
V-for takes precedence over V-if. If you need to traverse the entire array each time, it will affect speed, especially if you need to render a small part of it.
27. The Vue child component calls the parent component’s methods
The first method is to call this.$parent. Event directly from the child component. The second method is to emit an event from the child component to the parent component, which the parent component listens for.
28. What are the Promise objects?
1. Promises are a solution to asynchronous programming, a container that holds the result of some event (usually an asynchronous operation) that will end in the future. Syntactically, a Promise is an object from which to get messages for asynchronous operations. Promise provides a uniform API, and all kinds of asynchronous operations can be handled in the same way. The Promise object is a constructor that generates a Promise instance; 2. The two characteristics of promise object state is not affected by the outside world once && state changes, won’t change, at any time can get the result (pending status – > fulfilled | | pending – > rejected)
29. What are the characteristics of Axios?
Axios is an HTTP library based on Promises that supports all of promise’s apis. It intercepts requests and responses. 3, it can convert request data and response data, and automatically convert the content back to JSON type data; 4, it is more secure, the client supports XSRF defense;
30. What is ref in Vue?
Ref is used to register reference information for an element or child component. The reference information will be registered with the parent component’s $refs object. If used on a normal DOM element, the reference refers to the DOM element. If used on a child component, the reference refers to the component instance.
31.Vue routing mode and implementation mode?
Hash mode: In the browser, the symbol “#”, # and the characters after # are called hash, and are read with window.location.hash. Features: Hash is in the URL, but is not included in the HTTP request. Hash is used to instruct browser actions. It is useless for server security and does not reload pages. In hash mode: Only the content before the hash symbol is included in the request, such as http://www.xxx.com, so the back end will not return a 404 error even if the route is not fully covered. History mode: History uses new HTML5 features; Two new methods are provided: pushState (), replaceState () to modify the browser history stack, and popState events to listen for state changes. History pattern: the front end of the URL must be initiated and the actual backend requested URL, such as http://www.xxx.com/items/id. The back end will return a 404 error if there is no routing for /items/ ID. Vue-router’s official website states: “However, this mode needs to be configured in the background to play well… So, you add a candidate resource on the server that covers all cases: if the URL doesn’t match any static resource, it should return the same index.html page that your app depends on.”
32.$routeand$routerThe difference between?
$route is the “routing information object”, including path, Params, Hash, Query, fullPath, matched, name and other routing information parameters. $router is a ‘router instance’ object that includes hop methods, hook functions, etc.
33. What are the two cores of vue.js?
Data driven, component systems
34. How is Vue compatible with IE?
Babel – polyfill plug-in
35. Page refresh Vuex is cleared solution?
1. Store the data to the localStorage device and return to the localStorage device. 2
36. How to optimize the slow loading speed of SPA app’s first screen?
1. Introduce the common JS library through the script tag, reduce the size of app.bundel, let the browser download resource files in parallel, improve the download speed; 2. When configuring routing, pages and components are introduced in lazy loading mode, further reducing the size of app.bundel, and loading corresponding JS files when calling a component; 3. Add a front-screen loading diagram to improve user experience;
Vue changes arrays to trigger view updates
The following method calls change the original array: push(), pop(), shift(), unshift(), splice(), sort(), reverse(), vue.set (target, key, value)
Set (target, key, value) Target: data source to be changed (object or array) Key: specific data to be changed Value: reassigned valueCopy the code38. In what cycle is DOM rendering completed?
Mounted Note that Mounted does not promise that all child components will also be mounted together. If you want to wait until the entire view is rendered, replace Mounted with vm.$nextTick
mounted: function () {
this.$nextTick(function () {
// Code that will run only after the
// entire view has been rendered
})
}
Copy the code39. Describe the specific scenarios for each cycle
Mounted is also called when loading events are completed. Mounted is also called when loading events are completed. Updated: If data is handled uniformly, write the corresponding function beforeDestroy: can make an acknowledgement box for the stop event
40. Which hooks are triggered on the first load?
BeforeCreate, created,beforeMount, and Mounted are triggered
41. Dynamically bind classes
Active className, isActive variable
<div v-bind:class="{ active: isActive }"></div>
Copy the code