vue之监听属性watch

这几天在项目中用到了vue监听的属性watch，对深度监听和一般监听有了更深的了解，下面给小伙伴们简单的讲解一下。

直接上代码，下面这一段代码是一般监听，主要监听一般变量。

<template>
  <input type="number" v-model="number" />
</template>

<script>
export default {
  name: "Counter",
  data: function() {
    return {
      number: 0,
    };
  },
  watch: {
    number: function(newV, oldV) {
      console.log('counter change to %d from %d', newV, oldV);
    },
  }
};
</script>

如果要监听对象的话，需要在监听的函数中加入一个属性（deep:true），可以对对象的每一层进行监听，但是会造成性能损耗。

<template>
  <input type="number" v-model="number" />
</template>

<script>
export default {
  name: "Counter",
  data: function() {
    return {
      number: 0,
    };
  },
  watch: {
    number: {
    handler: function(newValue, oldValue) {
      console.log('counter', newValue, oldValue);
    },
    deep:true
    }
  }
};
</script>

还有一种情况就是变量触发时监听回调，这样在赋初值时就会触发监听函数，通过增加属性值（immediate:true）,写法与deep一样其中第一个参数为初始值，第二个参数为underfined。

<template>
  <input type="number" v-model="number" />
</template>

<script>
export default {
  name: "Counter",
  data: function() {
    return {
      number: 0,
    };
  },
  watch: {
    number: {
    handler: function(newValue, oldValue) {
      console.log('counter', newValue, oldValue);
    },
    immediate: true,
    }
  }
};
</script>

以上就是小编关于vue监听函数watch属性的一点认识，希望可以帮助到各位。