<!DOCTYPE html>
<html>
<body>
<div id="app">
<div>年龄: <input type="text" v-model="person.age"></div>
<p v-if="info">{
{
info }}</div>
</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
const app = Vue.createApp({
data() {
return {
person: {
age: 0,
name: 'lisi'
},
info: ''
}
},
watch: {
person: {
handler(val, oldVal) {
if(val.age >= 18)
this.info = '已成年';
else
this.info = '未成年';
},
deep: true,
immediate: true
}
}
}).mount('#app')
</script>
</body>
</html>
watch 的一个特点是，最初绑定的时候是不会执行的，要等到 监听的属性 改变时才执行监听计算。那我们想要一开始就让他最初绑定的时候就执行改怎么办呢？
immediate表示在watch中首次绑定的时候，是否执行handler，值为true则表示在watch中声明的时候，就立即执行handler方法，值为false，则和一般使用watch一样，在数据发生变化的时候才执行handler。
https://blog.csdn.net/MCQq123321/article/details/84100961