监视属性和过滤器

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第7天，点击查看活动详情

一。监视属性

1.当被监视的属性变化时，回调函数自动调用，进行相关操作

2.监视的属性必须存在，才能进行监视!

3.监视的两种写法:

(1). new Vue时 传入watch配置

     watch: {
      // 要侦听哪个属性，就以那个属性的名称为方法名，定义一个方法,
      // 当属性的值发生变化时，该方法就会执行。
      // 该方法，有两个参数，第一个参数是新值，第二参数是旧值
      name(nval, oval) {
        console.log(`数据发生改变了，新值是${nval}，旧值是${oval}`);
      },
    },

(2).通过vm。$watch监视

     vm.$watch("name", {
    handler(nval, oval) {
      console.log(`数据发生改变了，新值是${nval}，旧值是${oval}`);
    },
  });

4.深度监视

     watch: {
      emp: {
        deep: true, //开启深度监视
        immediate: true, ////初始化时让handler调用
        // 通过handler定义监视器的方法
        handler(nval, oval) {
            console.log("数据发生改变了");  
        },
      },
    },
    或者是
    vm.$watch("emp", {
      deep: true, //开启深度监视
      immediate: true, ////初始化时让handler调用
      handler(nval, oval) {
        console.log("数据发生改变了");
      },
    });

二。过滤器

1.什么是过滤器

对要显示的数据进行特定格式化后再显示(适用于一些简单逻辑的处理)。

2.语法:

①。注册过滤器: Vue 。filter(name , callback)或new Vue{filters:{}}

②。使用过滤器: {{ xxx|过滤器名}} 或v-bind:属性 = "xx|过滤 器名”

备注:
1.过滤器也可以接收额外参数、多个过滤器也可以串联
2.并没有改变原本的数据，是产生新的对应的数据 

3.用计算数据写( 计算属性一般用于针对性的计算，假设我们有很多数据要计算，就不太方便了 )

 computed: {
      // 定义一个计算属性，返回人民币价格
      rmb_price() {
        return `￥${this.goods1.price.toFixed(2)}`;
      },
      // 定义一个计算属性，返回美金价格
      us_price() {
        return `$${this.goods1.price.toFixed(2)}`;
      },
    },

4.过滤器写：过滤器只能在插值表达式 和 v-bind表达式中使用。通过“管道符” | 指定使用具体的过滤器。

原理就是将“管道符”左边的值传给“管道符”右边的方法去处理，并返回处理过后的结果。

①。局部过滤器写(局部过滤在另一个容器无法使用)

<h4>{{goods1.price | rmb}}</h4>
 <h4>{{goods1.price | us}}</h4>

filters: {
      rmb(val) {
        console.log(val);
        return `价格：￥${val.toFixed(2)}`;
      },
      us(val) {
        console.log(val);
        return `价格：$${val.toFixed(2)}`;
      },
    },

②。全局过滤器(可供多个容器使用)

 <h4>{{goods1.price | rmb}}</h4>
 <h4>{{goods1.price | us}}</h4>
 
  Vue.filter("rmb", function (val) {
    return `价格：￥${val.toFixed(2)}`;
  });
  Vue.filter("us", function (val) {
    return `价格：$${val.toFixed(2)}`;
  });