Home > Article > Web Front-end > What does vue's watch do?
What does vue's watch do?
- 青灯夜游Original
- 2022-11-30 20:29:513593browse
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><el-input></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><el-input></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><el-input></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>Immediate execution:
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><el-input></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><el-input></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><el-input></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><el-input></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><el-input></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!
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：What to do if jquery ajax reports error 403Next article：What to do if jquery ajax reports error 403
Related articles
See more- Let's talk about how to implement two-way data binding in Vue
- Teach you how to easily make a snake game using Vue (with demo code)
- An article explaining in detail how to use JSX in vue3
- What is syntactic sugar? How to use syntax sugar in Vue3.2?
- How does vue determine whether an element is in the visible area?