下面就来详细讲解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技术站
微信扫一扫 
支付宝扫一扫 