vue2watch监听props

如何在 Vue 2 中使用 watch 来监听 props 的变化
为了实现对组件属性 (props) 变化的响应，在定义组件时可以利用 watch 属性。当父级组件传递给子组件的数据发生变化时，通过设置观察者 (Watcher)，可以在数据更新时执行特定逻辑。
下面是一个具体的例子展示如何配置一个名为 blog-post 的组件去监视来自其父组件传入的 title prop 是否发生了改变：
app.component('blog-post', {
props: ['title'],
data() {
return {};
},
watch: {
title(newValue, oldValue) {
console.log(`The title has been updated from "${oldValue}" to "${newValue}".`);
// 执行其他必要的操作...
}
},
template: `<h4>{{ title }}</h4>`
});
登录后复制
在这个案例里，每当 title 发生变动时就会触发相应的处理函数，并接收新旧两个版本的值作为参数[^1]。
对于更复杂的情况，比如想要监控整个对象或数组类型的 prop 内部深层结构的变化，则需确保设置了 {deep:true} 选项以便深入检测内部成员的变化情况。这可以通过如下方式完成：
export default {
...
props: ["notes"],
watch: {
notes: {
handler(newNotes, oldNotes){
this.masonry.reloadItems();
this.masonry.layout();
},
deep: true,
immediate: false
}
},
mounted(){
this.masonry = new Masonry(this.$refs.notesContainer, {...})
}
}
登录后复制
这里展示了怎样在一个假设性的笔记列表组件中监听 notes 数组及其元素内的任何更改并作出反应[^2]。