Quel est l'attribut de la montre en vue

watch est un attribut de surveillance. Dans Vue, vous pouvez surveiller le changement d'un certain attribut via l'attribut watch.Lorsque cet attribut change, vous pouvez effectuer certaines opérations : 1. Lorsque l'attribut surveillé par l'attribut surveillé change, la fonction de rappel sera automatiquement appelée et effectuera. opérations associées ; 2. Attributs de surveillance Les attributs surveillés doivent exister pour être efficaces. Il existe deux manières d'écrire des propriétés de surveillance : "new Vue({watch:{}})" et "vue instanciated object.$watch('property name' callback function)".

L'environnement d'exploitation de ce tutoriel : système windows7, version vue3, ordinateur DELL G3.

vue surveille les propriétés

Pendant le développement, nous rencontrerons une situation où nous devrons effectuer certaines opérations lorsqu'une propriété change. Les propriétés qui détectent ce changement sont appelées propriétés de surveillance dans Vue.

1. Qu'est-ce que l'attribut de surveillance ? Dans vue, nous pouvons surveiller le changement d'un certain attribut via l'attribut watch, lorsque cet attribut change, nous pouvons effectuer certaines opérations.

• Ici, nous utilisons un cas météo pour expliquer ce que sont les attributs de surveillance :
• D'abord le code html :

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

Ensuite, nous écrivons le code js :

    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属性发生了变化");
                },
            }
        }
    });

La fonction handler dans le code est La fonction de rappel que nous avons mentionnée précédemment sera automatiquement appelée lorsque l'attribut isHot change.

Bien sûr nous pouvons ajouter un attribut sur l'objet idHot : immediate Lorsque la valeur booléenne de cet attribut est vraie, le rappel du handler. la fonction est Elle sera appelée une fois lors de l'initialisation.

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

handler这个函数就是我们前面说的回调函数，当isHot属性发生变化的时候，这个函数就会自动调用。

当然我们可以在idHot对象面添加一个属性：immediate，当此属性布尔值为真的时候，handler回调函数在初始化的时候就会调用一次。

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

2.监视属性的写法

监视属性有两种写法：

• 在vue实例化对象中直接书写：
  new Vue({watch:{}}),然后传入相关配置
• 通过vue实例化对象.$watch('属性名'，回调函数)来书写

这里的第一种写法上面我们已经展现过了，下面我们就展示一下第二种写法：

这里我们假设vue的实例化对象为vm。

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

3.监视属性之深度监视

前面我们实现的监视，只能监视vue实例data中直接的简单数据，要是遇到对象或者数组，就无法监视了。

这样做的方法是vue为了提高效率，在vue监视属性中，默认只监视一层，如果要监视多层，就需要我们手动开启深度监视。

其中deep:true

Écrivez directement dans l'objet d'instanciation vue :
new Vue({watch:{ }} ), puis transmettez la configuration appropriéeUtilisez vue instanciation object.$watch('property name', callback function) pour écrire

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!