zoukankan      html  css  js  c++  java
  • vue组件的生命周期

    beforecreate:实列创建之前。
    created:实列创建完成。
    beforeMount:挂载开始之前被调用。
    mounted:实列挂载到Dom上
    beforeupdate:响应式数据更新时调用
    updated:虚拟dom重新渲染和打补丁之后调用
    beforedestroy :实列销毁之前调用
    destroyed :实列销毁后调用
    四个执行 过程 create初始 Mount 加载 update更新 destroy销毁
    1beforeCreate()遇到的第一个生命周期函数表示实例完全被创建出来之前,会执行它
    注事:在beforeCreate生命周期函数执行的时候,data和methods中的数据都还没有没初始化
    2created(){}第二个生命周期data和methods 都已经被初始化好了!
    如果要调用methods中的方法 或者操作data中的数据最早先用created方法

    下来是vue开始编译模板
    --------------------------------------
    这里表示Vue开始编辑模板,
    |把Vue代码中的那些指令进行执行,最终,
    在内存中生成一个编译好的最终模板字符串
    然后,把这个模板字符串,渲染为内存中的DOM
    此时,只是在内存中,追染好了模板,并没有把模板
    |挂载到真正的页面中去;
    ---------------------------------------
    3第三个生命周期函数:beforemont(){}
    beforeMount(){ // 这是遇到的第3个生命周期函数,表示模板已经在内存中编辑完成了,但是尚未把模
    板渲染到页面中
    /在beforeMount 执行的时候,页面中的元素,还没有被真正替换过来,只是之前写的一些模板字符串
    beforeMount在执行时 此函数执行的时候,模板已经在内存中编译好了, 但是尚未挂载到页面中去, 此时,页
    面还是旧的
    下一步Create vm,Seland replace'el" with it
    这-步,将内存中编译好的模板,真实的
    替换到浏览器的页面中去;
    mounted(){ // 这是遇到的第4个生命周期函数,表示,内存中的模板,已经真实的挂载到了页面中,用户
    已经可以看到渲染好的页面了
    ------------------------------------------
    如果要通过某些插件操作页面.上的DOM节
    点了,最早要在mounted中进行
    第四个生命周期:只要执行完了mounted , 就表示整个
    Vue实例已经初始化完毕了;
    此时,组件已经脱离了创建阶段;
    进入到了运行阶段
    下面
    这些是组件运行阶段的生命周期函数
    只有两个:
    ------------------------------------------
    beforeUpdate和updated
    第五个生命周期执行beforeUpdate的时候,页面中的显示的数据,还是旧的,此时data 数据是最
    新的,页面尚未和最新的数据保持同步


    Virtmual DOM
    re-render
    and patch
    这一步执行的是:先根据data中最新的数据,在内存中,重新渲染出-份最新的
    内存DOM树,
    当最新的内存DOM树被更新之后,会把最新的内存DOM树,重新渲染到真实
    的页面中去,这时候,就完成了数据从data(Model层) > view(视图层) 的更新
    第六个生命周期:updated 事件执行的时候,页面和data数据已经保持同步了,都是最新的
    第七个生命周期:beforeDestroy
    第八个生命周期:当执行beforeDestroy钩子函数的时候, Vue实例就已经从运行阶段,进入到了
    销毁阶段;
    当执行beforeDestroy 的时候,实例身上所有的data和所有的methods ,以
    及过滤器、指令....都处于可用状态,此时,还没有真正执行销毁的过程
    第九个生命周期:destroyed
    当执行到destroyed函数的时候,组件已
    经被完全销毁了,此时,组件中所有的数
    据、方法,
    指令、过滤器点都已经不可
    用了

  • 相关阅读:
    rapidjson 使用
    【设计模式】模板方法模式
    【设计模式】策略模式
    【设计模式】建造者模式
    【设计模式】享元模式
    /dev/sda1 contains a file system with errors,check forced.
    如何编写高效的Python的代码
    VsCode 调试 Python 代码
    Python 使用 pyinstaller 打包 代码
    初次使用git上传代码到github远程仓库
  • 原文地址:https://www.cnblogs.com/yangjingyang/p/11390610.html
Copyright © 2011-2022 走看看