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.

Lorsque l'attribut surveillé par l'attribut de surveillance change, la fonction de rappel (gestionnaire) sera automatiquement appelée et les opérations pertinentes seront effectuées

L'attribut surveillé par l'attribut de surveillance doit exister pour être efficace.

• 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监视属性中，默认只监视一层，如果要监视多层，就需要我们手动开启深度监视。

rrreee

其中deep:true

2. Comment écrire des propriétés de surveillance

Il existe deux façons d'écrire des propriétés de surveillance :

É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

🎜🎜La première façon d'écrire voici comme ci-dessus Cela a déjà été montré, montrons la deuxième façon d'écrire : 🎜🎜Ici nous supposons que l'objet d'instanciation de vue est vm. 🎜rrreee🎜🎜🎜3. Surveillance approfondie des attributs de surveillance🎜🎜🎜🎜La surveillance que nous avons mise en œuvre précédemment ne peut surveiller que des données simples directement dans les données de l'instance de vue. Si elle rencontre un objet ou un tableau, il ne peut pas être surveillé. 🎜🎜Pour y parvenir, afin d'améliorer l'efficacité, dans les propriétés de surveillance de Vue, une seule couche est surveillée par défaut. Si nous voulons surveiller plusieurs couches, nous devons activer manuellement la surveillance approfondie. 🎜rrreee🎜deep:true active la surveillance approfondie. La surveillance approfondie consiste à surveiller les objets ou les tableaux dans les données dans Vue. Lorsque les propriétés des objets ou des tableaux changent, la fonction de rappel des propriétés de surveillance sera automatiquement appelée. 🎜🎜Dans Vue, il est en fait possible de détecter des changements dans les valeurs internes des objets, alors pourquoi la propriété de surveillance Vue n'active-t-elle pas une surveillance approfondie par défaut ? 🎜🎜Étant donné que la fonction de rappel des propriétés de surveillance de Vue est appelée lorsque les données changent, si la surveillance approfondie est activée, Vue surveillera toutes les propriétés à l'intérieur de l'objet, ce qui réduira considérablement l'efficacité de Vue. 🎜🎜Lorsque nous utilisons les attributs de surveillance, nous jugeons s'il convient d'activer une surveillance approfondie en fonction des besoins spécifiques de l'entreprise. [Recommandations associées : 🎜tutoriel vidéo vuejs🎜, 🎜développement web front-end🎜]🎜

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!