Vue监听数据变化

Vue监听数据

1、watch的基本用法

侦听器的书写位置
写在export default中与data和methods用,隔开

<script>
  export default {
    name: "app",
    // 数据 key---data value---Function
    data: function () {
      return {
         count: 1
      };
    },
    // 方法 key---methods value---{}
    methods: {},
    //在export default中添加即可不用管顺序
    watch: {
       //监听内容
       count() {
        console.log("count发生了变化");
      }
    }
  };
</script>
// 监听器里的方法一定要与被监听的变量名一致

2、侦听器的进阶用法

获取前一次的值
有的时候需要上一次的数据,再上一个案例中添加一个参数即可获取旧值

watch:{
    inputValue(value,oldValue) {
        // 第一个参数为新值，第二个参数为旧值，不能调换顺序
        console.log(`新值：${value}`);
        console.log(`旧值：${oldValue}`);
    }
}

3、handler方法和immediate属性

immediate: 可以让页面第一次渲染的时候去触发侦听器
handler: 监听到修改之后这个函数会执行
侦听器实际上是一个对象,里面包含了handler方法和其他属性:

<script>
  export default {
    name: "app",
    watch: {
      firstName: {
        handler: function (newName, oldName) {
          this.fullName = newName + " " + this.lastName;
        },
        immediate: true
      }
    }
  };
</script>