How to implement watch to automatically detect data changes in vue

This article mainly introduces the method of vue watch automatically detecting data changes and rendering in real time. Now I share it with you and give it as a reference.

This article introduces the method of vue watch automatically detecting data changes and rendering in real time, and shares it with everyone. The details are as follows:

First confirm that watch is an object and must be used as an object.

Objects have keys and values.

Key: It is the guy you want to monitor, such as $route, this is to monitor routing changes. Or a variable in data.
The value can be a function: it is the function that needs to be executed when the guy you are monitoring changes. This function has two formal parameters, the first is the current value, and the second is the changed value.

The value can also be a function name: but this function name must be wrapped in single quotes.

The third situation is terrible.

The value is an object containing options: there are three options.

1. The first handler: its value is a callback function. That is, the function that should be executed when changes are detected.

2. The second one is deep: its value is true or false; confirm whether to monitor in depth. (Generally, changes in object attribute values ​​cannot be monitored during monitoring, but changes in array values ​​can be heard.)

3. The third is immediate: its value is true or false; confirm Whether to execute the handler function with the current initial value.

watch instance

Last time I mentioned that you can use this.$set or vm.set to dynamically change it, and it has been rendered. Data on the page (added, deleted) is recalculated and re-rendered.

Sometimes you will need to dynamically change a certain data or value, and then perform other processing operations (such as: display, hide, add, delete) based on the value you changed, such as the following code Example:

Here is an example of Tab:

Create a new Tab component page in the vue project

<template>
{{index}}
 <p>
   <p @click="showFun(0)">Tab1</p>
   <p @click="showFun(1)">Tab2</p>
   <p @click="showFun(2)">Tab3</p>
 </p>
 <p>
   <p v-if="index == 0">cont1</p>
   <p v-if="index == 1">cont1</p>
   <p v-if="index == 2">cont1</p>
 </p>
</template>
<script>
export default {
 data(){
  return {
    index: 0 // 索引
  }
 },
watch:{ // 实时检测
  index(idx){ //实时监听index的变化
    console.log(idx) //在这里你可以再根据idx的值，做出其它的操作
  }
},
 methods:{
   showFun(idx){
     this.index = idx
   }
 }
}
</script>

watch allows you to customize a listener, This method is the most useful when you need to perform asynchronous or expensive operations when the data changes.

Let me give you another search example:

<template>
 <input v-model="value" /> // 搜索框
</template>
<script>
export default {
 data(){
  return {
    value: &#39;&#39; // 值
  }
 },
 watch:{
   value(val){ // 实时监听数据变化
     this.wat_fun(val)
   }
 }， 
 methods:{
   wat_fun(val){ // 这里可以调用搜索api接口
    console.log(val)
   }
 }
}
</script>

The above is what I compiled for everyone. , I hope it will be helpful to everyone in the future.

Related articles:

How to implement the image cropping and uploading function of vue through js in cropper

How to use cropperjs in vue Method (detailed tutorial)

Implement a series of functions such as local preview, cropping, compression and upload of images in vue.js

Detailed explanation of FastClick source code ( Detailed tutorial)

How to implement table content paging using vue and element-ui

The above is the detailed content of How to implement watch to automatically detect data changes in vue. For more information, please follow other related articles on the PHP Chinese website!