侦听器watch

侦听器的基本使用

*官方文档：https://v3.cn.vuejs.org/api/instance-methods.html#watch

• 什么是侦听器？

  • 开发中我们data返回的对象中定义了数据，这个数据通过插值语法等方式绑定到template中。
  • 当数据变化时，template会自动进行更新来显示最新的数据。
  • 但是在某些情况下，我们希望代码逻辑中监听某个数据的变化，这个时候就需要侦听器watch来完成。

• 侦听器的用法：

  • 选项 ： watch
  • 类型 ：{[key:string]:string | Function | Object | Array}

• watch的基本使用：

<template id="my-app">
    您的问题：<input type="text" v-model="question">
    <button @click="queryAnswer">查找答案</button>
  </template>

  <SCript src="../js/vue.js"></SCript>
  <SCript>
    const App = {
      template:'#my-app',
      data() {
        return {
          // 侦听question的变化，去进行一些逻辑的处理
          question: 'hello Vue3'
        }
      },
      watch: {
        // question侦听data中的属性名称
        // 第一个参数，newValue，变化后的新值
        // 第二个参数，oldValue，变化前的旧值
        question(newValue, oldValue) {
          console.log("新值：" + newValue, ",旧值：" + oldValue)
          this.queryAnswer()
        }
      },
      methods: {
        queryAnswer() {
          console.log(`你的问题${this.question}的答案是哈哈哈`);
        }
      },
    }

    Vue.createApp(App).mount('#app')
  </SCript>

• 输入框中的内容每次变化都被侦听到去调用watch的question函数
  

• 一般watch用来侦听data中的数据变化时，需要的逻辑处理（界面变化可以使用v-model）

侦听器的配置选项

<template id="my-app">
    <h2>{{info.name}}</h2>
    <button @click="changeInfo">改变info</button>
    <button @click="changeInfoName">改变info.name</button>
    <button @click="changeInfoNbaName">改变info.nba.name</button>
  </template>

  <script src="../js/vue.js"></script>
  <script>
    const App = {
      template: '#my-app',
      data() {
        return {
          info: { name: "why", age: 18, nba: {name: 'kobe'} }
        }
      },
      watch: {
        // 默认情况下我们的侦听器只会针对监听的数据本身的改变(内部发生的改变是不能侦听)
        // info(newInfo, oldInfo) {
        //   console.log("newValue:", newInfo, "oldValue:", oldInfo);
        // }

        // 深度侦听/立即执行(一定会执行一次)
        info: {
          handler: function(newInfo, oldInfo) {
            console.log("newValue:", newInfo.nba.name, "oldValue:", oldInfo.nba.name);
          },
          deep: true, // 深度侦听
          // immediate: true // 立即执行
        }
      },
      methods: {
        changeInfo() {
          this.info = {name: "kobe"};
        },
        changeInfoName() {
          this.info.name = "kobe";
        },
        changeInfoNbaName() {
          this.info.nba.name = "james";
        }
      }
    }

    Vue.createApp(App).mount('#app');
  </script>

• 默认情况下我们的侦听器只会针对监听的数据本身的改变(内部发生的改变是不能侦听)
• deep: 设置为true，开始深度侦听
• 设置为深度侦听后，就可以侦听到info内部数据的变化了
• immediate：设置为true后，被侦听的对象在渲染完后，一定会立即执行一次

侦听器的其他方式

• "info.name"这种方式可以单独只监听的info的name属性的变化
• 这种方式Vue3文档中没有提到，但是Vue2文档中有提到的是侦听对象的属性
  
• 当侦听对象嵌套多层时：

friends: [
            {name: "why"}, 
            {name: "kobe"}
          ]

• 如果监听对象有多层嵌套关系，可以通过v-for遍历该对象后，将每一个值通过prop传递给子组件，再进行监听