组件生命周期（组件内钩子）

最新推荐文章于 2024-05-20 16:23:41 发布

LionKing0823

最新推荐文章于 2024-05-20 16:23:41 发布

阅读量449

点赞数

分类专栏： Vue.js

本文链接：https://blog.csdn.net/LionKing0823/article/details/89481608

版权

Vue.js 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

组件生命周期（组件内钩子）重点！！

钩子函数，就是options里面的key, 它的值是函数
钩子函数写在其他配置项的后面

组件的有哪几个阶段？
- 初始化阶段
- 运行中阶段
- 销毁阶段
初始化阶段
- 分为两个大阶段，每一个大阶段包含两个生命周期钩子函数 ---- 生命周期 --》人的一生钩子函数 --》（人在某个阶段做得一些事情，这些事情是自动触发）
- 有那四个钩子函数呢？每个钩子函数有什么功能？项目中有什么用呢？
  1. beforeCreate
    - 表示组件创建前的准备工作，为事件的发布订阅和生命周期的开始做初始化
    - 这个钩子函数中
      - 数据拿不到，真实DOM也拿不到
    - 这个钩子在项目中我们没有什么实际用途
  2. created **
    - 表示组件创建结束**
    - 这个钩子函数中
      - 数据拿到了，但是真实DOM没有拿到
    - 这个钩子函数在项目
      - **数据请求，然后可以进行一次默认数据的修改 **
  3. beforeMount
    - 表示组件装载前的准备工作
      - 判断 el选项有没有，判断 template选项有没有，如果没有，那么需要手动装载
      - 如果有，那么通过render函数进行模板的渲染（没有做的，正要进行， VDOM）
    - 这个钩子函数中
      - 数据拿到了，真实DOM没有拿到
    - 这个钩子函数在项目中，
      - 数据请求，它也可以进行一次数据修改
  4. mounted
    - 表示组件装载结束，就是我们可以在视图中看到了
    - 这个钩子函数中
      - 数据拿到了，真实DOM也拿到了
    - 这个钩子函数在项目：
      - **DOM操作就可以进行了，第三方库的实例化 **

总结：由上对比，我们可以知道，数据请求越提前越好一些， created常用于数据的请求和数据的修改，第三方库的实例化常在mounted中进行书写

运行中阶段
- 运行中阶段一共有两个钩子函数
  - beforeUpdate
    - 表示数据更新前的准备工作
    - 这个钩子不主动执行，当数据修改了，才会执行
    - 这个钩子函数中
      - 数据拿到了，并且拿到的是修改后的数据
      - DOM也输出了
    - 这个钩子函数更多的工作内容为：生成新的 VDOM , 然后通过diff算法进行两次VDOM 对比
    - 这个钩子在项目中
      - 因为他主要做的事情是内部进行的，所以对我们而言没有太多的操作意义
  - **updated **
    - 表示数据更新结束，通过render函数渲染真实DOM
    - 这个钩子函数的执行也是，当数据修改的时候才执行
    - 这个钩子函数中
      - 数据拿到了， DOM也拿到了
        -** 这个钩子在项目中 **
      - 也是进行第三方库的实例化（ DOM是改变的）
- 总结：数据更新，也要进行DOM操作那么，我们使用update这个钩子
销毁阶段
- 用过开关销毁
  - 这个组件真实DOM也会被删除掉
- 通过调用vm.$destroy()
  - 这个组件的被删除了，但是它的真实DOM的html结构还在
- 包含两个钩子函数
  - beforeDestroy
  - destroyed
  - 这两个钩子无差别
  - 这两个钩子在项目中
    - 做善后工作，手动清除一些计时器，和一些方法，还有第三方实例化出来的对象
- 我们建议大家使用开关的形式来操作组件的销毁和创建
用案例来写一个生命周期第三方库的实例化来做 swiper

真实DOM存在了，才能实例化
1. 直接写死了
  - DOM就没有渲染
  - 数据直接有了
2. 数据请求
  - 我们常规是往 updated 钩子里面写，但是遇到问题了？
  - 问题是：当我们有其他数据更新时，updated钩子就会重复触发，也就是说第三方库要重复实例化
  - 解决：
    1. 在updated钩子中添加判断条件， if(!this.swiper){}
    2. 在数据请求里面写，但是发现无法获得真实DOM
      1. 将实例化代码发到异步队列
        setTimeout(function(){},0) 将实例化代码发到这里面 [不推荐]
        Vue.nextTick() /this.$nextTick 优先使用
        概念： nextTick表示DOM渲染之后执行的业务

杂七杂八

props属性验证

常用形式：

    props: {
        key: keyType    // key是从父组件获得的自定义属性， 值是我们期望得到的数据类型
    }

业务：我现在想要 > 1000 我才要，没有 > 1000 我就不要
解决： vue提供了一个：validator

    props: {
        key: {
            validator( value ){
                return value 的条件
            }
        }
    }

不常用形式

    props: {
        propA: [],
        propB: {
            type: String,
            require: true
        },
        propC: {
            type:String,
            default: 'yyb'
        },
        propD: {
            type: String,
            default: function(){
                return 'yyb'
            }
        }
    }

有时候有的项目总也会使用一个叫做 vue-validate validate这些第三方库

过滤器
- vue 1.x版本一共提供了10个过滤器，但是不满足人们使用，vue2.x全部不提供了，交给开发者自己写
- 但是vue提供饿了定义过滤器的方式
- 过滤器：对数据进行格式化的一个函数
- 过滤器可以用在两个地方：双花括号插值和 v-bind 表达式
- 过滤器用给一个 ’ | ’ 表示，我们称之为 ‘管道符’
自定义指令
- 全局自定义指令
- 局部自定义指令
  - 指令的钩子函数（一共有5个）
    - bind : 指令和元素第一次绑定的时候调用
    - inserted ：指令绑定的元素插入父节点的时候调用
    - update ：指令绑定的元素自身，或是他的内容（子节点）发生改变的时候出发
    - componentUpdated ：指令绑定的组件自身，或是他的内容（子节点）发生改变的时候出发
    - unbind ：指令和元素第一次解绑是调用
  - 指令的钩子函数的参数
    - el 当前元素
    - binding 前端指令的所有信息
    - vNode 当前指令绑定的虚拟节点
    - oldVnode 指令绑定前的虚拟节点
渲染函数和 jsx
1. 渲染函数 render函数 — 》 createElment
2. jsx( javascript + xml )
  - xml 就是一种标签化的数据格式
  - jsx语法浏览器无法解析，必须靠babel来解析
  - jsx语法出现的原因是为了解决,render函数频繁使用createElement来创建节点
过渡 & 动画

过渡指的是用 css3 的transition来实现动画效果
动画指的是用 js来实现动画效果
Vue中一共给了四种解决方案，但是我们常用的只有一种
- 在 CSS 过渡和动画中自动应用 class
  - 可以配合使用第三方 CSS 动画库，如 Animate.css 【推荐】
- 在过渡钩子函数中使用 JavaScript 直接操作 DOM
- 可以配合使用第三方 JavaScript 动画库，如 Velocity.js

LionKing0823

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
组件生命周期（组件内钩子）

组件生命周期（组件内钩子）重点！！钩子函数，就是options里面的key, 它的值是函数钩子函数写在其他配置项的后面组件的有哪几个阶段？初始化阶段运行中阶段销毁阶段初始化阶段分为两个大阶段，每一个大阶段包含两个生命周期钩子函数 ---- 生命周期 --》人的一生钩子函数 --》（人在某个阶段做得一些事情，这些事情是自动触发...
复制链接

扫一扫