过滤器和生命周期

过滤器

vue 1.x内部提供提供了 10 个过滤器， 这10个过滤器是针对 数字 纸币符号 日期 大小写 小数位数等的格式化

什么叫过滤器？

• 格式化数据的一个工具
• 举例：
  12.22225 —> 12.2
  Tue May 28 2019 10:15:08 GMT+0800 (China Standard Time) – > 2019/05/28

过滤器一样也有两种声明形式

• 全局声明
  Vue.filter(过滤器名称，回调函数) 回调函数中有一个参数value
  value值就表示的是格式化数据的值
• 局部声明

    new Vue({
      filters: {
        '过滤器名称'： function( value ){
          return
        }
      }
    })
  

 

过滤器的回调函数必须有返回值

 

如何使用使用过滤器？

• 我们用一个叫做管道符的来使用过滤器

• 举例：
  数据 | 过滤器名称

生命周期

1. 生命是生命周期呢？
   当前组件在创建到销毁经历的一系列过程，称之为生命周期
    

2. 生命周期的分为几个阶段？每个阶段有哪些钩子函数
   生命周期分为3个阶段，这三个阶段分别是： 初始化 、 运行中 、 销毁
   初始化阶段：有4个钩子函数 ， 触发条件是自动的

   • beforeCreate

     1. 组件即将创建，进行组件事件和生命周期的初始化
     2. 项目中一般不使用（ 兵哥 ）
     3. 有的开发者也会在这里进行数据请求

   • created

     1. 组件创建完成
     2. 项目中：
        1） 异步请求接口数据
        2） 数据修改

   • beforeMount

     1. 组件即将挂载
     2. 判断根实例组件是否有el选项，如果没有，那么手动挂载，判断根实例组件中的其他子组件是否有template选项，如果没有，那么使用outerHTML插入
     3. 项目中：
        1） 异步请求接口数据
        2） 数据修改

   • mounted

     1. 组件挂载结束
     2. 使用真实DOM替换VDOM
     3. 项目中
        1） 异步请求接口数据
        2） 数据修改
        3） 真实DOM操作可以了( Vue一般情况下不要直接操作真实DOM, 一般可以进行第三方库的实例化（静态数据渲染来的） )

   • 总结： 初始化过程中在项目中使用
     数据请求：created
     DOM操作： mounted
     数据修改： beforeMount created mounted

   运行中阶段：有2个钩子函数 ： 触发条件是： 当data选项中的数据发生改变时

   • beforeUpdate
     1. 内部操作 ： vdom生成和diff的对比
        我们可以不使用
   • updated
     1. Rdom已经生成，可以进行异步数据请求得到的dom渲染的第三方库实例化
         

   销毁阶段： 有2个钩子函数

   • beforeDestory: 组件即将销毁，准备调用 $destroy() 方法

   • destoryed： 组件销毁结束

   • 这两个钩子函数没有什么去别，功能很相似

   • 项目中：
     这两个钩子函数都可以用来做善后,把一些计时器，第三方库实例化出来的实例

     组件销毁的两种方式：
     1. 使用$destroy()方法（内部销毁）
     缺点： 会将组件的模板也保留下来
     2. 使用开关销毁（外部销毁）
     v-if
     这种类型的销毁不会留有模板

有一个钩子函数可以不写，这个钩子函数就是我们 render 函数

3. 生命周期中钩子函数的触发条件是什么？
4. 项目中如何使用？
5. 名词解释：
   钩子函数： 钩子函数就是options配置项中的一个方法，在特定的触发条件（ 时机 ）下会自动触发
6. 除了根实例组件以外，其他的组件中的数据项 data 必须是一个函数，而且这个函数必须返回一个对象

• 为什么是函数呢？
  原因：我们希望组件的数据是独立的，有一定作用域的
• 为什么返回值是对象？
  原因： 是为了符合 数据驱动 原理设计，让observer将data选项中的数据设置 getter 和 setter

7. 其他选项写在生命周期的上