What is the attribute of watch in vue?

watch is a monitoring attribute. In Vue, you can monitor the change of a certain attribute through the watch attribute. When this attribute changes, you can perform some operations: 1. When the attribute monitored by the monitored attribute changes, the callback function will be automatically called, and Perform related operations; 2. Monitoring attributes The monitored attributes must exist to be effective. There are two ways to write monitoring properties: "new Vue({watch:{}})" and "vue instantiated object.$watch('property name' callback function)".

The operating environment of this tutorial: windows7 system, vue3 version, DELL G3 computer.

vue monitor properties

During development, we will encounter a situation where we need to perform some operations when a property changes. The properties that detect this change are called monitoring properties in Vue.

1. What is the monitoring attribute?

In vue, we can monitor the change of a certain attribute through the watch attribute. When this attribute When a change occurs, there are a few things we can do.

• When the property monitored by the monitoring property changes, the callback function (handler) will be automatically called and relevant operations will be performed.
• The property monitored by the monitoring property must exist , can it have an effect.

We use a weather case to explain what monitoring attributes are:

First the html code:

    <div id="app">
        <p>今天天气很{{info}}</p>
        <button v-on:click="change">切换天气</button>
    </div>

Next we write the js code:

    var vm = new Vue({
        el: "#app",
        data: {
            isHot: true,
        },
        computed: {
            info: function () {
                return this.isHot ? "热" : "冷";
            }
        },
        methods: {
            change: function () {
                this.isHot = !this.isHot;
            }
        },
        watch: {
            isHot: {
                handler:function (newVal, oldVal) {
                    console.log("isHot属性发生了变化");
                },
            }
        }
    });

The handler function in the code is the callback function we mentioned earlier. When the isHot attribute changes, this function will be called automatically.

Of course we can add an attribute on the idHot object surface: immediate, when the Boolean value of this attribute is true, handler callback function It will be called once during initialization.

    watch: {
        isHot: {
            handler:function (newVal, oldVal) {
                console.log("isHot属性发生了变化");
            },
            immediate: true
        }
    }

2. How to write monitoring attributes

There are two ways to write monitoring attributes:

• In vue instance Directly write in the object:
  new Vue({watch:{}}), and then pass in the relevant configuration
• Instantiate the object through vue.$watch(' Attribute name', callback function) to write

We have already shown the first way of writing here, now we will show the second way of writing:

Here we assume that the instantiation object of vue is vm.

    vm.$watch('isHot',function (newVal, oldVal) {
        console.log("isHot属性发生了变化");
    });

3. Deep monitoring of monitoring attributes

The monitoring we implemented earlier can only monitor simple data directly in the vue instance data. If an object or array is encountered, it cannot be monitored.

The way to do this is that in order to improve efficiency, in the vue monitoring properties, only one layer is monitored by default. If we want to monitor multiple layers, we need to manually enable in-depth monitoring.

    watch: {
        isHot: {
            handler:function (newVal, oldVal) {
                console.log("isHot属性发生了变化");
            },
            immediate: true,
            deep: true
        }
    }

deep:true turns on deep monitoring. Deep monitoring is to monitor the objects or arrays in the data in Vue. When the properties in the object or array change, the callback function of the monitoring properties will be automatically called.

In vue, it is actually possible to detect changes in the internal values ​​of objects, so why does the vue monitoring property not enable in-depth monitoring by default?

Because the callback function of Vue monitoring properties is called when the data changes. If deep monitoring is turned on, Vue will monitor all properties inside the object, which will greatly reduce the efficiency of Vue.

When we use monitoring attributes, we judge whether to enable in-depth monitoring based on specific business needs. [Related recommendations: vuejs video tutorial, web front-end development]

The above is the detailed content of What is the attribute of watch in vue?. For more information, please follow other related articles on the PHP Chinese website!