zoukankan      html  css  js  c++  java
  • vue de 生命周期

    Vue生命周期
    生命周期: 实例的生命周期,就是一个阶段, 从创建到运行,在到销毁的阶段
    生命周期函数:在实例的生命周期中, 在特点阶段执行的一些特点的事件,这些事件就叫做生命周期函数
    主要的生命周期函数分类
    创建期间的生命周期函数: (特点:每个实例一辈子只执行一次)
      - beforeCreate:创建之前,此时 data 和 methods 尚未初始化
      - created(第一个重要的函数,此时,data 和 methods 已经创建好了,可以被访问了)
      - beforeMount:挂载模板结构之前,此时,页面还没有被渲染到浏览器中;
      - mounted(第二个重要的函数,此时,页面刚被渲染出来;如果要操作DOM元素,最好在这个阶段)
    - 运行期间的生命周期函数:(特点:按需被调用 至少0次,最多N次)
      - beforeUpdate:数据是最新的,页面是旧的
      - updated:页面和数据都是最新的
    - 销毁期间的生命周期函数:(特点:每个实例一辈子只执行一次)
      - beforeDestroy:销毁之前,实例还正常可用
      - destroyed:销毁之后,实例已经不工作了
     
    第一次页面加载时会触发 beforeCreate, created, beforeMount, mounted 这几个钩子
     
    每个周期具体适合哪些场景
    beforecreate : 可以在这加个loading事件,在加载实例时触发
    created : 初始化完成时的事件写在这里,如在这结束loading事件,异步请求也适宜在这里调用
    mounted : 挂载元素,获取到DOM节点
    updated : 如果对数据统一处理,在这里写上相应函数
    beforeDestroy : 可以做一个确认停止事件的确认框
    nextTick : 更新数据后立即操作dom
     
    created和mounted的区别
    created:在模板渲染成html前调用,即通常初始化某些属性值,然后再渲染成视图。
    mounted:在模板渲染成html后调用,通常是初始化页面完成后,再对html的dom节点进行一些需要的操作。
     
    vue生命周期可以分为八个阶段,分别是:
    beforeCreate(创建前)
    created(创建后)
    beforeMount(载入前)
    mounted(载入后)
    beforeUpdate(更新前)
    updated(更新后)
    beforeDestroy(销毁前)v
    destroyed(销毁后)
    1,创建前(beforeCreate)
    对应的钩子函数为beforeCreate。此阶段为实例初始化之后,此时的数据观察和事件机制都未形成,不能获得DOM节点。
    2,创建后(created)
    对应的钩子函数为created。在这个阶段vue实例已经创建,仍然不能获取DOM元素。
    3,载入前(beforeMount)
    对应的钩子函数是beforeMount,在这一阶段,我们虽然依然得不到具体的DOM元素,但vue挂载的根节点已经创建,
    下面vue对DOM的操作将围绕这个根元素继续进行;beforeMount这个阶段是过渡性的,一般一个项目只能用到一两次。
    4,载入后(mounted)
    对应的钩子函数是mounted。mounted是平时我们使用最多的函数了,一般我们的异步请求都写在这里。在这个阶段,数据和DOM都已被渲染出来。
    5,更新前(beforeUpdate)
    对应的钩子函数是beforeUpdate。在这一阶段,vue遵循数据驱动DOM的原则。beforeUpdate函数在数据更新后虽然没立即更新数据,但是DOM中的数据会改变,这是Vue双向数据绑定的作用。
    6,更新后(updated)
    对应的钩子函数是updated。在这一阶段DOM会和更改过的内容同步。
    7,销毁前(beforeDestroy)
    对应的钩子函数是beforeDestroy。在上一阶段Vue已经成功的通过数据驱动DOM更新,当我们不再需要vue操纵DOM时,
    就要销毁Vue,也就是清除vue实例与DOM的关联,调用destroy方法可以销毁当前组件。在销毁前会触发beforeDestroy钩
    子函数。
    8,销毁后(destroyed)
    对应的钩子函数是destroyed。在销毁后,会触发destroyed钩子函数。
    还有在组件之间切换的时候都会请求一些请求过的数据,每次请求都会导致重复渲染影响性能。这些数据可以存到缓存。此时使用keep-alive将组建包裹起来。但这样以上八种生命周期钩子将失效。取而代之的时activate和deactivated
    activate:是在被包裹组建被激活的状态下使用的生命周期钩子
    deactivated:在被包裹组件停止使用时调用
     
     
     
     
     
     
     
     
     
  • 相关阅读:
    layer系列之弹层layer.prompt
    顶级域名、一级域名、二级域名与IP
    Redis知识点总结
    js知识点总结
    PowerDesigner相关总结
    C#中使用Join与GroupJoin将两个集合进行关联与分组
    IIS知识点总结
    打印知识点总结
    vim显示行数
    Linux NFS服务器的安装与配置
  • 原文地址:https://www.cnblogs.com/maxiag/p/13792797.html
Copyright © 2011-2022 走看看