Vue3+tsx（watch监听）

最新推荐文章于 2025-06-04 09:00:33 发布

原创最新推荐文章于 2025-06-04 09:00:33 发布 · 2.3k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#typescript #javascript

本文记录了在Vue中使用watch监听数据变化的场景，特别是在setup语法下的使用方式。通过watch监听Data对象的变化，并在数据更新时执行相应操作。在render函数中，Slider组件会改变Data.data，因此需要确保Data是响应式的。本文旨在解决不同环境下watch语法不一致的问题，方便日后查阅。

今天又用到了监听watch，因为用的次数不多，每次都有些格式的遗忘，都会往前面去找之前怎么写的，所以特地记录一下，以后都往这儿翻就完事儿了

监听数据的变化watch

setup(props){
    let Data = reactive({id:props.option.value,data:0});

    watch(Data,(newValue)=>{
      console.log('Data',newValue)
    })

    return {Data}
  },



render() {
    const { option, item, form, Data } = this;
    return h(<div class="rounded-lg w-full my-1 py-2 px-2 bg-gray-50 ">
      <div class="mb-3">{option.content}</div>
      <div class=" flex flex-row justify-center my-2 ">
        {
          item.scores[option.value] ?
            <div class="w-12 py-1 rounded-xl bg-green-200 mr-5 text-center">{item.scores[option.value]}</div> :
            <div class="w-12 py-1 rounded-xl bg-gray-200 mr-5 text-center">0</div>
        }

        <div class="w-full flex items-center">
          <div class="w-full">
            <Slider barHeight="16px" activeColor="#30C2B7" v-model={Data.data} max={10} onUpdate:modelValue={item.onChange(option)} />
          </div>
        </div>
      </div>
    </div>);
  }

在setup中先申明响应式对象Data 然后再不断watch Data的变化从而做出操作

render中的Slider会导致Data.data数据改变所以一定得设置Data为响应式的否则无法监听到

主要是不同的环境有些watch的格式多多少少有些差异特此记录