var app = new Vue({
el: '#app',
data: {
a: {
b: 'Hello',
c: 'world'
}
},
watch: {
a: function(newValue, oldValue) {
console.log(oldValue, newValue)
},
// 使用用于响应a对象多个属性的改动
// a: {
// handler: function(newValue, oldValue) {
// console.log('你修改了a对象(watch deep)', newValue, oldValue)
// },
// deep: true
// },
// 适合监听对象下的某一个属性
// 'a.c': function(newValue, oldValue) {
// console.log('你修改了a对象(a.c)', newValue, oldValue)
// }
// 另外一种更low的方式
// changeA: function(newValue, oldValue) {
// console.log('你修改了a对象(computed)', newValue, oldValue)
// }
},
// computed: {
// changeA() {
// return {
// b: this.a.b,
// c: this.a.c
// }
// }
// },
created() {
// 直接改变a对象下的c属性
this.a.c = 'haha'
}
});
<head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">
</script>
</head>
<body>
<div id="app">
{{ a.b + ' ' + a.c }}
</div>