1. How do I change styles using a third-party component library?
In VUE development, component libraries such as Element-UI and Vant are often used, but there are many times when the product needs us to change the style. In this case, we can write a special style file – global reference. Another approach is to find the UI library’s style hierarchy layer by layer (which is cumbersome). I meet a requirement in development, the back end gives me a piece of HTML code, and I show it (mobile). There are images in the HTML code, the size is very large, will cause the mobile side scroll, this can be set using >>> or /deep/, vue’s depth selector. ‘>>>’ applies only to CSS. To apply to less or Sass, use /deep/
<style scoped>
<! -- Viewpoint is the outermost class name of this page -->
.viewpoint >>> img{
width:90%;
}
</style>
<style lang='less' scoped>
.viewpoint{
/deep/ img{
width:90%; }}</style>
Copy the code2. Principle of vUE bidirectional binding
Vue is the MVVM framework used, and its biggest advantage is two-way data binding. It draws on the MVC design idea, and the Model and View are associated through the ViewModel. The Viewmodel is responsible for displaying changes to model data on the View and reporting those changes back to model. Object.defineproperty () Data hijacking can listen to set and GET methods for individual properties. The three parameters are the object to listen on, the property to listen on, and the listening method of set/get
Implement a listener Observer that hijacks and listens to all attributes and notifies subscribers of changes. 2, implement a subscriber Watcher, can receive notification of attribute changes and execute the corresponding function, so as to update the view 3, implement a parser Compile can scan and parse the relevant instructions of each node, and initialize the corresponding subscriber according to the initialization template data
Disadvantages: Can’t listen for array changes if property value is changed to array; Vue3.0 replaces Object.defineProperty() with proxy, which is an ES6 syntax. It puts a layer of interception in front of the target Object, through which all external objects must pass, thus providing a mechanism for filtering and rewriting external access. Object.defineproperty () is an all-round enhancement. TIPS: You can hijack the entire object and return a new object, with this inside the target object pointing to the proxy.
There was a teacher in b station in detail is very good: www.bilibili.com/video/BV1DT…
3. Why must data in vue be a function?
(1).Object is a reference data type. If the component data uses an Object, it will cause that when a component is reused, the data will point to the same address in memory. (2). Components in VUE are reusable VUE instances. After a component is created, it may be used in various places. (3). Define data in the form of function return value to prevent mutual influence. Its essence is the use of js function scope between the principle of mutual influence.
Note: Data is recommended to use function return value form, but does not mean that object form cannot be used. For example, if a component is used only once in an entire project, object form can also be used. However, in order to keep the project code content uniform and non-specific, it is best to use the function return value form for data in all components.
4. Several ways of VUE component communication
1) Father to son:
* Add a custom property where the parent component calls the child. The value of the property is the value that the parent component passes to the child (binding property is required if the property is number, Boolen, variable type)
* Add an option (either an array or an object) to the child component where it is defined to receive values from the parent component
2) Son to father:
* Bind a custom event to the parent component where the child component is invoked. Note that the event does not include ().
* Implement this event in the parent component option methods, with the default parameter being the value obtained from the child component
* In the child component, use $emit() to emit events. The first parameter is the custom event and the second parameter is the value that the child passes to the parent
3) Non-parent-child components:
* A VUE instance, BUS, is used as the central mainline, which requires both value transfer and receive components to be introduced. To ensure the presence of the receiver, receive the value at the receiving end via bus. on(‘ receive signal ‘, function (val)). On (‘ receive signal ‘, function (val) {}) receives values at the sender. On (‘ receive signal ‘, function (val)) receives values at the sender. The value is sent from the sender via bus.emit(‘ receive signal ‘, val).
4) the parent, the parent, the parent and children takes the current component of the parent component and the current components of the child component
Parent The root Vue instance of the current component tree. If the current instance has no parent, the instance will be itself. Parent The root Vue instance of the current component tree. If the current instance has no parent, the instance will be itself. Parent The root Vue instance of the current component tree. If the current instance has no parent, the instance will be itself. Children get an array of child components
5) $refs gets the component instance
The parent component gets the child component’s data and methods through $refs
6) VuEX state management
7) Transmit value A through routing belt parameters
This.$router. Push ({path: ‘/conponentsB’, query: {orderId: 123}}) // jump to B
B
this.$route.query.orderId
5. What are the lifecycle methods of Vue? At what stage is the request usually made? And the practical application of each cycle
BeforeCreated: called after instance initialization and before data and Event and Watcher events are configured. In the current phase, data and methods on Data, methods, computed, and Watch cannot be accessed
Application: Add loading event
Created: an instance is called after it has been created. In this step, the instance is configured with data observation, property and method operations, and watch and Event event callbacks. There is no EL, so if you want to interact with the DOM, you need to use vm.el, if you want to interact with the DOM, you need to use vm.el, if you want to interact with the DOM, you need to access the DOM via vm.nextTick
Application: Add loading event
BeforeMount: Called before mounting, the associated render function is called for the first time
Mounted: Is invoked after the Dom node is mounted. In this phase, the REAL Dom node is mounted, data is bidirectional bound, and Dom nodes are accessible
Application: Get the DOM node
BeforeUpdate: Called when data is updated and occurs before the virtual DOM is re-rendered and patched. You can further change the state in this hook without triggering additional rerendering
Updated: Occurs after the update is complete. The DOM at this stage is updated. Be careful not to change the data during this time, as this can lead to an infinite loop of updates, and the change hook is not called during server rendering
Application: Data update requires unified service processing. If different data update operations need to be differentiated, use $nextTick
BeforeDestory: called before instance destruction. The instance is still fully available at this stage, and we can clean up at this point, such as clearing counters
Application: Clear timer
Destoryed: called after the vue instance is destroyed. When called, everything indicated by the vue instance is unbound, all events are listened on, and the subinstances are removed. This hook is not called during server-side rendering
Application: Remove the DOM
Deactivated: Specifies the value of activated when a component is destroyed. This parameter is valid only when the component is destroyed
Asynchronous requests can be made in hook functions created, beforeMount, and Mounted because in these three hook functions, data is already created and can be assigned to the data returned by the server. If asynchrony does not need to rely on the DOM, it is recommended to make asynchronous requests in the Created hook function because of the following advantages: 2) SSR does not support beforeMount and Mounted hook functions. Therefore, created promotes consistency
What’s the difference between v-if and V-show?
1. Method: V-IF conditional rendering instruction, which dynamically adds or deletes DOM elements into the DOM tree; V-show controls show and hide by setting the display style attribute of the DOM element
2. Compilation process: V-IF switching has a partial compilation/uninstallation process, during which the internal event listeners and sub-components are properly destroyed and rebuilt; V-show simply switches based on CSS
3. Compile conditions: V-if is lazy, if the initial condition is false, nothing is done, and only partial compilation starts when the condition is true for the first time; V-show is compiled under any conditions, then cached, and DOM elements are preserved
4. Performance cost: Higher switching cost for V-IF, higher initial rendering cost for V-show
5. Usage scenario: When running, conditions rarely change with V-if, V-show suitable for frequent switching
6. Both dynamically control the DOM element display and hide
7. Built-in instructions for Vue
8. How to understand the one-way data flow of VUE
Data is always passed from the parent to the child, and the child has no right to modify the value passed by the parent, but can only request that the parent make changes to the original data. This prevents the child component from accidentally changing the state of the parent component, making the application data flow difficult to understand.
Note: the development environment will warn you that a prop passed by a child component bound to a parent component is not written properly
If you want to change the value of prop, you can define a variable in data, initialize it with the value of prop, and then notify the parent component via $emit to change it