您的位置: 首页  >  文章  >  Vue的生命周期

Vue的生命周期

分类: 文章 • 2023-10-25 19:42:10

Vue的生命周期

Vue生命周期钩子函数一共有11个，常见的用8个
Vue的生命周期

初始化阶段

  • beforeCreate ：为实例事件和生命周期做准备
  • create ： 初始化数据
  • beforeMount ：vdom生成了
  • mounted ：真实dom生成了，数据请求，第三方库实例化
  • 初始化阶段是自动执行的，只要组件出现就会自动执行
  • 初始化阶段执行一次
  • create\beforeMount\mounted 都提供了一次数据修改的机会

更新阶段

  1. 执行次数： 多次
  2. 执行条件： 数据改变，就会执行
  3. 钩子函数
  • beforeUpdate ：vdom生成 - 通过diff比对生成patch补丁对象
  • updated：真实dom(更新) - 第三方库实例化
  1. 应用场景
    • 结合第三方类库使用，通过数据请求修改数据后，然后在第三方实例化

销毁阶段

  1. 执行几次： 可以多次

  2. 执行条件： v-if [ 外部销毁 ] / $destory() 【 内部销毁】
    组件会被删除，但是真实dom结构还在，需要手动删除

  3. 钩子函数： 2个

    • beforeDestory ：
    • destoryed ：

  4. 两个钩子函数的区别： 没差别

  5. 任务： 善后的

    • 把一些vue无法自动清除的东西清除掉： 比如： 计时器、自定义事件【 滚轮事件 】

VDOM && DIFF 算法了解

Vue使用了VDOM

  • 问题： 为什么VDOM性能就高呢？
    • VDOM操作减少了真实DOM操作，大大缩短了事件，减少内存消耗
  • 问题： VDOM又是什么？
    • VDOM是一个js对象模型，用于模拟真实DOM结构
  • 问题： jsx是什么
    • jsx -> javascript + xml ， jsx是对js语法的扩展
    • jsx就是可以让我们在js中书写xml

VDOM渲染的过程

  1. 通过数据第一此生成vdom
  2. 通过render函数将vdom渲染为真实dom
  3. 当数据改变时，重新生成vdom
  4. 通过diff算法对比新旧vdom，获得patch补丁对象
  5. 根据patch补丁对象再次渲染为真实dom

DIff算法

1，Diff算法来源于后端，适用于比较两个文件的不同，会生成一个补丁对象，记录内容的不同
2，Diff算法是同层级比较，不能跨层级
3，DIFF是用js 递归返回实现

相关推荐