Analyse des similitudes et des différences entre le cycle de vie Vue et React

Vue et Reac ont tous deux le concept de cycle de vie, et chaque instance de composant passe par une série de processus d'initialisation avant d'être créée.

Cycle de la vie

Désigne le processus ou le cycle de vie du composant du début à la fin du processus d'initialisation. Il décrit le processus du début à la fin du composant. Chaque composant a un cycle de vie et gère la fonction d'accrochage donnée par le composant. tout au long du cycle de vie.

Fonction crochet

Désigne lorsque certains états et paramètres du système changent, le système informe immédiatement la fonction de traitement correspondante appelée fonction hook

Cycle de vie Vue

Après avoir déclenché l'événement créé de vue, cela pointe vers l'instance de vue


      var mlistVue = new Vue({
    
    
        data: {
    
    
          date "内容"
        },
        created: function () {
    
     
          //在实例创建之后同步调用,已建立;
          //没有开始 DOM 编译,$elment还不存在,但是实例存在,即this.date存在,可打印出来 。
          console.log("建立");
        },
        beforeCompile: function () {
    
    
          console.log("未开始编译");
        },
        compiled: function () {
    
     
          //在编译结束后调用,此时所有的指令已生效,数据的变化将触发 DOM 更新。
          console.log("编译完成");
        },
        ready: function () {
    
     
          //在编译结束和 $elment第一次插入文档之后调用,在第一次钩子之后调用。
          console.log("一切准备好了");
        },
        attached :function () {
    
    
          //暂时触发不了
          //在 vm.$elment插入 DOM 时调用
          console.log("插入DOM成功");
        },
        detached :function () {
    
    
          //在 vm.$elment从 DOM 中删除时调用。必须是由指令或实例方法删除,直接操作 vm.$elment不会 触发这个钩子。
          console.log("删除DOM成功");
        },
        beforeDestroy: function () {
    
     
          //触发方式,在console里面打listVue.$destroy();
          //在开始销毁实例时调用。此时实例仍有功能。
          console.log("销毁前");
        },
        destroyed: function () {
    
      
          //触发方式,在console里面打myVue.$destroy();其中myVue.$destroy(true)是删除DOM节点,会触发detached函数,但实例仍然存在
          //在实例被销毁之后调用。此时所有的绑定和实例的指令已经解绑,注意是解绑不是销毁,所有的子实例也已经被销毁。
          console.log("已销毁");
        }
    });

Réimprimé le grand gars: https://www.jb51.net/article/147680.htm

Cycle de vie de réaction

https://blog.csdn.net/Menqq/article/details/108514326

Je suppose que tu aimes

Origine blog.csdn.net/Menqq/article/details/111240157
conseillé
Classement