参考手册
Vue 组件实例
Vue $nextTick() 方法
返回 Vue 组件实例

Vue $watch() 方法

实例

使用 $watch() 方法创建一个观察程序，该观察程序在每次 'value' 数据属性更改时都会写入一条新消息。

  1. mounted() {
  2.   this.$watch('value', function() {
  3.     this.results.push('$watch() method')
  4.   })
  5. }
运行一下

定义与用法

$watch() 方法用于创建观察程序 watcher。

$watch() 方法返回一个停止函数，我们可以使用它来停止观察程序。

设置 watcher 观察程序是为了观察值的变化（第一个参数），并在发生变化时执行某些操作（第二个参数）。也可以为观察者定义其他属性（第三个参数）。

参数描述
watch source必填。第一个参数是 watcher 的来源这可以是组件属性名称字符串（上面的实例）、简单的分隔点（实例5）或函数（实例6）。
callback function第二个参数是当观察源发生更改时运行的回调函数回调函数可以设置为接收观察源的新值和旧值作为参数（参见实例1）。
options object可选。在这里，我们可以指定选项 deep、immediate、flush 和 onTrigger/onTrack。

deep: 默认值是 'false'。观察程序是 deep 的，它也会对观察者设置为观察的属性中的进一步更改做出反应。

immediate: 默认值是 'false'。在观察程序创建后立即触发它当 immediate 设置为 true 时，第一次触发观察程序时，旧值将为 undefined。

flush: 默认值是 'pre'。指定相对于组件渲染时运行回调函数的时间可能的值为 pre、post 和 sync 小心使用此选项。

onTrigger/onTrack: 用于调试仅适用于开发模式。

更多实例

实例 1

每次 'value' 数据属性更改时，使用 $watch() 方法编写一条包含新旧值的新消息。

  1. <template>
  2.   <h2>Example $watch() Method</h2>
  3.   <p>Drag the slider to change the value so that the $watch() method is triggered. The callback function writes a message with the new and old values.</p>
  4.   <div>
  5.     <p><input type="range" min="0" max="10" v-model="value"> Current value: {{ value }}</p>
  6.     <ol>
  7.       <li v-for="x in results">{{ x }}</li>
  8.     </ol>
  9.   </div>
  10. </template>
  12. <script>
  13. export default {
  14.   data() {
  15.     return {
  16.       value: 4,
  17.       results: []
  18.     };
  19.   },
  20.   mounted() {
  21.     this.$watch('value', function(newVal, oldVal) {
  22.       this.results.push('Old value:'+oldVal+', new value: '+newVal)
  23.     })
  24.   }
  25. };
  26. </script>
  28. <style scoped>
  29. div {
  30.   border: solid black 1px;
  31.   padding: 10px;
  32. }
  33. </style>
运行一下
实例 2

使用 $watch() 方法，deep watch 选项设置为 true。观察程序现在可以进一步检测 'value' 对象内部的更改。

  1. <template>
  2.   <h2>Example $watch() Method</h2>
  3.   <p>Register an extra hobby for Stuart. The hobbies are stored in an array inside the 'value' object. The $watch() method
  4.     is triggered because the 'deep' option is set to 'true' so that the watcher also detects changes further inside the
  5.     object.</p>
  6.   <div>
  7.     <p>Register an extra hobby for Stuart:</p>
  8.     <p><input type="text" ref="inpText"></p>
  9.     <button v-on:click="regHobby">Register</button>
  10.     <ol>
  11.       <li v-for="x in watchMessages">{{ x }}</li>
  12.     </ol>
  13.   </div>
  14.   <p>Current 'value' object:</p>
  15.   <pre>{{ this.value }}</pre>
  16. </template>
  18. <script>
  19. export default {
  20.   data() {
  21.     return {
  22.       value: {
  23.         owner: 'Stuart',
  24.         address: 'Faraway Lane',
  25.         hobbies: ['Bird watching', 'Trail running']
  26.       },
  27.       watchMessages: []
  28.     };
  29.   },
  30.   methods: {
  31.     regHobby() {
  32.       this.value.hobbies.push(this.$refs.inpText.value);
  33.       this.$refs.inpText.value = null;
  34.       this.$refs.inpText.focus();
  35.     }
  36.   },
  37.   mounted() {
  38.     this.$watch('value', function () {
  39.       this.watchMessages.push('watcher triggered')
  40.     }, {
  41.       deep: true
  42.     });
  43.   }
  44. };
  45. </script>
  47. <style scoped>
  48. div {
  49.   border: solid black 1px;
  50.   padding: 10px;
  51. }
  53. li {
  54.   background-color: lightgreen;
  55. }</style>
运行一下
实例 3

