In vue, watch is used to monitor whether the data in the data has been modified. Once modified, it can perform some other operations. Watch is a general method provided internally by Vue for listening functions. It can respond to data changes and drive some operations through specific data changes.
The operating environment of this tutorial: windows7 system, vue3 version, DELL G3 computer.
What is watch used for?
Vue provides a more general method to respond to data changes through the watch option. This approach is most useful when you need to perform asynchronous or expensive operations when data changes.
What is watch?
An object, the key is the expression to be observed, and the value is the corresponding callback function. The value can also be a method name, or an object containing options. The Vue instance will call $watch() when instantiated, traversing each property of the watch object. Document transmission
Example:
<template>
<el-card class="box-card"><el-input v-model="name" style="width: 30%;"></el-input></el-card>
</template>
<script>
export default {
data() {
return {
name: '123'
};
}
};
</script>
<style></style>
##How to use watch
First: Conventional usage
(1) Treat the name value to be monitored as the method name to monitor. [First way of writing]<template>
<el-card class="box-card"><el-input v-model="name" style="width: 30%;"></el-input></el-card>
</template>
<script>
export default {
data() {
return {
name: '123'
};
},
watch: {
name(newVal, oldVal) {
console.log('newVal', newVal);// 1234
console.log('oldVal', oldVal);// 123
}
}
};
</script>
<style></style>
<template>
<el-card class="box-card"><el-input v-model="name" style="width: 30%;"></el-input></el-card>
</template>
<script>
export default {
data() {
return {
name: '123'
};
},
watch: {
name:{
handler(newVal,oldVal){
console.log('newVal',newVal); // 1234
console.log('oldVal',oldVal); // 123
}
}
}
};
</script>
<style></style>The above two ways of writing are common usages of watch listeners. This usage has a characteristic that when the value is bound for the first time, the monitoring will not be executed. Functions are executed only when the value changes. If we need to execute the listening function when the value is initially bound, we need to use the immediate attribute. Next, let’s talk about more advanced usage.
Second: Advanced usage
For example, when the parent component dynamically transfers values to the child component, the child component props are first obtained from the parent component. When the default value is used, the function also needs to be executed. In this case, the immediate attribute needs to be set to true and used in combination with the handler method. When the immediate attribute is set to true, it will listen at all times regardless of whether the value changes; When the immediate attribute is set to false, in normal usage, it will listen only when the value changes.<template>
<el-card class="box-card"><el-input v-model="name" style="width: 30%;"></el-input></el-card>
</template>
<script>
export default {
data() {
return {
name: '123'
};
},
watch: {
name: {
handler(newVal, oldVal) {
console.log('newVal', newVal);
console.log('oldVal', oldVal);
},
immediate: true
}
}
};
</script>
<style></style>The third type : Super advanced usage (deep deep monitoring)
(1) The above two methods can be used to monitor changes in ordinary variables, but when the variable value is to be monitored as an object, it will not work. For example, we cannot monitor changes in the internal properties of the form object.
<template>
<el-card class="box-card"><el-input v-model="form.name" style="width: 30%;"></el-input></el-card>
</template>
<script>
export default {
data() {
return {
form: {
name: '123'
}
};
},
watch: {
form: {
handler(newVal, oldVal) {
console.log('newVal', newVal);
console.log('oldVal', oldVal);
}
}
}
};
</script>
<style></style>
<template>
<el-card class="box-card"><el-input v-model="form.name" style="width: 30%;"></el-input></el-card>
</template>
<script>
export default {
data() {
return {
form: {
name: '123'
}
};
},
watch: {
form: {
handler(newVal, oldVal) {
console.log('newVal', newVal);
console.log('oldVal', oldVal);
},
deep: true
}
}
};
</script>
<style></style>Set deep: true to monitor changes in the form. If the form has more attributes, all attributes of the form will be added. This listener will execute the handler every time the attribute value changes. When the deep attribute value is true, you can monitor changes within the object's attributes; When the deep attribute value is false, you cannot monitor it.(2) If we only need to monitor a certain attribute value in the object, we can use:
string form to monitor the object attribute ,
this During the monitoring process, you do not need to use deep to monitor in depth, you can monitor changes in a certain attribute in the object.
<template>
<el-card class="box-card"><el-input v-model="form.name" style="width: 30%;"></el-input></el-card>
</template>
<script>
export default {
data() {
return {
form: {
name: '123'
}
};
},
watch: {
'form.name': {
handler(newVal, oldVal) {
console.log('newVal', newVal);
console.log('oldVal', oldVal);
}
}
}
};
</script>
<style></style>The fourth type: expansion (monitoring array)
(1) (one-dimensional, multi-dimensional) array changes are not Need deep monitoring
<template>
<el-card class="box-card"><el-input v-model="name" @input="inputFn" style="width: 30%;"></el-input></el-card>
</template>
<script>
export default {
data() {
return {
name: '123',
arr1: [1, 2, 3],
arr2: [1, 2, 3, [4, 5]]
};
},
watch: {
arr1(newVal, oldVal) {
console.log('newVal1', newVal);
console.log('oldVal1', oldVal);
},
arr2(newVal, oldVal) {
console.log('newVal2', newVal);
console.log('oldVal2', oldVal);
}
},
methods: {
inputFn(e) {
this.arr1.push(e);
this.arr2.push(e);
}
}
};
</script>
<style></style>（2）数组对象中对象属性变化监测需要使用deep:true深度监听，多少层内产生变化都可以监测到。
<template>
<el-card class="box-card"><el-input v-model="name" @input="inputFn" style="width: 30%;"></el-input></el-card>
</template>
<script>
export default {
data() {
return {
name: '123',
arr1: [
{
id: 1,
sex: 11
}
],
arr2: [
{
id: 2,
sex: 22,
list: [
{
id: 3,
sex: 33
}
]
}
]
};
},
watch: {
arr1: {
handler(newVal, oldVal) {
console.log('newVal1', newVal);
console.log('oldVal1', oldVal);
},
deep: true
},
arr2: {
handler(newVal, oldVal) {
console.log('newVal2', newVal);
console.log('oldVal2', oldVal);
},
deep: true
}
},
methods: {
inputFn(e) {
this.arr1[0].sex = e;
this.arr2[0].list[0].sex = e;
}
}
};
</script>
<style></style>
The above is the detailed content of What does vue's watch do?. For more information, please follow other related articles on the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
