vue3 watch监听字符串

在Vue3中，使用watch来监听字符串的变化与监听其他类型的数据变化是一样的。下面是一个简单的例子：

<template>
  <div>
    <input type="text" v-model="cityName" />
    <p>您输入的城市名是：{{ cityName }}</p>
  </div>
</template>

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

export default {
  setup() {
    const cityName = ref('');

    watch(cityName, (newVal, oldVal) => {
      console.log(`您输入的城市名从 ${oldVal} 变为了 ${newVal}`);
    });

    return {
      cityName,
    };
  },
};
</script>

在上面的例子中，我们使用了Vue3的Composition API来编写组件。在`setup`函数中，我们使用`ref`函数来定义了一个响应式的字符串变量`cityName`，并使用`watch`函数来监听它的变化。当`cityName`的值发生变化时，`watch`函数会自动调用回调函数，并将新值和旧值作为参数传递给它。在回调函数中，我们可以对新值和旧值进行处理，例如打印出来或者进行其他操作。

相关问题

vue3中watch 监听字符串

在Vue3中，watch监听字符串的方式与Vue2相同。可以使用字符串形式来监听对象中的某一个属性的值。例如，可以使用以下代码来监听form对象中id属性的变化：

watch: {
'form.id': {
handler(newVal, oldVal) {
console.log(oldVal)
console.log(newVal)
},
deep: true,
immediate: true
}
}

这段代码中，'form.id'表示要监听的属性路径，handler函数是当属性值发生变化时要执行的回调函数，deep:true表示要进行深度监听，immediate:true表示在初始值时立即执行handler函数。

vue watch 监听字符串示例

可以使用 Vue 的 watch 属性来监听字符串的变化，示例代码如下：

<template>
  <div>
    <input v-model="myString" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      myString: ''
    }
  },
  watch: {
    myString(newVal, oldVal) {
      console.log(`字符串从 ${oldVal} 变为 ${newVal}`)
    }
  }
}
</script>

当输入框中的字符串发生变化时，控制台会输出相应的信息。