Vue 监听元素前后变化值实例

下面是Vue监听元素前后变化值实例的完整攻略。

1. 监听Vue中元素的前后变化值

在Vue中，我们可以利用watch属性来监听元素的前后变化值。实现方式如下：

watch: {
  value: function (newVal, oldVal) {
    console.log(`Value 值由 ${oldVal} 变为 ${newVal}`)
  }
}

上述代码会在value值发生改变时输出变化前和变化后的值。

2. 将Vue监听功能封装成全局组件

为了方便我们的使用，我们可以将Vue监听功能封装成一个全局组件，如下所示：

Vue.component('watcher', {
  template: '<div></div>',
  props: ['value'],
  watch: {
    value: function (newVal, oldVal) {
      console.log(`Value 值由 ${oldVal} 变为 ${newVal}`)
    }
  }
})

然后在Vue实例中使用该全局组件：

<watcher :value="myValue"></watcher>

上述代码将myValue值传递给了watcher组件，当myValue的值发生改变时，watcher组件中的watch函数会自动执行，并输出变化前和变化后的值。

示例1：监听input元素的改变

下面是一个监听输入框(input元素)的值变化的示例：

<div id="app">
  <input v-model="inputValue">
  <watcher :value="inputValue"></watcher>
</div>

new Vue({
  el: '#app',
  data: {
    inputValue: ''
  },
  components: {
    watcher: {
      template: '<div></div>',
      props: ['value'],
      watch: {
        value: function (newVal, oldVal) {
          console.log(`Value 值由 ${oldVal} 变为 ${newVal}`)
        }
      }
    }
  }  
})

在上述代码中，我们监听了inputValue值的变化，并将其传递给了watcher组件。当输入框的值改变时，watcher组件会自动执行watch函数并输出变化前后的值。

示例2：监听v-for循环的元素

下面是一个监听v-for循环的元素变化的示例：

<div id="app">
  <ul>
    <li v-for="item in list">
      {{ item }}
      <watcher :value="item"></watcher>
    </li>
  </ul>
</div>

new Vue({
  el: '#app',
  data: {
    list: ['apple', 'banana', 'orange']
  },
  components: {
    watcher: {
      template: '<div></div>',
      props: ['value'],
      watch: {
        value: function (newVal, oldVal) {
          console.log(`Value 值由 ${oldVal} 变为 ${newVal}`)
        }
      }
    }
  }  
})

在上述代码中，我们监听了list数组中每个元素的变化，并将每个元素作为参数传递给watcher组件。当数组中的元素改变时，对应的watcher组件会自动执行watch函数并输出变化前后的值。

以上就是关于Vue监听元素前后变化值实例的详细讲解。