【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>

原文地址：https://blog.csdn.net/m0_69886881/article/details/135712127

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！