Preface
In the development process of front-end project based on the vue framework, as long as we involve slightly more complex business, we will use the computed computing attribute hook function, which can be used for some state processing and cache operations.
1. Basic use of computed
In computed, a function is declared and a return value needs to be provided for display on the page or processed in combination with other methods.
Use in combination with state status
Return a string that depends on name via changeName
<li>computedBasic use</li>
<li>namevalue：{{ name }}</li>
<li>{{ changeName }}</li>
data() {
return {
name: "zhangsan",
};
},
computed: {
changeName: function () {
return `A period of dependence onname：${}Text`;
},
},Use other component state
Actively trigger the computed method, compare the differences in other states, and actively trigger some operations through click events.
<li>{{ isCache }}</li>
<li>{{ cacheTip }}</li>
<li>{{ changeCache }}</li>
<li><button @click="handleChange">Modify text</button></li>
data() {
return {
cacheTip: "cacheTip original value",
};
},
computed: {
isCache: function () {
return `A piece of text that does not depend on any attribute value`;
},
changeCache: function () {
return `Depend oncacheTip，${}`;
},
},
methods: {
handleChange() {
= "cacheTip status has been modified";
},
},When we click to modify the status, we can see that cacheTip is modified and the changeCache that depends on cacheTip will also change.
Because isCache is not associated with other states, it still keeps the original value unchanged.
getter VS setter
The cacheTip or isCache above, in the computed general method, the getter method is used by default to obtain the processed value.
Can be written as:
isCache: {
setter:function () {
return `A piece of text that does not depend on any attribute value`;
}
}Through getters and setters, the state that needs to be processed can be further processed
<li>{{ firstName }}</li>
<li>{{ lastName }}</li>
<li>{{ setterGetter }}</li>
<li><button @click="handleChangeFirst">Modify text</button></li>
data() {
return {
firstName: "lewyon001",
lastName: "Buo 001",
};
},
computed: {
setterGetter: {
// getter
get: function (newValue) {
("newValue", newValue);
return + " " + ;
},
// setter
set: function (newValue) {
("newValue", newValue);
= `${}`;
= `${}`;
},
},
}
methods: {
handleChangeFirst() {
= { firstName: "lewyon", lastName: "Buo" };
},
},- The get attribute can obtain the most primitive dependency value and process it.
- The set method can obtain the modified dependency value, display it on the page after modification or perform other business-required processing
The basics of the computered method include advanced operations, as well as setter and getter methods as above
Recommended usage:
As a common method:
- Computed can be used as a cache that depends on other states, including some infrequently updated content to reduce overhead
- Simple string templates combined with other states
- There are other scenarios in development, which we can use in combination with watch, etc.
2. Basic use of watch
As the name suggests, watch is a hook function in the version that monitors and observes component state changes. Common application scenarios include monitoring routing changes, and changes in props data passed by the parent component to the child component, etc.
When using watch, you need to live a state in data and add it to watch for observation. When changes occur, watch can obtain the latest value changes through default parameters
<li>namevalue：{{ name }}</li>
<li>{{ nameTip }}</li>
<li>Obtained through asynchronous operationsage：{{ age }}</li>
<li><button @click="getUser">Modify the name</button></li>
let p1 = new Promise((resolve, reject) => {
resolve({ age: "14" });
});
data() {
return {
name: "zhangsan",
nameTip: "name not changed",
};
},
watch: {
name(newVal, oldVal) {
// Watch can listen to some state changes, do some processing, modify state, or asynchronous operations when some state changes, = "The name state has changed";
();
},
},
methods: {
getData() {
setTimeout(() => {
();
}, 1000);
},
getUser() {
= "lisi";
},
getAge() {
((res) => {
(res);
= ;
});
},
},When clicking to modify, the value of name will be modified to lisi. After the watch monitors the name modification, you can modify the text of nameTip and start to modify other states.
We can also use newVal to get the latest value of name, or the oldVal value for some comparison and operations
Use promises and timers to simulate when the state changes, request background data and render it. This is a typical example of our use of watch during development.
immediate and deep
immediate: When the watch is loaded for the first time or bound for the first time, it needs to listen to and obtain the status in the data. Then you can use immediate, set to true, and the property value is a boolean value.
deep: When the value of watch monitor is an object, you can use this property to monitor the deep property changes of the object.
Notes:
Deep is false by default. When using it, you need to add deep:true, deep and immediate values are the same as boolean values.
Example
<li>{{ immediateNameTip }}</li>
data() {
return {
immediateName: "immediateName original value",
immediateNameTip: "And prompt text when immediateName is changed",
};
},
immediateName: {
handler(newVal, oldVal) {
("immediate means that the initial listening is worthwhile, and this code is also executed");
setTimeout(() => {
=
"immediateName adds immediate, the first binding will also be executed";
}, 2000);
},
immediate: true,
deep: true, // Only for deep attribute changes of objects},When immediate is set to true, the first time I come in and the immediateNameTip will change after the timer is executed.
deep will not give examples here, you can use and learn in actual combat.
Recommended use;
Watch can be used as a monitoring route change and obtaining data in an asynchronous manner. At the same time, there are many application scenarios for monitoring in some states with relatively high overhead, as well as the implementation of shopping cart function and other scenarios.
This is the article about the detailed explanation of the use of computed and watch based on computed. For more related vue computed and watch content, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!