1. What is MVVM? MVVM stands for model-view-ViewModel. MVVM is a design idea. The Model represents the data Model, where you can also define the business logic for data modification and manipulation; The View represents the UI component, which is responsible for converting the data Model into THE UI and presenting it. The ViewModel is an object that synchronizes the View and Model. Under the MVVM architecture, the View and Model are not directly related, but interact with each other through the ViewModel. The interaction between the Model and the ViewModel is bidirectional, so changes in the View data are synchronized to the Model, and changes in the Model data are reflected in the View. The ViewModel connects the View to the Model layer through bidirectional data binding. The synchronization between View and Model is completely automatic, without human intervention, so developers only need to pay attention to business logic, do not need to manually operate DOM, do not need data state synchronization problem, complex data state maintenance is completely managed by MVVM

2. The difference between MVVM and MVC? How does it differ from other frameworks (jQuery)? Which scenarios fit? MVC and MVVM are not that different. It’s all a design idea. It’s basically the ViewModel that the Controller in MVC evolved into. MVVM mainly solves the problem that a large number of DOM operations in MVC reduce page rendering performance, slow loading speed, and affect user experience. Differences: VUE is data-driven, and layers are displayed through data rather than node operation scenarios: scenarios with more data operations are more convenient

3. What are the advantages of Vue? Low coupling. Views can be changed and modified independently of Model. A ViewModel can be bound to different “views”. The Model can remain unchanged when the View changes, and the View can remain reusable when the Model changes. You can put some View logic in a ViewModel and have many views reuse that View logic. Independent development. Developers can focus on business logic and data development (ViewModel), and designers can focus on page design. Can be tested. Interfaces have always been difficult to test, and tests can now be written against the ViewModel.

