I. Use of Watch in Vue

1. What is watch?

Watch is a method provided in VUE, which is used to observe data changes and monitor data. It can also be said that watch is an object, which can be used as an object. If it is an object, it has keys and values.

• Key: is the target to listen on, which can be a variable in data.

• The value can be a function: a function that needs to be executed when the variable you are listening to changes. This function takes two parameters, the first is the current value and the second is the updated value.

• The value can be a function name: however, the function name is enclosed in single quotes.

• The value can be an object in the options: there are three options.

  • The first handler: its value is a callback function. That is, the function that should be executed when changes are heard.
  • The second is deep: the value is true or false; Make sure you’re listening in. (usually used to listen for values in an object)
  • The third is immediate: the value is true or false. Verify that the handler function is executed with the current initial value.

2. Use of Watch

(1) Use watch to monitor a common variable

<div class="app">
    <div>
    	<p>Watch method use</p>
    	<input v-model="data"/>
    </div>
</div>
<script>
var vm = new Vue({
    el: '.app'.data: {
    	data: '111'.obj: {
    	    arr: [{value: ' '}].data: ' '}},watch: {
    	data(newVal, oldVal) {
    	    console.log(newVal, oldVal) 
    	}
    },
});
</script>
Copy the code

The result looks like this:

(2) Use watch to monitor an object

<script>
var vm = new Vue({
    el: '.app'.data: {
    	data: '111'.obj: {
            arr: [{value: ' '}].data: ' '}},watch: {
    	data(newVal, oldVal) {
    	    console.log(newVal, oldVal)
    	},
    	'obj': {
            deep: true,
            handler (newVal, oldVal) {
                console.log(newVal)
            }					
    	}
    },
    methods: {
    	addInput () {
    	    this.obj.arr.push({value: '111'}}}}));Copy the code

The results are as follows:

Second, the use of vUE set method

In the recent project, I encountered such a problem that when I used Watch to monitor objects, the changes of the array in the object could not be rendered to the page in real time, which was also stuck for a long time. Finally, I solved such a problem by using the set method. Now I will summarize my understanding of the set method.

1. The significance of the existence of set method

Due to javaScript limitations, Vue cannot detect the following altered arrays

• When you set an item directly using an index, VUE does not automatically update it for us. For example, vm.items[indexOfItem] = newValue
• When you change the length of the array, vUE does not automatically update it for us. Vm.items. Length = newLength, the array is not updated.
• Note: The object cannot be a VUE instance, or the root data object in the VUE instance.

In order to solve the above problems, set method can play its role

2, set method simple use

vue.set(target,key,value)

• Parameter Settings:

  • Target: to change the target data {Object | Array}
  • Key: the data of which item {String | Number}
  • Value: Changed data {any}

• The return value:

  • Set the value of the

• Usage:

  Sets the properties of the object and triggers view updates. This method is mainly used to get around the limitation that vUE cannot detect when attributes are added.

< div class = "app" > < div > < p > set method using < / p > < ul > < li v - for = "(item, index) in arr">{{item}}</li> </ul> </div> </div> <script> var vm = new Vue({ el: '.app', data: { arr: ['aaa', 'bbb', 'ccc'] } }); vm.arr[1] = 'ddd' console.log(vm.arr) // ['aaa','ddd','ccc']Copy the code

Running results:

(Interface display)

<script>
    var vm = new Vue({
    	el: '.app'.data: {
    	    arr: ['aaa'.'bbb'.'ccc']}}); Vue.set(vm.arr,1.'ddd')
    console.log(vm.arr) // ['aaa','ddd','ccc']
Copy the code

Running results:

(Interface display)