watchEffect 监听所有响应式数据
在函数利用到哪个数据就监听哪个
<script setup>import { ref,computed,watchEffect} from 'vue' let hbs = ref([]); //装爱好的值let lengthOfHbs=ref(0);const publishHbsMessage=computed(()=>{return hbs.value.length>0?'Yes':'No'})watchEffect(()=>{lengthOfHbs=hbs.value.length})</script><template><div>吃 <input type="checkbox" name="hbs" v-model="hbs" value="吃"> 喝 <input type="checkbox" name="hbs" v-model="hbs" value="喝">玩 <input type="checkbox" name="hbs" v-model="hbs" value="玩">乐 <input type="checkbox" name="hbs" v-model="hbs" value="乐"><br>{{ hbs }}<br>{{ publishHbsMessage }}<br>{{ lengthOfHbs }}</div>
</template> <style scoped></style>