14.函数式组件和过滤器

29 阅读1分钟

函数式组件优势

无状态、无生命周期、无this,但是性能高正常的组件是继承vue的一个类,函数式组件就是一个普通函数,没有new的过程,在vue3所有的组件都没有new,所以性能上没有优势

过滤器只有vue2有,vue3废弃了

使用方式

{{ msg | filterA(参数)}}

全局过滤器定义

Vue.filter('filterA',function(参数){
    //处理后的结果
})

局部过滤器定义

data:{
 message: "helloTian"
},
//过滤器本质上是函数
filters:{
       //注意: 过滤器函数形参中的val,永远是"管道符"前面的那个值
       filterA(val){
        //charAt方法接受索引值,表示从字符串中把下标对应的字符,获取出来
        let first = val.charAt(0).toUpperCase()
       //slice方法,可以截取字符串,从指定下标往后截取
       let other = val.slice(1)
       return first+ other
   }
}

使用场景

数据的格式化,时间格式化,千分符,价格,单位转换等

vue3舍弃过滤器,用户可以自己写一个函数,减少模板编译

const filter= ()=>{
    return //处理后的结果
}