vuejs组件的生命周期

组件的生命周期

1、组件有那几个阶段

• 初始化阶段
• 运行中阶段
• 销毁阶段
  2、初始化阶段
  • 分为两个大阶段，每一个大阶段包含两个生命周期钩子函数
    ----生命周期–》人的一生 钩子函数—》
    （人在某个阶段做得一些事情，这些事情是自动触发）
    有四个钩子函数，（一个都不能少）
    • beforeCreate
      • 表示组件创建前的准备工作，为事件的发布订阅和生命周期的开始做准备
      • 组件未创建，所有没有this，数据拿不到，DOM也拿不到，可以请求数据，
      • 这个钩子在项目中没有实际的意义
    • create
      • 表示组件创建结束
      • 这个钩子函数中
        • 数据拿到了，但是DOM没有拿到
      • 这个钩子函数在项目中，
        • 数据请求，并能修改数据
    • beforeMount
      • 表示组件装载前的准备工作
        • 判断el选项有没有，判断template选项有没有，如果没有，那么需要手动渲染 .$mount(’#app’)
        • 如果有，那么通过render函数进行模板渲染（没有做的 正要进行，VDOM）
      • 这个钩子函数中
        • 数据拿到了，真实DOM没有拿到
      • 这个钩子函数在项目中，
        • 数据请求，并能修改数据
    • mounted
      • 表示组件装载结束，就是我们可以在视图中看到了
      • 这个钩子函数中，
        • 数据拿到了，真实DOM也拿到了
      • 这个钩子函数在项目中
        • DOM操作就可以进行了，第三方库的实例化
        • 数据请求，并能修改数据

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

3、运行中阶段

• 运行中阶段一共有两个钩子函数
  • beforeupdate
    • 表示更新前的准备工作
    • 这个钩子不主动执行，当数据修改了，才会执行
    • 这个钩子函数中，
      • 数据拿到了，并且拿到的是修改后的数据
      • DOM也输出了
    • 这个钩子函数更多的工作内容为：生成新的VDOM,然后通过diff算法进行两个VDOM对比
    • 这个钩子在项目中
      • 因为它主要做的事情是内部进行的，所以对我们而言没有操作意义
  • updated
    • 表示数据更新结束，通过render函数1渲染真实DOM
    • 这个钩子函数的执行也是，当数据修改的时候才执行
    • 这个钩子函数中
      • 数据拿到了，DOM也拿到了
    • 这个钩子在项目中
      • 也是进行第三方库的实例化（DOM是改变的）
    • 总结：数据更新，也要进行DOM操作，那么，我们使用updated这个钩子

4.销毁阶段

• 用开关销毁
  • 这个组件真实DOM也会被删除掉
• 通过调用vm.$destroy（）
  • 这个组件的被删除了，但是它的真实DOM的html结构还在
• 包含两个钩子函数
  • beforeDestroy
  • destroyed
    • 这两个钩子无差别
    • 这个钩子在项目中
    • 做善后工作，手动清除一些计时器，和一些方法，还有第三方实例化出来的对象
  • 建议使用开关的形式来操作组件的销毁和创建

案例 swiper

• 用案例来写一个生命周期 第三方库的实例化来做

真实DOM存在了， 才能实例化

2. 直接写死了

• DOM就没有渲染
• 数据直接有了

3. 数据请求

• 我们常规是往 updated 钩子里面写， 但是遇到问题了？
• 问题是： 当我们有其他数据更新时，updated钩子就会重复触发， 也就是说第三方库要重复实例化
• 解决：

1. 在updated钩子中添加判断条件， if(!this.swiper){}
2. 在数据请求里面写， 但是发现无法获得真实DOM
3. 将实例化代码发到异步队列

• setTimeout(function(){},0) 将实例化代码发到这里面 [不推荐]

• Vue.nextTick() /this.$nextTick 优先使用

• 概念： nextTick表示DOM渲染之后执行的业务

  渲染函数 和 jsx

  1、渲染函数 render 函数 ----》createElement
  2、jsx（javascript + xml）
  -xml 就是一种便签化的数据函数
  -jsx语法浏览器无法解析，必须靠babel来解析（script type=‘text/babel’）
  -jsx语法出现的原因是为了解决，render函数频繁使用createElement来创建节点的

过渡与动画

过渡指的是 用 css3 的transition来实现动画
Vue中一共给了四种解决方案，但是我们常用的只有一种

• 在 CSS 过渡和动画中自动应用 class
• 可以配合使用第三方 CSS 动画库，如 Animate.css 【推荐】
• 在过渡钩子函数中使用 JavaScript 直接操作 DOM
• 可以配合使用第三方 JavaScript 动画库，如 Velocity.js

插槽

slot 可以代替组件内直接写的内容

html
    <div id="app">
        <Hello>
            <div> 这是组件内直接写的 </div>
        </Hello>
    </div>
    <template id="hello">
        <div>
            <h3> 骏哥, 被伤了 </h3>
            <slot></slot>
        </div>
    </template>

具名插槽

<div id="app">
    <Hello>
        <header slot = 'header'>头部</header>
        <section slot = "content"> 内容 </section>
        <footer slot = "footer"> 底部 </footer>
    </Hello>
</div>
<template id="hello">
    <div>
        <slot name = 'header'></slot>
        <h3> 骏哥, 被伤了 </h3>
        <slot name = "content"></slot>
        <slot name = "footer"></slot>
    </div>
</template>