<!DOCTYPE html>
<html>
<div id="app">
<input type="text" v-model="name">{{name}}
<input type="text" v-model="age">{{age}}
<input type="text" v-model="obj.id">{{obj.id}}
<input type="text" v-model="obj.addr">{{obj.addr}}
</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
const app = Vue.createApp({
data() {
return {
name: "",
age: "",
obj: {
id: "1",
addr: "gz"
}
};
},
created() {
this.obj = {
id:"99",
addr:"gd"
}
// 用法一: this.$watch("要监听的值",(oldVal,newVal)=>{ })
//这样监听不到对象的变化的
this.$watch("obj", (newval, oldval) => {
console.log(newval);
console.log(oldval);
});
}
}).mount('#app')
</script>
</html>
可是,这样也监听不到值的变化啊?
<!DOCTYPE html>
<html>
<div id="app">
<input type="text" v-model="name">{{name}}
<input type="text" v-model="age">{{age}}
<input type="text" v-model="obj.id">{{obj.id}}
<input type="text" v-model="obj.addr">{{obj.addr}}
</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
const app = Vue.createApp({
data() {
return {
name: "",
age: "",
obj: {
id: "1",
addr: "gz"
}
};
},
created() {
this.obj = {
id:"99",
addr:"gd"
}
// 用法一: this.$watch("要监听的值",(oldVal,newVal)=>{ })
this.$watch("name", (newValue, oldValue) => {
console.log(newValue + "_新值");
console.log(oldValue + "_旧值");
});
}
}).mount('#app')
</script>
</html>
这样可以
<!DOCTYPE html>
<html>
<div id="app">
<input type="text" v-model="name">{{name}}
<input type="text" v-model="age">{{age}}
<input type="text" v-model="obj.id">{{obj.id}}
<input type="text" v-model="obj.addr">{{obj.addr}}
</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
const app = Vue.createApp({
data() {
return {
name: "",
age: "",
obj: {
id: "1",
addr: "gz"
}
};
},
created() {
this.obj = {
id:"99",
addr:"gd"
}
// 用法一: this.$watch("要监听的值",(oldVal,newVal)=>{ })
this.$watch("name", (newValue, oldValue) => {
console.log(newValue + "_新值");
console.log(oldValue + "_旧值");
});
//这样监听不到对象的变化的
},
watch: {
age: (newValue, oldValue) => {
console.log(newValue);
console.log(oldValue);
},
// 监听对象中的某个属性的变化
"obj.id":(newVal,oldVal)=>{
console.log(newVal);
console.log(oldVal);
},
//深度监听
obj:{
handler(newVal,oldVal){
console.log(newVal);
console.log(oldVal);
},
deep:true
}
}
}).mount('#app')
</script>
</html>
可是,这样也可以啊,
这个原文里面说不可以。
<!DOCTYPE html>
<html>
<div id="app">
<input type="text" v-model="name">{{name}}
<input type="text" v-model="age">{{age}}
<input type="text" v-model="obj.id">{{obj.id}}
<input type="text" v-model="obj.addr">{{obj.addr}}
</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
const app = Vue.createApp({
data() {
return {
name: "",
age: "",
obj: {
id: "1",
addr: "gz"
}
};
},
created() {
this.obj = {
id:"99",
addr:"gd"
}
//这样监听不到对象的变化的
this.$watch("obj", (newval, oldval) => {
console.log(newval);
console.log(oldval);
});
},
watch: {
age: (newValue, oldValue) => {
console.log(newValue);
console.log(oldValue);
},
// 监听对象中的某个属性的变化
"obj.id":(newVal,oldVal)=>{
console.log(newVal);
console.log(oldVal);
},
//深度监听
obj:{
handler(newVal,oldVal){
console.log(newVal);
console.log(oldVal);
},
deep:true
}
}
}).mount('#app')
</script>
</html>
完整版
<!DOCTYPE html>
<html>
<div id="app">
<input type="text" v-model="name">{{name}}
<input type="text" v-model="age">{{age}}
<input type="text" v-model="obj.id">{{obj.id}}
<input type="text" v-model="obj.addr">{{obj.addr}}
</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
const app = Vue.createApp({
data() {
return {
name: "",
age: "",
obj: {
id: "1",
addr: "gz"
}
};
},
created() {
this.obj = {
id:"99",
addr:"gd"
}
// 用法一: this.$watch("要监听的值",(oldVal,newVal)=>{ })
this.$watch("name", (newValue, oldValue) => {
console.log(newValue + "_新值");
console.log(oldValue + "_旧值");
});
//这样监听不到对象的变化的(似乎也可以?我加)
this.$watch("obj", (newval, oldval) => {
console.log(newval);
console.log(oldval);
});
},
watch: {
age: (newValue, oldValue) => {
console.log(newValue);
console.log(oldValue);
},
// 监听对象中的某个属性的变化
"obj.id":(newVal,oldVal)=>{
console.log(newVal);
console.log(oldVal);
},
//深度监听
obj:{
handler(newVal,oldVal){
console.log(newVal);
console.log(oldVal);
},
deep:true
}
}
}).mount('#app')
</script>
</html>