Análisis de similitudes y diferencias entre el ciclo de vida de Vue y React

Tanto Vue como Reac tienen el concepto de ciclo de vida, y cada instancia de componente pasa por una serie de procesos de inicialización antes de ser creada.

Ciclo vital

Se refiere al proceso o ciclo de vida del componente desde el principio hasta el final del proceso de inicialización. Describe el proceso desde el principio hasta el final del componente. Cada componente tiene un ciclo de vida y gestiona la función de enlace dada por el componente. a través del ciclo de vida.

Función de gancho

Se refiere a cuando ciertos estados y parámetros del sistema cambian, el sistema informa inmediatamente a la función de procesamiento correspondiente llamada función de gancho

Ciclo de vida de Vue

Después de activar el evento creado de vue, esto apunta a la instancia 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("已销毁");
        }
    });

Reimpreso el tipo grande: https://www.jb51.net/article/147680.htm

Reaccionar ciclo de vida

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

Supongo que te gusta

Origin blog.csdn.net/Menqq/article/details/111240157
Recomendado
Clasificación