实例 Vue 使用 $watch() 方法，并将 immediate watch 选项设置为 true

<template>

  <h2>Example $watch() Method</h2>

  <p>With the 'immediate' option set to 'true' the watcher is also triggered right after it is created.</p>

  <div>

    <input type="range" min="0" max="10" v-model="value"> Current value: {{ value }}

    <p>Messages from the watcher:</p>

    <ol>

      <li v-for="x in watchMessages">{{ x }}</li>

    </ol>

  </div>

</template>

​

<script>

export default {

  data() {

    return {

      value: 4,

      watchMessages: []

    };

  },

  mounted() {

    this.$watch('value', (newVal, oldVal) => {

      this.watchMessages.push('Old value: '+oldVal+' New value: '+newVal)

    }, {

      immediate: true

    });

  }

};

</script>

​

<style scoped>

div {

  border: solid black 1px;

  padding: 10px;

}

​

li:first-child {

  background-color: lightgreen;

}</style>