使用 $watch() 方法，并将 immediate watch 选项设置为 true。watcher 现在也会在创建后立即触发。

  1. <template>
  2.   <h2>Example $watch() Method</h2>
  3.   <p>With the 'immediate' option set to 'true' the watcher is also triggered right after it is created.</p>
  4.   <div>
  5.     <input type="range" min="0" max="10" v-model="value"> Current value: {{ value }}
  6.     <p>Messages from the watcher:</p>
  7.     <ol>
  8.       <li v-for="x in watchMessages">{{ x }}</li>
  9.     </ol>
  10.   </div>
  11. </template>
  13. <script>
  14. export default {
  15.   data() {
  16.     return {
  17.       value: 4,
  18.       watchMessages: []
  19.     };
  20.   },
  21.   mounted() {
  22.     this.$watch('value', (newVal, oldVal) => {
  23.       this.watchMessages.push('Old value: '+oldVal+' New value: '+newVal)
  24.     }, {
  25.       immediate: true
  26.     });
  27.   }
  28. };
  29. </script>
  31. <style scoped>
  32. div {
  33.   border: solid black 1px;
  34.   padding: 10px;
  35. }
  37. li:first-child {
  38.   background-color: lightgreen;
  39. }</style>
运行一下
实例 4

使用 $watch() 方法返回的 stop 函数来停止观察程序。

  1. <template>
  2.   <h2>Example $watch() Method</h2>
  3.   <p>Drag the slider to see the watcher work, click the stop button, and drag the slider again to confirm that the watcher has now stopped.</p>
  4.   <div>
  5.     <p><input type="range" min="0" max="10" v-model="value"> Current value: {{ value }}</p>
  6.     <button v-on:click="stopFunc">Stop Watcher</button>
  7.     <ol>
  8.       <li v-for="x in results">{{ x }}</li>
  9.     </ol>
  10.   </div>
  11. </template>
  13. <script>
  14. export default {
  15.   data() {
  16.     return {
  17.       value: 4,
  18.       results: [],
  19.       stopFunc: null
  20.     };
  21.   },
  22.   mounted() {
  23.     this.stopFunc = this.$watch('value', function() {
  24.       this.results.push('$watch() method')
  25.     })
  26.   }
  27. };
  28. </script>
  30. <style scoped>
  31. div {
  32.   border: solid black 1px;
  33.   padding: 10px;
  34. }
  35. </style>
运行一下
实例 5

使用点分隔，以便 $watch() 方法可以监听 'value' 对象内的 'country' 属性。

  1. <template>
  2.   <h2>Example $watch() Method</h2>
  3.   <p>The watcher is set up to watch 'value.country' and will therefore detect when the country is changed inside the 'value' object.</p>
  4.   <div>
  5.     <p>Register a new country for Stuart to live in:</p>
  6.     <p><input type="text" v-model="inpVal"></p>
  7.     <button v-on:click="regHobby">Register</button>
  8.     <ol>
  9.       <li v-for="x in watchMessages">{{ x }}</li>
  10.     </ol>
  11.   </div>
  12.   <p>Current 'value' object:</p>
  13.   <pre>{{ this.value }}</pre>
  14. </template>
  16. <script>
  17. export default {
  18.   data() {
  19.     return {
  20.       inpVal: null,
  21.       value: {
  22.         owner: 'Stuart',
  23.         address: 'Faraway Lane',
  24.         country: 'Mexico'
  25.       },
  26.       watchMessages: []
  27.     };
  28.   },
  29.   methods: {
  30.     regHobby() {
  31.       this.value.country = this.inpVal;
  32.       this.inpVal = null;
  33.     }
  34.   },
  35.   mounted() {
  36.     this.$watch('value.country', function () {
  37.       this.watchMessages.push('watcher triggered')
  38.     });
  39.   }
  40. };
  41. </script>
  43. <style scoped>
  44. div {
  45.   border: solid black 1px;
  46.   padding: 10px;
  47. }
  48. </style>
运行一下
实例 6

使用 $watch() 方法中的函数来监听多个值的更改。

  1. <template>
  2.   <h2>Example $watch() Method</h2>
  3.   <p>Using a function as the first argument in the watcher to watch for changes in the sum of value A and value B.</p>
  4.   <div>
  5.     <p>Register a new country for Stuart to live in:</p>
  6.     <p>Value A: <input type="range" min="-10" max="20" v-model="inpValA"> {{ inpValA }}</p>
  7.     <p>Value B: <input type="range" min="-10" max="20" v-model="inpValB"> {{ inpValB }}</p>
  8.     <ol>
  9.       <li v-for="x in watchMessages">{{ x }}</li>
  10.     </ol>
  11.   </div>
  12. </template>
  14. <script>
  15. export default {
  16.   data() {
  17.     return {
  18.       inpValA: 2,
  19.       inpValB: 4,
  20.       watchMessages: []
  21.     };
  22.   },
  23.   mounted() {
  24.     this.$watch( 
  25.       ()=> Number(this.inpValA) + Number(this.inpValB), 
  26.       function (newVal,oldVal) {
  27.         this.watchMessages.push('watcher triggered. A + B = ' + newVal)
  28.       }
  29.     );
  30.   }
  31. };
  32. </script>
  34. <style scoped>
  35. div {
  36.   border: solid black 1px;
  37.   padding: 10px;
  38. }
  39. li {
  40.   background-color: lightgreen;
  41. }
  42. </style>
运行一下
Vue $nextTick() 方法

分类导航