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

一、vue过滤器

过滤器（filters)是vue为开发者提供的功能，常用于文本的格式化。过滤器可以用在两个地方，插值表达式和v-bind属性绑定。
注意：过滤器仅在vue2.x和1.x中受支持，vue3.x剔除了过滤器相关的功能

使用

过滤器应放在js表达式的尾部，和管道符 “|” 一起使用

分类

私有过滤器 定义在filters节点下，只能在当前vm实例所控制的el区域中使用的过滤器。

<div id="app">
    <!-- 过滤器写在管道符后面 -->
    <p>message的值是:{{msg|capi(10)|cap}}</p>
  </div>
  <script>
    const vm = new Vue({
      el: "#app",
      data: {
        msg: "hello vue.js"
      },
      //过滤器函数必须被定义到filters节点中
      //过滤器本质上是一个函数
      filters: {
        //过滤器中第一个形参永远是管道符前面那个值
        capi(a) {
          //过滤器中一定要有返回值
          return a[0].toUpperCase() + a.slice(1);
        },
        cap(val) {
          return val + 1;
        }
      }
    })
  </script>

运行结果

message的值是:Hello vue.js1

全局过滤器 可以在多个vue实例之间共享的过滤器。

<div id="app1">
    <!-- 使用的是私有过滤器 -->
    <p>值是:{{msg|capi}}</p>
  </div>
  <div id="app2">
    <!-- 使用的是全局过滤器 -->
    <p>值是:{{msg|capi}}</p>
  </div>
  <script>
    // 定义全局过滤器
    Vue.filter("capi", (str) => {
      return str[0].toUpperCase() + str.slice(1) + "~~~";
    })
    
    const vm1 = new Vue({
      el: "#app1",
      data: {
        msg: "hello vue.js,vm1",
      },
      //定义私有过滤器
      filters: {
        capi(val) {
          return val[0].toUpperCase() + val.slice(1);
        }
      }
    })
    const vm2 = new Vue({
      el: "#app2",
      data: {
        msg: "hello vue.js,vm2"
      }
      //vm2没有定义过滤器，但是数据源发生了改变，因为使用了全局过滤器
    })
  </script>

运行结果

值是:Hello vue.js,vm1
值是:Hello vue.js,vm2~~~

注意事项

1.过滤器本质上是一个函数
2.在过滤器函数中一定要有return值
3.过滤器函数的第一个参数永远都是管道符待处理的值，第二个参数开始才是传过来的值
4.过滤器可以串联使用

	<!-- 过滤器串联使用，接收的是过滤器处理后的值 -->
    <p>message的值是:{{msg|capi(10)|cap}}</p>

---

二、vue侦听器

watch侦听器允许开发者监视数据的变化，从而针对数据变化做特定的操作。只要数据源发生变化，就会触发操作。

用途

实时验证用户输入的用户名是否被占用

分类

方法格式侦听器 将要监听的属性以方法的形式写在watch中。

<div id="app">
    <input type="text" v-model="username">
  </div>
  <script>
    const vm = new Vue({
      el: "#app",
      data: {
        username: ""
      },
      //所有侦听器都应该被定义在watch节点上
      watch: {
        //侦听器本质上是一个函数，要监视那个数据的变化，就只要把数据名变为方法名即可
        username(newVal, oldVal) {
          //新值在前，旧值在后
          console.log(newVal, oldVal);
          //当username中的值发生改变时，就会执行username侦听器函数
        }
      }
    })
  </script>

缺点
1.无法在刚进入页面时，自动触发
2.如果对象中的属性值发生变化，无法监听到

对象格式监听器 j将要侦听的属性以对象的形式写在watch中。
handler侦听器函数

watch: {
	//对象格式的侦听器
    username: {
    	//侦听器处理函数:数据源发生变化时执行,函数名都是handler
        handler(newVal, oldVal) {
        	//新值在前，旧值在后
            console.log("abc");
        }
	}
},

可以通过往对象中添加一些属性完成一些功能
1.添加immediate属性，立即执行，不需要等到数据源发生变化再执行
2.添加deep属性，深度监听，当对象中的任何属性发生改变都可以监听到

添加immediate选项

watch: {
	//对象格式的侦听器
    username: {
    	//侦听器处理函数:数据源发生变化时执行,函数名都是handler
        handler(newVal, oldVal) {
        	//新值在前，旧值在后
            console.log("abc");
        },
        //立即执行侦听器函数
        immediate:true
	}
},

添加deep选项
缺点：对象info中的任何一个值发生变化都会触发侦听器函数，不论是username还是age。

 <div id="app">
    <input type="text" v-model="info.username"><br>
    <input type="text" v-model="info.age">
  </div>
  <script>
    const vm = new Vue({
      el: "#app",
      data: {
        info: {
          username: "admin",
          age: 18
        },
      },
      watch: {
        //监听对象里的所有属性
        info: {
          //info对象中的每一个属性发生变化都会触发handler函数
          handler(newVal, oldVal) {
            console.log("abc");
          },
          immediate: true,
          deep: true
        }
      }
    })
  </script>

为了让对应的属性发生，而不是所有属性发生变化才执行侦听器函数，采用另外一种写法。

//监听对象里的单个属性,这样只有username发生变化时才会触发侦听器函数，age发生变化时不会
'info.username': {
	handler() {
		console.log("abc");
	},
	immediate: true,
	deep:true
}

三、计算属性