watch的用法，没成功

原创已于 2022-12-24 14:07:45 修改

· 526 阅读

0 ·

版权

文章标签：

#javascript #vue.js #前端

于 2022-12-24 13:53:30 首次发布

vue 专栏收录该内容

722 篇文章

订阅专栏

本文通过三个示例探讨了Vue.js中的ref和watch用法。第一个例子展示了如何在模板中使用button点击改变counter值，并通过watch监听变化。第二个例子错误地尝试将counter的值设为字符串，导致类型错误。第三个例子中，尝试直接在模板中使用counter++，但这种方式不会触发watch监听。总结了在Vue中正确管理和更新响应式属性的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<template>
  <div>
    <button @click="changeCounter">确认</button>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue'

const counter = ref(0)
//counter.value++ 
const changeCounter = () => { 
  counter.value++
}

watch(counter, (newValue, oldValue) => {
  console.log('The new counter value is: ' + counter.value)
  console.log("new counter======{}==",newValue);
  console.log("old counter======{}==",oldValue);
})

return {
      counter,
      changeCounter
    }
</script>

错误

<template>
  <div>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue'
const counter = ref(0)
counter.value = '5'
watch(counter, (newValue, oldValue) => {
  console.log('The new counter value is: ' + counter.value)
})

</script>

这个为啥不行？

<template>
  <div id="app">
    <p>计数器：{{ counter }}</p>
    <el-button type="primary" @click="counter++">
      Click
    </el-button>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue'
  const counter = ref(0)
  watch(counter, (newValue, oldValue) => {
   console.log('The new counter value is: ' + counter.value)
})
</script>