1 Monitoring properties
1.1 Weather case
code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>1.天气案例</title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!-- 准备一个容器 -->
<div id="root">
<h2>今天天气很{
{info}}</h2>
<button @click="isHot = !isHot">切换天气</button>
</div>
<script>
// 设置为 false 以阻止 vue 在启动时生成生产提示。
Vue.config.productionTip = false;
const vm = new Vue({
el: '#root',
data(){
return{
isHot: true,
}
},
computed: {
info(){
return this.isHot ? '炎热' : '凉爽';
}
},
methods:{
}
})
</script>
</body>
</html>
1.2 Weather Case_Monitoring Properties
The first way of writing
watch:{
isHot:{
// 初始化时让handler调用一下
immediate: true,
// 当isHot发生改变的时候就调用handler
handler(newValue, oldValue){
console.log('isHot修改了');
console.log(newValue, oldValue);
}
}
}
![[External link image transfer failed. The source site may have an anti-leeching mechanism. It is recommended to save the image and upload it directly (img-VatvSKYM-1691025413012) (C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\ image-20230802223602776.png)]](https://img-blog.csdnimg.cn/3ef3b1d99fda445cb775b53b29ac6cb4.png)
The second way of writing: write the following code outside the vm instance
vm.$watch('isHot', {
// 初始化时让handler调用一下
immediate: true,
// 当isHot发生改变的时候就调用handler
handler(newValue, oldValue){
console.log('isHot修改了');
console.log(newValue, oldValue);
}
})
Complete code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>2.天气案例_监视属性</title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!-- 准备一个容器 -->
<div id="root">
<h2>今天天气很{
{info}}</h2>
<button @click="changeWeather">切换天气</button>
</div>
<script>
// 设置为 false 以阻止 vue 在启动时生成生产提示。
Vue.config.productionTip = false;
const vm = new Vue({
el: '#root',
data(){
return{
isHot: true,
}
},
computed: {
info(){
return this.isHot ? '炎热' : '凉爽';
}
},
methods:{
changeWeather(){
this.isHot = !this.isHot;
}
},
watch:{
isHot:{
// 初始化时让handler调用一下
immediate: true,
// 当isHot发生改变的时候就调用handler
handler(newValue, oldValue){
console.log('isHot修改了');
console.log(newValue, oldValue);
}
}
}
})
// vm.$watch('isHot', {
// // 初始化时让handler调用一下
// immediate: true,
// // 当isHot发生改变的时候就调用handler
// handler(newValue, oldValue){
// console.log('isHot修改了');
// console.log(newValue, oldValue);
// }
// })
</script>
</body>
</html>
Notice:
- When the monitored property changes, the callback function
handleris automatically called to perform related operations.- The monitored property must exist for monitoring to occur
- Two ways of writing monitoring:
- Pass in the watch configuration when new Vue
- Monitor via vm.$watch
1.3 Deep monitoring
need
There is an array that requires changes to be monitored numbers:{a:1,b:1}whether it is aa change or a change .bnumbers
When clicking a+1and b+1respectively, you can see that it is printed twice on the console, indicating that no matter whether it is aa change or ba change, the change is monitored numbers.
![[External link image transfer failed. The source site may have an anti-leeching mechanism. It is recommended to save the image and upload it directly (img-fzqM57JD-1691025413013) (C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\ image-20230802230607080.png)]](https://img-blog.csdnimg.cn/4e693b6c96b24fa095291fcdc0949d33.png)
code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>3.天气案例_深度监视</title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!-- 准备一个容器 -->
<div id="root">
<h2>今天天气很{
{info}}</h2>
<button @click="changeWeather">切换天气</button>
<hr/>
<h3>a的值是{
{numbers.a}}</h3>
<button @click="numbers.a++">点我让a+1</button>
<hr/>
<h3>b的值是{
{numbers.b}}</h3>
<button @click="numbers.b++">点我让b+1</button>
</div>
<script>
// 设置为 false 以阻止 vue 在启动时生成生产提示。
Vue.config.productionTip = false;
const vm = new Vue({
el: '#root',
data(){
return{
isHot: true,
numbers:{
a:1,
b:1
}
}
},
computed: {
info(){
return this.isHot ? '炎热' : '凉爽';
}
},
methods:{
changeWeather(){
this.isHot = !this.isHot;
}
},
watch:{
isHot:{
handler(newValue, oldValue){
console.log('isHot修改了');
console.log(newValue, oldValue);
}
},
// 监视多级结构中某个属性的变化
// 'numbers.a':{
// handler() {
// console.log('a改变了');
// }
// },
// 监视多级结构中所有属性的变化
// 需求，只要numbers中的任何一个数据，不管是a,b改变都要监视到
numbers: {
deep: true,
handler() {
console.log("numbers改变了");
}
}
}
})
</script>
</body>
</html>
Notice:
- deep surveillance
- By default, watch in Vue does not monitor changes in the internal value of the object (one layer)
- Configuring deep:true can monitor changes in the internal value of the object (multiple layers)
- Remark
- Vue itself can monitor changes in the internal values of objects
- When using watch, decide whether to perform in-depth monitoring based on the specific structure of the data.
1.4 Abbreviation of monitoring attributes
code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>4.监视属性简写</title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!-- 准备一个容器 -->
<div id="root">
<h2>今天天气很{
{info}}</h2>
<button @click="changeWeather">切换天气</button>
</div>
<script>
// 设置为 false 以阻止 vue 在启动时生成生产提示。
Vue.config.productionTip = false;
const vm = new Vue({
el: '#root',
data(){
return{
isHot: true,
}
},
computed: {
info(){
return this.isHot ? '炎热' : '凉爽';
}
},
methods:{
changeWeather(){
this.isHot = !this.isHot;
}
},
watch:{
// 正常写法
// isHot:{
// handler(newValue, oldValue){
// console.log('isHot修改了');
// console.log(newValue, oldValue);
// }
// },
// 简写
isHot(newValue, oldValue){
console.log(newValue, oldValue);
}
}
})
</script>
</body>
</html>
result
After abbreviation, normal results can still be achieved.
[External link image transfer failed. The source site may have an anti-leeching mechanism. It is recommended to save the image and upload it directly (img-hrlYsikm-1691025413014) (C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\ image-20230802230933997.png)]
Notice:
- When your configuration item is only used
handler, you can abbreviate it