vue-14-watch监听-复习

 <div id="box">

    <input type="text" v-model="mytext">

    <select v-model="obj.year">
      <option value="2024">2024</option>
      <option value="2023">2023</option>
      <option value="2022">2022</option>
    </select>
    <select v-model="obj.month">
      <option value="4">4</option>
      <option value="3">3</option>
      <option value="12">12</option>
    </select>

  </div>

 <script>
    var obj = {
      data() {
        return {
          mytext: "",
          obj: {
            year: 2023,
            month: 12
          }
        }
      },
      // 可以在watch中处理异步请求，监听这些
      watch: {

        mytext: 'anyfunc',

        // 第一种：对象写法
        // 'obj.year': function (value) {
        //   console.log(value);
        // },
        // 'obj.month': function (value) {
        //   console.log(value);
        // },
        // 简写：
        // 'obj.year': 'anyfunc',

        // 第二种：
        obj: {
          handler(value) {
            console.log(value);
          },
          deep: true,//深度监听
          immediate: true//立即执行
        }

      },
      methods: {
        anyfunc(value) {
          console.log(value);
        }
      }

    }
    var app = Vue.createApp(obj).mount("#box")
  </script>

运行截图：