1. Virtual DOM
1. Native JS is imperative programming. When the data rendered on the page changes slightly, it needs to re-render the entire page. The vue.js progressive framework has a concept of virtual DOM. It uses the diff algorithm to compare new and old data. The same data remains unchanged without re-rendering, and different parts of new data overwrite old data.
2. MVVM
1. MV: M is the data 'module', V is the DOM element 'view'
2. VM: refers to the Vue object instance. It is the bridge connecting M and V
3. Data Proxy
1、Object.defineProperty()
let a={x:9};
let b={y:1};
Object.defineProperty(b,'x',{
get(){
return a.x ;
} ,
set(value){
a.x=value
} ,
})
2. Output the vue instance object, and the data under data is stored in the _data object of vm. The dom element interpolation data is the attribute value taken from the vm. That is to say, vue encapsulates the data proxy mechanism (the bottom layer uses the Object.defineProperty() method).
4. Event modification
0. @click=handle(event) is equivalent to @click=handle($event)
1. prevent: prevent the default behavior, for example, the jump behavior of adding a link to a cousin will be prevented;
2. stop: prevent bubbling events;
3. onece: The event can only be executed once;
4. capture: switch from bubbling mode to capture mode;
5. self: Only when the event happens to itself (not because of bubbling or capturing the triggered event) will the event be triggered;
6. Passive: such as the @wheel event, the scroll bar will be called back only after the code in the method is executed. If passive is added, the scroll bar will be scrolled first and then the behavior in the method will be executed.
7. Event modification can be written consecutively, for example: @click.prevent.stop=handle()
5. Keyboard events
1. event.key gets the name of the keyboard key, and evant.keycode gets the code of the keyboard key
2、@keydown,@keyup
3. Commonly used button names: enter, tab (only valid for @keydown), eac, delete, space, top, bottom, left, right
4. Several keys for special usage: ctrl, alt, shift, meta
Use with @keyup: press a key, cooperate with other keys and then release other keys to trigger an event, such as ctrl+s and then release the s key
Use with @keydown: normal use
When used with @keyup, you can specify another key, such as: @keyup.ctrl.k=handle(), so that it can only be used with k.
5. You can also use the keycode of the button (maintenance will be stopped at any time, not recommended)
6. Custom key name: outside the vue instance, Vue.keycodes. custom name = key code
6. Interpolation syntax { {}}, method methods, computed attribute computed
1. When any data changes, the dom elements and the data or methods in the interpolation syntax (the precautions in the interpolation syntax must have parentheses) will be re-parsed
2. Computational properties will only trigger reparsing of calculated properties when the initial load and associated data change, because calculated properties can cache data
3. There are getter methods and setter methods in the calculated properties. When there are only getter methods and no setter methods, the calculated properties can be abbreviated, and the method name written in the interpolation syntax can be written without parentheses
computed:{
get:function handle(){
return this.a;
},
}
Shorthand:
computed:{
handle() {
return this.a;
},
}
7. Surveillance, in-depth surveillance, another way of writing, abbreviation
1. Monitoring: the callback method when the attributes in data or computed attributes change. If the immediate property is changed to true, the property will be monitored automatically every time the page is entered.
data:{
a:1,
},
watch:{
a:{
immediate：true,
handler(newValue,oldValue){
console.log("a has changed!")
}
}
}
2. In-depth monitoring: When the attribute is a nested object, monitoring the change of a certain attribute in the attribute is in-depth monitoring
like
data:{
a:{
b:2,
c:3,
}
}
//1. At this time, to monitor the callback after the change of b in the a property, add quotation marks to read the b value of the object a
watch:{
"a.b":{
handler(newValue,oldValue){
console.log("b of a has changed!")
}
}
}
//2. What if it is a callback to monitor changes in the a object (the address of the a object, that is, a={o:9})?
watch:{
a:{
immediate：true,
handler(newValue,oldValue){
console.log("a has changed!")
}
}
}
//3. What if it is a callback to monitor the change of any value in the a object? Answer: Change the deep attribute to a true value.
watch:{
a:{
deep：true,
handler(newValue,oldValue){
console.log("The certain value of a has changed!")
}
}
}
3. In-depth monitoring:
[1] The watch in Vue does not monitor the change of the internal value of the object by default (only monitors one layer)
[2] Add the deep attribute and change it to a true value, watch can detect the change of the internal value of the object (can detect the value in the multi-layer nested layer of the object)
[3] However, Vue itself can detect the change of multi-layer data inside the object, but the watch attribute provided by Vue does not allow it.
4. Monitoring and in-depth monitoring can also be written like this:
const vm=new Vue({
data:{
a:1,
}
});
vm.$watch(a,(
handle(newValue,oldValue){
console.log("a changed")
}
))
5. Shorthand for monitoring: When there are only handle callbacks and no other configuration items such as immediate and deep, monitoring can be monitored like getters
Shorthand 1:
watch:{
a(newValue,oldValue){
console.log("a has changed!")
}
}
Shorthand 2:
vm.$watch(a,function(newValue,oldValue){
console.log("a has changed!")
})
Eight, computed calculation properties and watch listening
1. What can be done by computed, watch can also be done. What can be done by watch may not be done by computed. For example, asynchronous functions can be written in watch, but not asynchronous functions in computed
Nine, when to use the arrow function
1. For non-Vue-managed functions (timer, Promise, axios and other callback functions), arrow functions are used in them, so that this used points to the vm Vue instance or component instance object.
2. All functions managed by Vue are best written as ordinary functions
10. Principles of Vue listening and watch listening
1. A glimpse of the leopard
[1] Objects without setter and getter methods are printed like this:
[2] The object with the added setter and getter methods is printed like this:
2. If you add a setter to the object itself, it will cause wireless recursion and memory overflow, so encapsulate a constructor similar to Observer to reproduce properties on another person and add setter and getter methods
[异常：RangeError: Maximum call stack size exceeded at Object.get [as name]
Scope error: The name attribute exceeds the maximum call stack size at Object.
3. Vue encapsulates a recursive query, which can find out the objects nested in multiple layers of objects, and add setter and getter methods for them, until the data that is not an object type, such as arrays, strings, numbers, Boolean, null , undefined and so on.
4. After adding setters and getters for all deeply nested objects, they will be copied to vm._data, and then the vm._data data will be proxied to the vm itself. The data on the vm can be obtained in real time by implementing the dom element on the Vue framework. Such as { {information.name}}.
11. From the principle of Vue listening, non-object attributes without setter and getter methods cannot be directly changed
Question one:
Click the button to add an attribute b to object a, and the page does not display the value of b. It is because Vue does not listen to the b attribute, and the b attribute does not have getter and setter operations.
After clicking, the data is not rendered:
2. Solution:
[1] Update the data of object a, because a has getters and setters: this.a={...}.
[2] Use the set method on Vue itself to add attributes: Vue.set(target,key,value) . For example: Vue.set(a,'b','You're really good!'). Or: this.$set(target,key,value) . Same effect.
[3] Note that it cannot be placed on the vm itself or the root directory, such as using the set method for vm._data.
Question two:
In the same way, what about directly adding or modifying arrays that are not setters and getters?
For example: put an array in the object, and the object in the array, but all objects have setters and getters, then the array in the middle layer has no setter and second getter, then, if you directly change the array, the page will not display the changed back-end information!
Solution:
[1] Use this.$set(persons,0,{id:"001},name:"Mr. Ma",age:50,sex:"Male")
[2] Operation array encapsulated with Vue: push() pop() shift() unshift() splice() sort() reserve()
<1> These methods essentially do two things: 1. Wrap the native methods on the Array prototype chain; 2. Re-parse the parsing template and update the page.
12. Common commands
1. v-bind syntactic sugar ——> " : "
2、v-model
3、v-if v-else-if v-else
4. v-on grammatical sugar ——> " @ "
5、v-show
6. v-click v-event, the command encounters the camel case name, change the uppercase to - as a connection symbol, for example: v-caps-lock
7. v-cloak, without adding attributes after it, means that when vue takes over the dom container, delete the original dom with v-cloak, which is used in js blocking scenarios, and used in combination with css styles: such as overflow: hidden;
8、v-once
9. No attribute is added after v-pre, the dom added with this instruction will not be parsed, the parsing will be skipped, and the following dom will be parsed
10. v-text does not parse tags
11. v-html can parse tags, which has potential security risks and is vulnerable to XSS attacks
Thirteen, custom instructions
Add configuration items to the vue instance (similar to data methods computed, etc.): directives:{}
Two forms: 1. Functional form, 2. Object form
element parameter: is the dom element bound by the custom instruction
Binding parameters: Custom instructions can bind attributes, such as <input v-fbind:value="name" type="text">
2. When a custom command encounters a defined name, it is named in camel case, and the command name is used to connect with -, for example, lookYou, when using it is:
v-look-you。
3. This in the directives configuration item points to window
4. Configure global commands:
Vue.directive("bind",{
properties in function or object form
})
Fourteen, mixin mixing
1. Create a mixed-in js file: mixin.js, put an object in it and export it, and put data, methods, mounted and other configuration items in it:
2. Then introduce the mixed file object in the component, such as: import {hunhe1,hunhe2} from './mixin.js'
3. Configure items through mixins
mixins:["hunhe1","hunhe2"]
15. Plug-ins
1. Create a js suffix file, create an object in it and export it,
2. Put the install(Vue, option) {} method in the object, and the parameter Vue means that the Vue constructor can be obtained in the method, and the method attributes on Vue can be used casually
3. You can write global configuration items in the install method:
[1] Global Vue.filter("The name of the filter to be called", {...filtering action})
[2] Custom global directive: Vue.directive("name", function(element, bingding){...})
[3] Global mix-in: Vue.mixin({...})
[4] Also available: Vue.prototype."Method or attribute name"=. . . .
[5] Introduce plugin files in main.js such as import plugin from './plugin.js' (add curly braces to the local output and the imported name is determined by the name of the local output, call out by default, without curly braces, the imported name can be customized definition), and then below Vue.use(plugin),
After the above operations, the custom global filters, global directives, global mixins, methods, and attributes can be used directly in dom elements in all components, and obtained under the vm instance: r such as: this.x //100.
16. Scaffolding relies on webpack
1. Obtain all version information of webpack:
npm view webpack versions
Seventeen, mapState mapGatters
Eighteen, mapMutations mapStations
3、namspaced:true