Vue watch automatically detects data changes in real-time rendering method, vuewatch
This article describes how vue watch automatically detects data changes in real-time rendering:
First, make sure that watch is an object and must be used as an object.
The object has a key and a value.
Key: the guy you want to monitor, for example, $ route. This is to monitor route changes. Or a variable in data.
The value can be a function: it is the function to be executed when the guy you monitor changes. This function has two parameters: the first is the current value, and the second is the changed value.
The value can also be a function name. However, this function name must be enclosed in single quotes.
The third case is amazing.
The value is an object that includes options: There are three options.
- The first handler: its value is a callback function. That is, the function to be executed when listening for changes.
- The second is deep: The value is true or false; check whether the listener is listened in depth. (The attribute value of the object cannot be monitored during the listener, and the value of the array can be heard .)
- The third is immediate: The value is true or false; check whether the handler function is executed with the current initial value.
Watch instance
You can use this. $ set or vm. set to dynamically change the data that has been rendered on the page (add, delete) and re-render the data.
Sometimes you need to dynamically change a data or value, and then perform other processing operations (such as display, hide, add, or delete) based on the value you change, the following code is used as an example:
Here is an example of a Tab:
Create a Tab component page in the vue Project
<Template >{{ index }}< div> <div @ click = "showFun (0)"> Tab1 </div> <div @ click = "showFun (1) "> Tab2 </div> <div @ click =" showFun (2) "> Tab3 </div> <div v-if =" index = 0 "> cont1 </div> <div v-if =" index = 1 "> cont1 </div> <div v-if =" index = 2 "> cont1 </div> </template> <script> export default {data () {return {index: 0 // index }}, watch: {// real-time index detection (idx) {// monitors index changes in real time. console. log (idx) // here you can perform other operations based on the idx value }}, methods: {showFun (idx) {this. index = idx }}</script>
Watch allows you to customize a listener. This method is most useful when you need to perform asynchronous or overhead operations when data changes
Let me take another search example:
<Template> <input v-model = "value"/> // search box </template> <script> export default {data () {return {value: ''// value }}, watch: {value (val) {// monitors data changes in real time this. wat_fun (val) }}, methods: {wat_fun (val) {// you can call the console of the search api here. log (val) }}</script>
Here are two simple examples to help you ~ We also hope that you can support the customer's home.