【Vue】监watchEffect

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>