博客

vue生命周期、简要理一下vue生命周期

  • Post author:
  • Post category:vue




初始化vue
  1. 初始化事件、生命周期，触发beforeCreate钩子函数
  2. 然后把props、data、methods等这些成员注入到vue的实例上
  3. 然后触发created钩子函数，这时在created可以访问到props、data、methods等这些成员，到此vue创建完毕

    在这里插入图片描述


模板=>渲染函数

$mount方法实际上就是把el转化为template（模板）

  1. 接下来要把模板编译成render函数

    4.1 判断是否有template，如果没有就会把el外部的HTML作为template编译

    4.2 判断是否有template，如果有就把template编译到render（渲染函数）中

渲染函数是用来生成虚拟DOM的

在这里插入图片描述

上面这部分的作用（核心思想）就是把template（模板）编译成render（渲染函数）



准备挂载DOM
  1. 触发beforMount钩子函数——挂载之前所执行的钩子函数

    在这个函数中还无法获取新元素的内容
  2. 准备挂载DOM
  3. 把新的结构渲染到页面上，然后再触发mounted

    在mounted钩子函数中可以访问到新的DOM结构中的内容

    在这里插入图片描述
  4. 挂载完成后再去修改data中的成员的时候，首先会触发beforeUpdate钩子函数，然后进行新旧两个虚拟DOM的对比，把差异渲染到浏览器中，最后触发updated钩子函数

    如果在beforeUpdate钩子函数中直接访问浏览器中渲染的内容还是上一次的结果

    如果想要获取最新的页面内容，需要在updated钩子函数中访问

    在这里插入图片描述


销毁

vm.$destroy()

在这里插入图片描述


Vue基础（混入mixin、组件component、动态组件、组件通信传值/父子通信等、生命周期）


版权声明：本文为qq_39357822原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。