1. Calculate properties
definition
- Computed attributes: The attribute to be used does not exist, it must be calculated through existing attributes. Computed attributes must have a brand new configuration item computed
- For Vue, the data in data is a property. As long as the data in Vue changes, the template will be re-parsed. When encountering the method in the interpolation syntax, it will be called again.
principle
- The underlying layer uses the getters and setters provided by the method.
When will the get function be executed?
- It will be executed once on the first read.
- It will be called again when the dependent data changes.
Advantages
- Compared with the method implementation, there is an internal cache mechanism (reuse), which is more efficient and easy to debug.
Remark
- The computed attribute will eventually appear on vm (Vue instance), and can be read and used directly.
- If the calculation attribute is to be modified, the set function must be written to respond to the modification, and the data dependent on during calculation will change in the set.
Syntax: 1. Abbreviation method:
computed: {
"Computing attribute name" () {
return "value"
}
}
Requirements: Find the sum of 2 numbers to display on the page
<template>
<div>
<p>{{ num }}</p>
</div>
</template>
<script>
export default {
data(){
return {
a: 10,
b: 20
}
},
// Calculate properties: // Scenario: The value of a variable needs to be calculated using another variable /*
grammar:
computed: {
Computed attribute name () {
return value
}
}
*/
// Note: Computed attributes and data attributes are both variables - they cannot be renamed // Note 2: When variables in the function change, the result will be automatically recalculated and returned computed: {
num(){
return +
}
}
}
</script>
<style>
</style>
Syntax: 2. Complete writing method:
Computation attributes are written into the format of configuration objects: use get and set functions in the object
The function of get: When someone reads the fullName, get will be called, and the return value is used as the value of the calculated attribute (get must write a return)
When will get be called? 1. When you first read the fullName. 2. When the data you depend on changes.
get(){
('get was called')
// (this) // This here is vm (Vue instance) return + '-' +
},
set: Called when the value of the calculated attribute is modified. The formal parameter receives the new value passed in.
...
computed:{
fullName:{
//What is the function of get? When someone reads fullName, get will be called and the return value is used as the value of fullName //When will get call? 1. When you first read the fullName. 2. When the data you depend on changes. get(){
('get was called')
// (this) // This here is vm return + '-' +
},
//When is set called? When fullName is modified. set(value){
('set',value)
const arr = ('-')
= arr[0]
= arr[1]
}
}
}
})
2. Monitoring (listening) attributes
<!-- When binding events：@xxx="yyy" yyyYou can write some simple sentences --> <button @click="isHot = !isHot">Switch weather</button>
1. Monitoring attribute watch:
When the monitored attribute changes, the handler callback function is automatically called to perform related operations
The monitoring attribute must exist before monitoring can be performed! !
...
// Writing method 1. Pass in the watch configuration and listen for ishot attribute
watch:{
isHot:{
immediate:true, //Let the handler call during initialization
//When will the handler be called? When isHot changes.
handler(newValue,oldValue){
('isHot has been modified',newValue,oldValue)
}
}
}
})
// Writing method 2. Monitor through vm.$watchvm.$watch('isHot',{
immediate:true, //Let the handler call during initialization, the default is false //When will the handler be called? When isHot changes. handler(newValue,oldValue){ // There are two parameters, one is the new value and the other is the old value ('isHot has been modified',newValue,oldValue)
}
})
2. In-depth monitoring
In-depth monitoring:
- 1) The watch in Vue does not monitor changes in the internal value of the object by default (one layer).
- 2) Configure deep:true to monitor the internal value changes of the object (multiple layers).
Remark:
- 1) Vue itself can monitor changes in the internal value of the object, but the watch provided by Vue cannot be by default!
- 2) When using watch, decide whether to use deep monitoring based on the specific structure of the data.
data:{
isHot:true,
numbers:{
a:1,
b:1
}
},
watch:{
// Monitor the changes of a certain attribute in a multi-level structure (the original writing method is to add quotation marks, and the abbreviation may not be added, but in this case, otherwise an error will be reported) /* '':{
handler(){
('a has been changed')
}
} */
// Monitor changes in all attributes in multi-level structure numbers:{
deep:true, // If this is not enabled, then the monitoring is whether the address of numbers has changed. handler(){
('numbers changed')
}
}
}
Monitoring properties - abbreviation
Can only be abbreviated when only handler() is in the monitoring attribute and no other configuration items are required to be enabled
watch:{
isHot(newValue,oldValue){
('isHot has been modified',newValue,oldValue,this)
}
}
/* vm.$watch('isHot',function (newValue,oldValue) {
('isHot has been modified',newValue,oldValue, this)
}) */
3. Differences and Principles
Difference between computered and watch
- All functions that can be completed by computerized can be completed by watch.
- Computed functions that can be completed by watch may not be completed, for example: watch can perform asynchronous operations.
Two important small principles
- All functions managed by Vue are best written as ordinary functions, so that this pointer is vm or component instance objects.
- All functions that are not managed by Vue (timer callback functions, ajax callback functions, etc., Promise callback functions) should be written as arrow functions, so that this pointing is vm or component instance objects.
watch:{
firstName(val){
setTimeout(()=>{
(this) // vue instance object, if using normal function, return to Window = val + '-' +
},1000);
},
lastName(val){
= + '-' + val
}
}
Summarize
This is the end of this article about computed attributes and attribute listening in Vue. For more related content on computed attributes and attribute listening, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!