不加$watch好像{{ b }} 值没变化？
<!DOCTYPE html>
<html>
<div id="app">
<div>
<input type="number" v-model="a">
{{a}}
<input type="number" v-model="b">
{{b}}
<input type="number" v-model="c">
{{c.d}}
<input type="number" v-model="d">
{{c.e}}
{{a}}
b
{{ b }}
</div>
</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
const app = Vue.createApp({
data() {
return {
a: 1,
b: 2,
c: {
d: 3,
e: 4
}
}
}
}).mount('#app')
</script>
</html>
加了以后，好像是有变化。
<!DOCTYPE html>
<html>
<div id="app">
<div>
<input type="number" v-model="a">
{{a}}
<input type="number" v-model="b">
{{b}}
<input type="number" v-model="c">
{{c.d}}
<input type="number" v-model="d">
{{c.e}}
a
{{a}}
b
{{ b }}
</div>
</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
const app = Vue.createApp({
data() {
return {
a: 1,
b: 2,
c: {
d: 3,
e: 4
}
}
},
created() {
this.$watch('a', (newVal, oldVal) => {
})
this.$watch(
() => this.a + this.b,
(newVal, oldVal) => {
}
)
}
}).mount('#app')
</script>
</html>
也有变化，不知道$watch有什么用？
<!DOCTYPE html>
<html>
<div id="app">
<div>
<input type="number" v-model="a">
{{a}}
<input type="number" v-model="b">
{{b}}
<input type="number" v-model="c">
{{c.d}}
<input type="number" v-model="d">
{{c.e}}
</div>
<div>
a
{{a}}
b
{{ b }}
</div>
</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
const app = Vue.createApp({
data() {
return {
a: 1,
b: 2,
c: {
d: 3,
e: 4
}
}
}
}).mount('#app')
</script>
</html>