Vue watch 选项

示例

在里面使用观察者watch选项使得无法选择 20 到 70 之间的值<input type="range">。

export default {
  data() {
    return {
      rangeVal: 4
    };
  },
  watch: {
    rangeVal(val) {
      if( val>20 && val<70) {
        if(val<40){
          this.rangeVal = 20;
        }
        else {
          this.rangeVal = 70;
        }
      }
    }
  }
};

运行示例 »

定义和用法

这个watchoption 是一个对象，其中包含在 Vue 实例上声明的所有观察者。

观察器是一个与数据属性或计算属性同名的函数。每当同名的属性发生更改时，都会自动调用观察程序。

当调用观察程序时，新值和以前的值可作为观察程序函数的参数。

观察者也可以是点分隔的路径，例如tiger.weight，这样只有当weight的属性tiger对象改变了。

笔记：声明观察者时应避免箭头函数，因为无法使用以下函数从此类函数内部访问 Vue 实例this关键字。

使用对象语法编写观察程序时（请参见下面的示例），可以使用以下选项：

Option	Description
handler	This is where the watch function is written.
'method name'	A watcher can be set up to call a method by providing the method name as a string.
deep	Default value is 'false'. If the watcher is deep, it also reacts to changes further down in the property the watcher is set up to watch.
immediate	Default value is 'false'. Triggers the watcher immediately after it is created. The old value will be 'undefined' the first time the watcher is triggered when 'immediate' is set to 'true'.
flush	Default value is 'pre'. Specify when to run the callback function relative to when the component is rendered. Possible values are 'pre', 'post' and 'sync'. Use this flush option with caution.
onTrigger/onTrack	Used for debugging. Only works in development mode.

笔记：观察者也可以使用创建$watch()方法。

更多示例

示例

使用带有对象语法的观察者。

<template>
  <h2>Example watch Option</h2>
  <p>The 'rangeVal' watcher is written with the object syntax, with immediate: true, so that rangeVal is moved to '70' when the page first loads:</p>
  <input type="range" v-model="rangeVal">
  <p>rangeVal: <span>{{ rangeVal }}</span></p>
</template>

<script>
export default {
  data() {
    return {
      rangeVal: 40
    };
  },
  watch: {
    rangeVal: {
      handler(val) {
        if (val > 20 && val < 70) {
          if (val < 40) {
            this.rangeVal = 20;
          }
          else {
            this.rangeVal = 70;
          }
        }
      },
      immediate: true
    }
  }
};
</script>

<style>
span {
  padding: 3px;
  font-weight: bold;
  font-family: 'Courier New', Courier, monospace;
  background-color: lightgreen;
}
</style>

运行示例 »

码农教程 - 一技在手,衣食无忧!

Vue watch 选项

示例

定义和用法

更多示例

示例

相关页面