• watch是什么？

        watch:是vue中常用的侦听器（监听器），用来监听数据的变化。

• watch的使用

watch: {

        这里写你在data中定义的变量名或别处方法名: {

                handler(数据改变后新的值, 数据改变之前旧的值) {

                                这里写你拿到变化值后的逻辑

                        }

                }

        }

• watch监听简单案例（监听一个）

<template>
  <div>
    <div>
      <input type="text" v-model="something">
    </div>
  </div>
</template>
<script>
  export default {
    name: "AboutView",
    components: {},
    data() {
      return {
         something: ""
      }
    },
    watch: {
        //方法1
       "something"(newVal, oldVal) {
          console.log(`新值：${newVal}`);
          console.log(`旧值：${oldVal}`);
          console.log("hellow  world");
      }
        //方法2
        "something": {
            handler(newVal, oldVal) {
              console.log(`新的值: ${newVal}`);
              console.log(`旧的值: ${oldVal}`);
              console.log("hellow  world");
            }
          }
        }
      }
 
</script>

• watch如何侦听数组的变化?

        如果只是监听数组列表项的增减（长度），比如push进数组，直接对数组进行监听，使用普通的监听：

data () {
    return {
        demo: [1,2]
    }
},
watch: {
    demo(val){
        console.log(val)
    }
},
this.demo.push(3)  //[1,2,3]

        要想监听数组值,对象里面值的变化需要深度监听，加上deep属性进行深度监听

watch: {
  bookList: {
    handler(val, oldVal) {
      console.log('book list changed')
    },
    deep: true
  },
}

        tis:监听数组的变化最好指定：deep

        通过以上内容我们知道了vue watch如何侦听数组的变化。感谢您访问“我爱捣鼓(www.woaidaogu.com)”网站的内容，希望对大家有所帮助！引用本文内容时，请注明出处！谢谢合作！