vue - 计算属性 - 侦听器 - 过滤器

目录

什么是计算属性

什么是侦听器  

过滤器

---

什么是计算属性

 计算属性是定义在 computed 节点之下的

它的值是基于其它数据属性计算的，还会进行缓存，只有依赖的属性变化后才会重新计算

可以把这个理解为对数据的包装，对数据进行计算和处理而提供新的数据

data(){
    return{
        messgae: 'Hello',
        firstName: 'zs',
        lastNAme: 'ls'
    }
},
computed:{
    //依赖messgae
    reversedMesg(){
        return this.message.split('').reverse().join('')
    },
    //依赖firstName和lastNAme
    fullName(){
        return this.firstName + ' '+ this.lastName
    }
}

在模板中就像使用普通属性一样

<p> {{reversedMesg}} </p>
<p> {{fullName}} </p>

当message、firstName、lastName发生变化时， reversedMesg和fullName会自动更新它的值

计算属性的缓存机制可以确保在需要时进行计算，提高性能

什么是侦听器  

一种用于观察和相应数据变化的机制，想使用侦听器，先声明一个或多个侦听器。

侦听器分为 方法格式的侦听器、对象格式的侦听器、深度侦听

方法格式的侦听器

用于监听单个属性的变化，监听哪个数据变化就把哪个数据作为方法名 新值在前旧值在后

data(){
    return{
      username: '', //当需要监听username的时候
    }
},
 
watch:{
    //监听 username 的数据变化
    //newVal当前的数据 oldVal之前的数据 
    username(newVal,oldVal){
       console.log("新值:"+newVal,"旧值:"+oldVal);
    }
}

对象格式的侦听器  

监听对象内部属性的变化 

data:{ 
     user{
         username: 'admin',
         age： 20
      }    
},
watch:{
    //定义对象格式的侦听器
    user: {
       //侦听器的处理函数
       handler(newVal,oldVal){
          console.log("新值:"+newVal,"旧值:"+oldVal);
       },
       //为true时进入页面直接触发
       immediate: true，
       //为true时，vue会遍历递归对象内部的属性，监听它们的变化
       deep: true
    }，
   //如果要监听是对象的子属性的变化 就用单引号包裹
  'user.username'(newVal,oldVal){
       console.log("新值:"+newVal );
   },
}

 深度侦听 

深度侦听用于监听对象内部属性的变化，包括嵌套对象和数组 

 data:{ 
   info:{
      username: 'admin',
   }
},
watch:{
  //定义对象格式的侦听器
  info: {
     //侦听器的处理函数
     handler(newVal){
        console.log("新值:"+JSON.stringify(newVal) );
     },
     //开启深度监听 只要对象中任何一个属性变化都会触发监听器
     deep: true
  }
}

过滤器

用于对数据进行格式化和处理的功能。可以在输出前对数据进行转换，

过滤器有两种使用方式 分为私有过滤器和全局过滤器

私有过滤器是定义在Vue组件内部的，在 filters 组件下定义

全局过滤器是定义在Vue实例或Vue应用的全局范围内的过滤器，可在任何组件中使用

<div id="app">
      <!-- 过滤器用法 -->
      <h1>{{message | capi}}</h1>
                
      <h1>{{message | capi}}</h1>
</div>


//定义全局过滤器
Vue.filter('capi',function(str){
    const first =str.charAt(0).toUpperCase()
    const other = str.slice(1)
    return first + other + '全局';
})

export default{
    data: {  
        message: 'hello Vue!',
    },
    //私有过滤器
    filters: {
        capi(value) {
            //过滤器中一定要有返回值
            //charAt获取索引值 toUpperCase把获取的值转换成大写
            const first =value.charAt(0).toUpperCase()
            //slice截取索引后面的所有值
            const other = value.slice(1)
            return first + other + '私有';
         }
    },
}

过滤器的好处: 代码重用、代码简洁、可维护性