Vue two-way binding principle :
Vue data two-way binding is achieved through data hijacking combined with publisher-subscriber mode
Object.defineProperty() to achieve data hijacking, the corresponding two description properties get and set
example:
1. Bind the contents of the data in the instance to the input box and the text node
2. When the input box changes, the content of data in the vm instance also changes
3. When the content in data changes, the content of the input box and the content of the text node also change
The difference between v-show and v-if:
v-if controls the visibility of elements by controlling the presence or absence of dom nodes; v-show controls the display style of DOM elements
Vue life cycle:
beforeCreate created before
create created successfully
beforeMount starts loading
mounted Loaded successfully
beforeUpdate starts updating
updated updated completed
beforeDestroy before destruction
destroyed destroyed
Component communication:
props father to son
The events child component sends data to the parent component
$emit/$on implements communication between components through empty instances
Routing parameters:
Two cases: params and query
can be obtained through this.$route in the life cycle of the target component
Vuex:
Vuex is the state manager of Vue, and the stored array data is responsive. But it will not be saved, and it will return to the initial state after refreshing, and the state sharing between components: login state
Data sharing between components: shopping cart data, login token
Modify Elment style
1. Use /deep/ to modify the label style deeply
2. Add a new style tag without adding the scoped attribute
3. Override the default style by inline style or binding class style
4. Create a new global.css file under the style folder of the static resource folder, and import it in main.js.
computed：
It is used when some data depends on other data to change. When the data in data has not changed, we call the function in computed n times, and it will be cached (executed once)
watch：
Listening mechanism + event mechanism, used when asynchronous operations are performed while data changes or relatively large overhead
let conset var difference :
var will cause variable leakage and global pollution
let block-level scope, no global pollution
const is also block-level scope, the declared constant, the value cannot be changed
Arrow function:
Arrow functions are anonymous functions, cannot be used as constructors, and cannot use new
Arrow functions have no prototype property
There are no arguments in the arrow function, which can be solved with the expansion operator...
The this of the arrow function always points to the parent context (the this of the arrow function depends on the context of the parent where it is defined, it has nothing to do with the location of use, and this of a normal function points to the object that is called
The method pointed to by this:
The way the function is called determines the direction of this
Ordinary function call, this points to window
Constructor call, this points to the instance object
Object method call, this points to the object to which the method belongs
The method of event binding, this points to the object bound to the event
Change the three methods pointed to by this:
call() method,
apply() method, very similar to call(), the difference lies in the way parameters are provided,
apply() takes an array of arguments, not an argument list
The bind() method creates a new function (called a bound function), which has the same function body as the called function. When the target function is called, the value of this is bound to the first parameter of bind()
Get、Post:
GET requests the specified page information and returns the entity body
POST submits data to a specified resource for processing a request (such as submitting a form or uploading a file). Data is included in the request body. POST requests result in the creation of new resources and/or the modification of existing resources.
Difference between Get and Post:
Request caching: GET will be cached, but post will not
Favorite bookmarks: GET can, but POST can't
Preserve browser history: GET does, POST does not
Uses: get is often used to retrieve data, post is used to submit data
Security: post is safer than get
cross-domain:
Cross-domain is a restriction policy made by browsers for security (the server does not involve cross-domain);
Browser requests must follow the same-origin policy, that is, the same domain name, same port, and same protocol;
Solve cross-domain:
1. CORS cross-domain (the front end does not need to be moved, the back end sets Access-Control-Allow-Origin, etc.)
2. JSONP (dynamically created script tags) front-end adaptation, back-end transformation with front-end and front-end at the same time
3. The interface proxy implements proxy forwarding by modifying the nginx server configuration, the front end is modified, and the back end is not used
Garbage collection mechanism:
Responsible for managing memory used during code execution. The garbage collector will periodically (periodically) find out those variables that are no longer in use, and then release their memory
Closure:
A function declared within a function is called a closure function
Allow external access to internal function variables;
Local variables will be resident in memory;
Can prevent global variable pollution;
Will cause memory leaks (a piece of memory space is occupied for a long time without being released)
MVC:
MVC is a model (model) - view (view) - controller (controller) is a software design model
The controller accepts user input and invokes the model and view to fulfill the user's needs
MVVM:
It is the abbreviation of Model-View-ViewModel. View layer is the view layer-Model layer refers to the data model-ViewModel layer is the view data layer, an object that synchronizes View and Model, MVVM is a design idea. ViewModel connects the View layer and the Model layer through two-way data binding
Two-way data binding:
When the user updates the view, the data of the Model is automatically updated. This is the case of two-way binding
viewModel (business logic layer) is responsible for associating the data with the view to update the view after the data changes, and update the data after the view changes. It has two main parts: the listener and the parser
axios：
characteristic:
Create XMLHttpRequests from the browser
Create http request from node.js
Support Promise API
Intercept requests and responses
Transform request data and response data
cancel request
Automatically convert JSON data
Client supports defense against XSRF
Package:
Introduce it first, repackage the interface to be called into a method and expose it, put the encapsulated method in an api.js file, the page can be directly imported, and use the method name to call
The role of Key:
Reduce DOM operations and improve efficiency
javascript:
There are three parts, ECMAScript, DOM and BOM
DOM: W3C standard is an API that appears to manipulate documents, and document is one of its objects
BOM: is to operate the API that appears in the browser, and window is an object of it
Virtual DOM:
Virtual DOM brings cross-platform capabilities to the framework. In fact, it is just a layer of abstraction to the real DOM. The tree is based on JavaScript objects, and the attributes of the objects are used to describe the nodes. Finally, the tree can be made through a series of operations. mapped to the real environment
SPA first screen loading:
The time from when the browser responds to the URL address input by the user to when the rendering of the content on the first screen is completed
Factors that cause slow loading:
Network delay problem
Resource file size is too large
Resource repeatedly sending requests
When loading the script, the rendering content is blocked
Common SPA first screen optimization methods:
Reduce entry file size
Static resource local cache
UI framework loaded on demand
Compression of image resources
Components are repackaged
Enable GZip compression
use SSR
Disadvantages of Vue:
1. IE8.0 and below versions are not supported;
2. Few advanced tutorials;
3. The ecological environment is not as good as other frameworks;
4. The community is small;
Vue optimization:
1. Route lazy loading
2. Key guarantees uniqueness
3. Remove the map debug file in the compiled file
4. Server rendering ssr
5. Try to use lightweight tool libraries
6. In many cases, use v-if instead of v-show
7. Import required components on demand
8. Do not write inline styles to avoid dom redrawing
9. Use CDN to introduce third-party libraries to reduce server pressure
10. SPA pages use keep-alive cache components
11. Enable gzip packaging and compression, and access with gzip in the background
12. Use anti-shake and throttling functions for a large number of short-term operations (zooming, scrolling)
13. The code is simplified, the console is removed, and the reusable methods and components are extracted