vue.js 监听数据变化

new Vue({
el: '#app',
data: {
firstName: 'John',
lastName: 'Doe'
},
computed: {
fullName: function() {
return this.firstName + ' ' + this.lastName;
}
}
});

new Vue({
el: '#app',
data: {
question: '',
answer: 'I cannot give you an answer until you ask a question!'
},
watch: {
// 当 question 发生改变时，这个函数就会运行
question: function(newQuestion) {
this.answer = 'Waiting for you to stop typing...';
this.debouncedGetAnswer();
}
},
created: function() {
// _.debounce 是 lodash 的一个方法，用于延迟执行
// 这里我们设置了一个 500ms 的延迟
this.debouncedGetAnswer = _.debounce(this.getAnswer, 500);
},
methods: {
getAnswer: _.debounce(
function() {
if (this.question.indexOf('?') === -1) {
this.answer = 'Questions usually contain a question mark. ;-)';
return;
}
this.answer = 'Thinking...';
// 进行异步操作获取答案
},
500
)
}
});

new Vue({
el: '#app',
data: {
items: []
},
updated: function() {
console.log('The items array has changed!');
}
});

watch: {
deeplyNestedObject: {
handler(newValue, oldValue) {
// 处理深层对象的变化
},
deep: true
}
}