Vue真的超级好用，能让你迅速做出好看的UI！你想了解如何使用watch处理数据变化吗？这可是你想要的下面有细致的教程，跟着嘻嘻嘻开始学习吧～
1. watch属性是什么鬼
时间到了，给大家科普个新知识哈——Watcher属性不就是像vue组件option里的小保镖，你的内容有任何风吹草动，这哥们儿立马出现通风报信。别小看这货，它不仅可以监控单个属性，还能管全局！
2.听多个属性？没问题！
Vue.component('my-component', {
data() {
return {
message: 'Hello Vue!',
};
},
watch: {
message(newValue, oldValue) {
console.log('message的值从', oldValue, '变为', newValue);
},
},
});
保存好了嘞.看这儿,vue的厉害就在于它只要发现firstName或者lastName中有任何变动,立马就能有回馈.这个功能真的炒鸡好用,让你可以随时随地在线观察数据的变化哦!
3.监听嵌套对象属性
什么都不用说了！要查看嵌套对象中的特性，简简单单的，一点鼠标就行。就比如我们现在说的这个例子，盯着’person’中的’firstName’和’lastName’看就对了。
Vue.component('my-component', {
data() {
return {
firstName: '',
lastName: '',
};
},
watch: {
firstName: function(newValue, oldValue) {
console.log('firstName的值从', oldValue, '变为', newValue);
},
lastName: function(newValue, oldValue) {
console.log('lastName的值从', oldValue, '变为', newValue);
},
},
});
4.动态添加和移除watch监听器
话说，你知道吗？不仅在组件设置里能用watches，用Vue的那个厉害的$watch方法也是行的！就像这样，我们把message作为观察对象放进去$watch，然后只要message变量一变化，相关操作就会自动执行了！
Vue.component('my-component', {
data() {
return {
person: {
firstName: '',
lastName: '',
},
};
},
watch: {
'person.firstName': function(newValue, oldValue) {
console.log('firstName的值从', oldValue, '变为', newValue);
},
'person.lastName': function(newValue, oldValue) {
console.log('lastName的值从', oldValue, '变为', newValue);
},
},
});
5. watch帮助我们做什么
想去试试超快的Watch监听器？真的很实用，感觉就像是随身带了个小秘书，随时能知道数据动态。不论是单个属性，还是整体全部的属性，甚至包括多层嵌套的复杂属性，哪怕只有一点点变化也能马上告诉你
6. Vue版本差异
const vm = new Vue({
data() {
return {
message: 'Hello Vue!',
};
},
});
// 添加watch监听器
vm.$watch('message', function(newValue, oldValue) {
console.log('message的值从', oldValue, '变为', newValue);
});
别忘了这代码可是用Vue 2.x编写的。虽然版本改了，但基本操作啥的，看看教程调整一下就好哟~
Vue中的Watch功能太好用！设好了Watch，数据一有变动就能立马通知我们，而且还能及时做出调整。更棒的是，如果觉得需要增减监控器，直接用$watch就行了~不管是在组件参数中设Watch还是直接点$，都能帮你轻松掌控数据更新，提升应用流畅度。
评论0