1. Monitoring attribute watch
1. When the monitored attribute changes, the callback function is automatically called to perform related operations.
2. The monitoring attribute must exist before monitoring can be performed.
3. Two ways to write monitoring
(1) Input watch configuration when new Vue
(2) Monitoring through vm.$watch
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Weather cases_Monitoring properties</title>
<!-- IntroducedVue -->
<script type="text/javascript" src="../js/"></script>
</head>
<body>
<!--
Monitoring propertieswatch：
1.When the monitored attribute changes, Callback function automatically called, Perform related operations
2.The monitored attribute must exist，Only monitor！！
3.Two ways to write monitoring：
(1).new VueIncoming timewatchConfiguration
(2).passvm.$watchMonitoring
-->
<!-- Get a container ready-->
<div >
<h2>The weather is very good today{{info}}</h2>
<button @click="changeWeather">Switch weather</button>
</div>
</body>
<script type="text/javascript">
= false //Block vue from generating production prompts at startup.
const vm = new Vue({
el:'#root',
data:{
isHot:true,
},
computed:{
info(){
return ? 'Hot' : 'cool'
}
},
methods: {
changeWeather(){
= !
}
},
/* 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)
}
}
} */
})
vm.$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)
}
})
</script>
</html>2. In-depth monitoring
The watch in the default view does not monitor the change of the internal value of the object (level one)
2. Configure deep:true to monitor changes in the internal value of the object (multiple layers)
Remark:
- vue itself can monitor changes in the internal value of the object, but the watch provided by vue cannot be by default
- When using watch, decide whether to use deep monitoring based on the specific structure of the data.
Weather case:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Weather cases_In-depth monitoring</title>
<!-- IntroducedVue -->
<script type="text/javascript" src="../js/"></script>
</head>
<body>
<!--
In-depth monitoring：
(1).VueIn-housewatchThe object's internal value changes are not monitored by default（layer）。
(2).Configurationdeep:trueCan monitor internal value changes of the object（Multi-layer）。
Remark：
(1).VueIt can monitor changes in the internal value of the object，butVueProvidedwatchNo default！
(2).usewatchAccording to the specific structure of the data，决定是否采用In-depth monitoring。
-->
<!-- Get a container ready-->
<div >
<h2>The weather is very good today{{info}}</h2>
<button @click="changeWeather">Switch weather</button>
<hr/>
<h3>aThe value is:{{}}</h3>
<button @click="++">Click me to leta+1</button>
<h3>bThe value is:{{}}</h3>
<button @click="++">Click me to letb+1</button>
<button @click="numbers = {a:666,b:888}">Completely replacenumbers</button>
{{}}
</div>
</body>
<script type="text/javascript">
= false //Block vue from generating production prompts at startup.
const vm = new Vue({
el:'#root',
data:{
isHot:true,
numbers:{
a:1,
b:1,
c:{
d:{
e:100
}
}
}
},
computed:{
info(){
return ? 'Hot' : 'cool'
}
},
methods: {
changeWeather(){
= !
}
},
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)
}
},
// Monitor the changes of a property in a multi-level structure /* '':{
handler(){
('a has been changed')
}
} */
// Monitor changes in all attributes in multi-level structure numbers:{
deep:true,
handler(){
('numbers changed')
}
}
}
})
</script>
</html>3. Abbreviation of monitoring attributes
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Weather cases_Monitoring properties_Abbreviation</title>
<!-- IntroducedVue -->
<script type="text/javascript" src="../js/"></script>
</head>
<body>
<!-- Get a container ready-->
<div >
<h2>The weather is very good today{{info}}</h2>
<button @click="changeWeather">Switch weather</button>
</div>
</body>
<script type="text/javascript">
= false //Block vue from generating production prompts at startup.
const vm = new Vue({
el:'#root',
data:{
isHot:true,
},
computed:{
info(){
return ? 'Hot' : 'cool'
}
},
methods: {
changeWeather(){
= !
}
},
watch:{
//Normal writing /* isHot:{
// immediate:true, //Let the handler call during initialization
// deep:true,//deep monitoring
handler(newValue,oldValue){
('isHot has been modified',newValue,oldValue)
}
}, */
//Abbreviation /* isHot(newValue,oldValue){
('isHot has been modified',newValue,oldValue, this)
} */
}
})
//Normal writing /* vm.$watch('isHot',{
immediate:true, //Let the handler call during initialization
deep:true,//Deep monitoring
handler(newValue,oldValue){
('isHot has been modified',newValue,oldValue)
}
}) */
//Abbreviation /* vm.$watch('isHot',(newValue,oldValue)=>{
('isHot has been modified',newValue,oldValue, this)
}) */
</script>
</html>This is the end of this article about the watch monitoring attributes in Vue. For more related watch monitoring attributes in Vue, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!