017.Vue3入门，侦听器的使用，响应式数据变化就自动执行

01、代码如下：

<template>
  <h3>侦听器</h3>
  <div>{{ msg }}</div>
  <button @click="undateHandle">修改</button>
</template>

<script>
export default {
  data() {
    return {
      msg: "好好学习"
    }
  },
  methods: {
    undateHandle() {
      this.msg = "天天向上"
    }
  },
  watch: {
    msg(newValue, oldValue) {
      console.log(newValue, oldValue)
    }
  }
}
</script>

<style>
</style>

02、效果如下：