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

    beforeCreate

    • a. 不能获取数据,也不能获取真实DOM

    • b. 它可以对new Vue()出来的时候,做初始化事件和生命周期做准备,这些都是内部完成的

    • 总结: 这个钩子我们在项目中可以不用

    created

    • a. 初始化data选项

    • 对data选项中的数据做数据劫持【 用es5 Object.defineProperty做getter和setter设置 】

    • b 可以获取数据,但是不能获取真实DOM

    • 可以对数据做计算、转换、修改等操作

    • 总结: 数据请求,然后将请求的结果赋值给我们的数据

    beforeMount

    • 组件挂载前的准备工作

    • a. 判断是否有el,如果el,那么我们在去判断是否有template,如果都有,通过render函数将jsx渲染为VDOM,这里我们就有了VDOM,如果没有el,那么我们可以使用$mount手动挂载,如果没有template选项,那么我们使用outerHTML手动写一个进去

    • b. 可以获得数据,不能得到真实DOM

    • 可以对数据做计算、转换、修改等操作

    • 总结: 数据请求,然后将请求的结果赋值给我们的数据

    • 这个钩子我们就让它做内部事务去吧,不去用它

    mounted

    • 表示组件挂载结束,也就是生成的html已经插入页面结束了

    • a. 数据可以获取,真实dom也可以获取

    • 我们可以操作真实DOM

    • 可以对数据做计算、转换、修改等操作

    • 总结:

    • 项目中

    • 数据请求 -> created/mounted

    • DOM操作 -> mounted

    生命周期更新阶段

    • 触发条件: 数据改变

    • 钩子函数一共有两个:

    beforeUpdate

    • 任务: 数据改变,重新生成vdom,然后通过diff算法得到patch补丁对象,自动完成任务

    • 总结: 不操作

    updated

    • 更新结束,那么肯定已经获取真实DOM,也就是说我们可以做真实dom操作了

    组件的销毁阶段

    • 销毁阶段钩子函数的作用是: 自动删除事件以及监听

    • 触发条件: 组件被销毁

    • 外部销毁: 开关【 v-if 】

    • 内部销毁; 调用 this.$destroy()

    • 内部销毁组件会被删除,但是组件的真实dom外壳会被遗留

    • 钩子函数有两个: 这两个钩子函数没有差别,任意用一个即可

    beforeDestroy

    destroyed

    • 手动操作的作用: 善后

    • 清除计时器、滚轮事件

  • 相关阅读:
    js 数组详解(javascript array)
    CentOS 修改IP地址, DNS, 网关
    Leetcode 652.寻找重复的子树
    Leetcode 650.只有两个键的键盘
    Leetcode 649.Dota2参议院
    Leetcode 648.单词替换
    Leetcode 647.回文子串
    Leetcode 645.最长数对链
    Leetcode 643.子数组最大平均数I
    Leetcode 640.求解方程
  • 原文地址:https://www.cnblogs.com/zengfanjie/p/13686983.html
Copyright © 2011-2022 走看看