vue1.0和vue2.0的watch监听事件写法详解

下面就来详细讲解Vue.js的watch监听事件写法。

什么是Vue.js的watch监听事件

在Vue.js中，watch监听是Vue实例中一个非常重要的属性。它可用于监控Vue实例数据的变化，并在数据变化时立即做出响应操作。

Vue.js的watch监听事件用于监控数据变化的情况下执行一些操作。比如：当数据变化时，需要向服务器发送请求，或根据数据变化对DOM元素进行操作等。

vue1.0版本watch监听事件写法详解

在Vue1.0版本中，监听数据变化分为两种方式：$.watch和$set。其中，$.watch可以监听具体某个数据变化的情况，而$set是一个全局性的数据监听方法。

1. $.watch监听某个具体数据变化的方式

具体示例如下：

<body>
  <div id="app">
    <p>{{message}}</p>
  </div>
</body>

var vm = new Vue({
  el: '#app',
  data: {
    message: 'Hello,World!'
  }
})

vm.$.watch('message', function (newValue, oldValue) {
  console.log('message发生了变化')
})

2. $set全局监听方式

在Vue1.0中，可使用$set全局监听到所有数据的变化。我们需要将所有的数据都放到一个对象中，然后能够通过这个对象$set实现全局监听。

具体示例如下：

<body>
  <div id="app">
    <p>{{obj.message}}</p>
  </div>
</body>

var vm = new Vue({
  el: '#app',
  data: {
    obj: {
      message: 'Hello,World!'
    }
  }
})

Vue.$.watch(vm, function () {
  console.log('obj中的任意数据发生变化')
})

vue2.0版本watch监听事件写法详解

在Vue2.0版本中，watch监听事件发生了一些变化。使用watch属性对数据进行监听时，需要使用深度监听的方式，并且需要指定一个handler作为监听器。

1. watch监听具体某个数据变化

具体示例如下：

<body>
  <div id="app">
    <p>{{message}}</p>
  </div>
</body>

var vm = new Vue({
  el: '#app',
  data: {
    message: 'Hello,World!'
  },
  watch: {
    message: function (newValue, oldValue) {
      console.log('message发生了变化')
    }
  }
})

2. watch监听所有数据变化

同样在Vue2.0中，我们可以使用watch属性进行全局监听。我们只需要在watch里面指定deep: true即可实现全部监听。

具体示例如下：

<body>
  <div id="app">
    <p>{{obj.message}}</p>
  </div>
</body>

var vm = new Vue({
  el: '#app',
  data: {
    obj: {
      message: 'Hello,World!'
    }
  },
  watch: {
    obj: {
      handler: function () {
        console.log('obj中的任意数据发生变化')
      },
      deep: true
    }
  }
})

以上便是Vue.js的watch监听事件写法详解，希望对你有所帮助！

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：vue1.0和vue2.0的watch监听事件写法详解 - Python技术站