vue watch监听数据变化的案例详解

<script>
    export default {
        name: "app",
        // 数据
        data() {
            return {};
        },
        // 方法
        methods:{},
        // 侦听器
        watch:{}
    };
    </script>

 <template>
       <p>你点击按钮的次数是： {{ count }} </p>
       <button @click="add" v-model="count">点击</button>
   </template>
   <script>
   export default {
       name: "app",
       data(){
           return {
               count:0
           }
       },
       methods:{
           add(){
               this.count++;
           }
       },
       watch:{
           // 被侦听的变量count
           count(){
               console.log('count 发生了变化');
           }
       }
   };
   </script>

    <template>
        <input type="text" v-model="inputValue">
        <p>从输入框中获取到的数据：{{ passedInputValue }}</p>
    </template>
    <script>
    export default {
        name: "app",
        data(){
            return {
                inputValue: '',
                passedInputValue: ''
            }
        },
        watch:{
            inputValue() {
                // 当inputValue数据发生变化以后，延迟三秒赋值给passedInputValue
                setTimeout(() => {
                    this.passedInputValue = this.inputValue;
                }, 3000)
            }
        }
    };
    </script>

watch:{
        inputValue(value,oldValue) {
            // 第一个参数为新值，第二个参数为旧值，不能调换顺序
            console.log(`新值：${value}`);
            console.log(`旧值：${oldValue}`);
        }
    }

    <template>
        <p>FullName: {{fullName}}</p>
        <p>FirstName: <input type="text" v-model="firstName"></p>
    </template>
    <script>
    export default {
        name: "app",
        data(){
            return {
                firstName: 'Su',
                lastName: 'Junyang',
                fullName: ''
            }
        },
        watch:{
            firstName: {
                handler(newName, oldName) {
                    this.fullName = newName + ' ' + this.lastName;
                },
                // 如果设置了false，那么在页面第一次渲染以后不会触发侦听器
                immediate: true
            }
        }
    };
    </script>

data:{
    return {
        // 字符串发生变化，可以侦听
        firstName: 'Su',
        room:{
            name:"大床房",
            // 当房号发生变化的时候，侦听器并不能侦听到。
            // 因为侦听器只侦听到room，不能侦听number或者name
            number: 302
        }
    }
},

watch:{
    room:{
        handler(newRoom,oldRoom){
            console.log("房间号发生了变化")
        },
        deep: true
    }
}

 <template>
      <div class="search">
        <input type="text" v-model="inputValue" />
        <div class="search-block" v-for="(element, index) in results" :key="index">
          {{ element }}
        </div>
      </div>
    </template>
    <script>
    export default {
      name: 'app',
      data() {
        return {
          results: [],
          mockData: [
            '浙江大学',
            '中国人民大学',
            '清华大学',
            '清华大学附属中学',
            '浙江理工大学',
            '浙江工业大学'
          ],
          inputValue: ''
        };
      },
      watch: {
        inputValue(value) {
          if (!!value) {
            setTimeout(() => {
              this.results = this.mockData.filter(el => {
                console.log(value);
                return el.indexOf(value) !== -1;
              });
            }, 300);
          }
        }
      }
    };
    </script>