4. Value transfer between components? The parent component binds properties to the child component. The child component uses the props property to receive transmitted data. In the parent component declared in a function of receiving data, the parent component to child components binding events, child components through emit trigger events, and you can pass parameters at this time, the parent component by brother receive parameters defined to monitor events (3) components to create a new instance vue, let each brother component sharing mechanism, an event triggered by events trigger emit events, The parent component receives the parameters through the defined listening event. ③ The sibling component creates a new vUE instance, and each sibling component shares the same event mechanism. The emit event can be emitted through the event, and the parameter can be passed at this time. / / Mounted () {/ / emit emit($on, callback); / / Mounted () {/ / emit($on, callback); / / Mounted () {/ / emit($on, callback); At this point, the this in the callback function has changed and the arrow function can be used

5. Jump declaration between routes (label jump) Programming (JS jump)

6. Vue. CLI How to use custom components? Have you encountered any problems? Create a new component file (indexPage.vue) in the components directory and export the script default{} Import indexPage from ‘@ / components/indexPage. Vue’ step 3: into subcomponents of vue attributes of components, the components: {indexPage} Step 4: Use it in the Template view. For example, if there is an indexPage name, use index-Page

The webpack configuration provides require.ensure() for on-demand loading. Instead of importing a route as import, import a route as const instead of page loading on demand: import home from ‘.. /.. Ensure ([],() => r(require(‘.. /.. /common/home.vue’))

8. What is vuex? How to use it? Which functional scenarios use it? State management in vUE framework. Import store and inject in main.js. Create a new directory, store,…. Export. The scenarios are as follows: Status between components in a single-page application. Music player, login status, add to cart

9. What are the attributes of VUex? There are five types, including State, Getter, Mutation, Action, and Module

10. State features of VUex? A.Vuex is a warehouse with many objects in it. Where, state is where data source is stored, and the data stored in data B.state corresponding to general Vue objects is responsive. Vue components read data from state. If data in store is changed, components that depend on this data will also update C. It maps the global state and getters to the computed properties of the current component through mapState

11. Vuex’s Getter feature a. Getter can calculate State, which is the calculated property B of Store. Although you can do computed properties within components, getters can reuse C across multiple components. If a state is only used within a component, geters are not required

Vuex Mutation Action is similar to Mutation, but the difference is that the Action submitted Mutation instead of directly changing the state. Actions can contain any asynchronous operation

13. What are the problems with not using Vuex? Decreased maintainability, want to modify data to maintain three places; The readability is reduced because it is impossible to see where the data in a Component comes from to increase the coupling. A large number of uploads and distributions will greatly increase the coupling. Vue originally used Component to reduce the coupling.

14. Similarities and differences between the V-show and V-if directives The V-show directive changes the CSS properties of the display element to show or hide it. The V-if directive destroys and reconstructs the DOM directly to show and hide the element

15. How do I make CSS work only in the current component

16. What is the function of? When wrapping dynamic components, inactive component instances are cached, primarily to preserve component state or avoid re-rendering.

17. Steps to introduce components in VUE? (1) Using ES6 import… from… The syntax or common.js require() method introduces the component (2) to register the component, as shown in (3) using the component

18. What does instruction V-EL do? Provide an existing DOM element in the page as the mount target for the VUE instance, either a CSS selector or an HTMLElement instance

19. The steps for using plug-ins in Vue follow ES6 import… form… Use (MyPlugin,{someOption: true}); use(MyPlugin,{someOption: true});

20. Name three commonly used declaration cycle hook functions in Vue. Created: called after the instance has been created. In this step, the instance has completed data observation, property and method operations, and watch/ Event event callbacks. El: specifies the vm. El. Mounted: Specifies the VM. El is replaced by the newly created vm.el and is called after being mounted to the instance. If root mounts an element within the document, vm.$el is called when mounted and activated: keep-alive is activated within the document

21. Which component is an active-class property? Router-link component of vue-router module

22. How to define the vue-router dynamic route and how to obtain the sent dynamic parameters? Add /:id to the path attribute in the index.js file in the Router directory. Use the params.id of the Router object

23. What kinds of navigation hooks does vue-Router have? There are three types: global navigation hooks, router-beforeeach (to,from,next), which intercept before jumping

24. Eight stages of the life cycle? Before/After creation: In the beforeCreate phase, the vUE instance mounts element EL and data object data as undefined and has not been initialized. In the Create phase, the vue instance’s data object data is available before/after el is loaded: 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 is not replaced. In the Mounted phase, the vue instance is mounted and data.message is successfully rendered before/after update. BeforeUpdate and updated methods are triggered when data changes: After destroy, the change to data does not trigger the periodic function, indicating that the vue instance is now unevent-listening and unbound from the DOM, but the DOM structure remains

25. What is the VUE lifecycle? The lifecycle of a VUE instance is the process from creation to destruction. The process of creating, initializing data, compiling templates, mounting DOM -> rendering, updating -> rendering, unmounting, etc., is called the vUE declaration cycle

26. What is the role of the VUE lifecycle? Its lifecycle has multiple event hooks, making it easier to form good logic when controlling the process of the entire VUE instance

27. How many phases are there in the VUE declaration cycle? It can be divided into 8 phases: before/after creation, before/after loading, before/after update, and before/after destruction

28. Which hooks trigger the first page load? The beforeCreate, CREATE, beforeMount, and Mounted hooks are triggered the first time the page is loaded

29. In what cycle is DOM rendering completed? DOM rendering is done in Mounted

30. Briefly describe which scenarios are suitable for each cycle? Mounted beforeCreate specifies the loading event for a new DOM node. Mounted specifies the loading event for a new DOM node. If the data is handled uniformly, write the corresponding function here beforeDestroy: you can do a stop event with an acknowledgement box nextTick: update the data immediately after manipulating the DOM

31. Name at least 4 vUE commands and their usage. V-if: determines whether to hide. V-for: data loop; V – bind: class; Bind a property; V-model: Implements bidirectional data binding

32. What is a V-loader? What are the uses for it? Resolution: a loader for vue files. Use: JS can write ES6, style style, SCSS or less, template can add Jade, etc

33. What is SCSS? What are the installation steps in vue.cli? What are the major features? Precompiling the CSS Step 1: Install csS-Loader, Node-loader, and Sas-loader. Step 2: SCSS step 3: In the same file, configure a Module property. Step 4: Then attach the lang property to the component’s style tag, for example: lang=”scss”

34. Why use key? When elements with the same label name are switched, a unique value must be set through the key feature so that VUE can distinguish between them. Otherwise, VUE will only replace the contents inside the same label for efficiency.

35. Why avoid using V-if and V-for together? When vue processes instructions, V-for takes precedence over V-if, which moves to container elements without iterating through every value in the list. Instead, we only check it once, and we don’t do v-for when v-if is no

What is a VNode? What is the virtual DOM? The nodes rendered by vUE on the page and their children are called “virtual nodes”, or “VNodes” for short. The “virtual DOM” is the name given to the entire VNode tree created by the VUE component tree.

37. What is vue-router? What components does it have? Vue is a plug-in for writing routes. The router – the link, the router – the view

38. What are the routing navigation hooks? What parameters do they take? Navigation hooks include global hooks and proprietary hooks within components. BeforeRouterEnter, afterEnter, beforeRouterUpdate, and beforeRouteLeave parameters are as follows: There are to(the route to), from(the route to leave), next(always use this function to get to the next route, if not, intercept) and the most common ones

39. What is the principle of two-way data binding for Vue? Vue. js adopts data hijacking combined with publiser-subscriber mode. Through Object.defineProperty(), it hijacks the setter and getter of each attribute, releases messages to subscribers when data changes, and triggers corresponding listening callback

40. The calculated properties of vUE, when to use the calculated properties? Computed attributes: Computed data relies on other data, and changes in other data cause changes in it

41. The advantages of Axios? You can set up an API that intercepts requests and responses to automatically convert JSON requests and responses to support Promises