watch

监控一个值的变化，并调用因为变化需要执行的方法
当某个数据发生变化的时候，所有依赖这个数据的相关数据都自动发生变化，自动调用相关函数去实现数据的变动。

前后监控实例

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
  9.     <title>Document</title>
  10. </head>
  12. <body>
  13.     <div id="computed_props">
  14.         千米 : <input type="text" v-model="kilometers">
  15.         米 : <input type="text" v-model="meters">
  16.     </div>
  17.     <p id="info"></p>
  18.     <script type="text/javascript">
  19.         var vm = new Vue({
  20.             el: '#computed_props',
  21.             data: {
  22.                 kilometers: 0,
  23.                 meters: 0
  24.             },
  25.             methods: {},
  26.             computed: {},
  27.             watch: {
  28.                 kilometers: function (val) {
  29.                     this.kilometers = val;
  30.                     this.meters = this.kilometers * 1000
  31.                 },
  32.                 meters: function (val) {
  33.                     this.kilometers = val / 1000;
  34.                     this.meters = val;
  35.                 }
  36.             }
  37.         });
  38.         // $watch 是一个实例方法
  39.         vm.$watch('kilometers', function (newValue, oldValue) {
  40.             // 这个回调将在 vm.kilometers 改变后调用
  41.             document.getElementById("info").innerHTML = "修改前值为: " + oldValue + "，修改后值为: " + newValue;
  42.         })
  43.     </script>
  44. </body>
  46. </html>